حصرياً السلايدشو الاكثر احترافيه على منصة بلوجر (سلايد شو قالب -maxxiz)

بسم الله والصلاة والسلام على رسول الله , السلام عليكم ورحمة الله وبركاته , اليوم باذن الله سوف سنتعلم معآ  كيفية اضافة سكريبت سلايد شو تلقائي (slideshow-maxxiz) لمدونات بلوجر بطريقه سهله ومضمونه , هذا السلايد شو يقوم بعرض المواضيع تلقائيا ,بمعنى انك لن تحتاج الى ادراج روابط المواضيع او روابط الصور ليتم عرضها فيه , وانما سيتكفل هذا السكريبت بعرض مواضيعك بطريقه اوتوماتيكه بشكل انيق وبحركات متعدده ومتغيره مع كل صوره, مايميز هذا السلايد شو انه يضفي لمسة جميلة على المدونات حيث يساهم بشكل كبير في إثارة انتباه الزائر إلى أكثر المواضيع أهمية في المدونه , ومن مميزاته ايضا انه يقوم بعرض  مواضيع قسم معين من اقسام المدونه تقوم انت باختياره حسب رغبتك ,  الأمر بسيط جدا و سأحاول تبسيطه أكثر قدر الإمكان ان شاء الله

مشاهدة مثال حي للسلايدر شو ◄

 

كيفية اضافة هذا السلايد شو لمدوناتكم

     1- من  لوحة التحكم -> قالب -> تحرير HTML

     2- خذ نسخه احتياطيه لـ قالب المدونه قبل إجراء أية تغييرات 

     3- قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F)

 ]]></b:skin>

    ** والصق الكود التالي قبله تمامآ

.featuredpost.box_skitter.box_skitter_home.maxxiz-theme{padding:4px; background-color:#FDFDFD; box-shadow:0 1px 5px #BDBDBD; -moz-box-shadow:0 1px 5px #BDBDBD; -webkit-box-shadow:0 1px 5px #BDBDBD; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; height:350px; position:relative; z-index:88; margin-bottom:15px}
.box_skitter_home.maxxiz-theme .prev_button, 
.box_skitter_home.maxxiz-theme .next_button, 
.box_skitter_home.maxxiz-theme .info_slide_dots{background-color:#F3F3F3; background:-moz-linear-gradient(top,#FFF 0%,#F3F3F3 100%); background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#FFF),color-stop(100%,#F3F3F3)); background:-webkit-linear-gradient(top,#FFF 0%,#F3F3F3 100%); background:-o-linear-gradient(top,#FFF 0%,#F3F3F3 100%); background:-ms-linear-gradient(top,#FFF 0%,#F3F3F3 100%); background:linear-gradient(top,#FFF 0%,#F3F3F3 100%); transition:background-color linear .3s; -moz-transition:background-color linear .3s; -webkit-transition:background-color linear .3s; -o-transition:background-color linear .3s; outline:0}
#autorslidertop{padding:4px; border:1px solid #DDD; background-color:white; box-shadow:0 1px 5px rgba(0,0,0,.15); -moz-box-shadow:0 1px 5px rgba(0,0,0,.15); -webkit-box-shadow:0 1px 5px rgba(0,0,0,.15); -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px}
.box_skitter ul{display:none}
.box_skitter .container_skitter{overflow:hidden; position:relative; width:100% !important; height:100% !important; max-width:100%}
.box_skitter .image{overflow:hidden; max-width:100%; max-height:100%; height:350px}
.box_skitter .image > a{display:block; height:350px}
.box_skitter .image img{display:none; width:100%; height:100%; max-height:100%}
.box_skitter .box_clone{position:absolute; top:0; left:0; width:100px; overflow:hidden; display:none; z-index:20}
.box_skitter img{max-width:none}
.box_skitter .box_clone img{position:absolute; top:0; height:350px; left:0; z-index:19; max-width:710px; width:710px}
.box_skitter .prev_button{position:absolute; top:50%; left:35px; z-index:100; width:42px; height:42px; overflow:hidden; text-indent:-9999em; margin-top:-25px}
.box_skitter .next_button{position:absolute; top:50%; right:35px; z-index:100; width:42px; height:42px; overflow:hidden; text-indent:-9999em; margin-top:-25px}
.box_skitter .info_slide{position:absolute; top:15px; left:15px; z-index:100; background:#000; color:#FFF; font:padding:5px 0 5px 5px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; opacity:0.75}
.box_skitter .info_slide .image_number{background:#333; float:left; padding:2px 10px; margin:0 5px 0 0; cursor:pointer; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px}
.box_skitter .info_slide .image_number_select{background:#c00; float:left; padding:2px 10px; margin:0 5px 0 0}
.box_skitter .container_thumbs{position:relative; overflow:hidden; height:50px}
.box_skitter .info_slide_thumb{-moz-border-radius:0; -webkit-border-radius:0; border-radius:0; overflow:hidden; height:45px; top:auto; bottom:-5px; left:-5px; padding:5px; opacity:1.0}
.box_skitter .info_slide_thumb .image_number{overflow:hidden; width:70px; height:40px; position:relative}
.box_skitter .info_slide_thumb .image_number img{position:absolute; top:-50px; left:-50px}
.box_skitter .box_scroll_thumbs{padding:0 10px}
.box_skitter .box_scroll_thumbs .scroll_thumbs{position:absolute; bottom:60px; left:50px; background:#ccc; background:-moz-linear-gradient(-90deg,#555,#fff); background:-webkit-gradient(linear,left top,left bottom,from(#555),to(#fff)); width:200px; height:10px; overflow:hidden; text-indent:-9999em; z-index:101; -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; cursor:pointer; border:1px solid #333}
.box_skitter .info_slide_dots{position:absolute; bottom:-40px; z-index:151; padding:5px 0 5px 5px; -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px}
.box_skitter .info_slide_dots .image_number{background:#333; float:left; margin:0 5px 0 0; cursor:pointer; -moz-border-radius:50px; -webkit-border-radius:50px; border-radius:50px; width:18px; height:18px; text-indent:-9999em; outline:0; overflow:hidden}
.box_skitter .info_slide_dots .image_number_select{background:#c00; float:left; margin:0 5px 0 0}
.box_skitter .label_skitter{z-index:80; position:absolute; bottom:0; left:0; display:none}
.loading{position:absolute; top:50%; right:50%; z-index:10000; margin:-16px -16px; color:#FFF; text-indent:-9999em; overflow:hidden; background:#FFF no-repeat left top; width:32px; height:32px}
.label_skitter{z-index:150; position:absolute; bottom:0; left:0; color:#FFF; display:none; opacity:0.9}
.label_skitter p{padding:5px; margin:0}
.info_slide *{}
.box_skitter .progressbar{background:#000; position:absolute; bottom:5px; left:10px; height:5px; width:940px; z-index:99; border-radius:20px}
.preview_slide{display:none; position:absolute; z-index:999; bottom:40px; left:-40px; width:100px; height:50px; border:3px solid #FFF; background:rgba(0,0,0,.5); -moz-box-shadow:rgba(0,0,0,0.7) 0 0 10px; -webkit-box-shadow:rgba(0,0,0,0.7) 0 0 10px; box-shadow:rgba(0,0,0,0.7) 0 0 10px; overflow:hidden}
.preview_slide ul{width:100px; height:50px; padding:0; overflow:hidden; margin:0; list-style:none; display:block; position:absolute; top:0; left:0}
.preview_slide ul li{width:100px; height:55px; overflow:hidden; float:left; margin:0; padding:0; position:relative; display:block}
.preview_slide ul li img{position:absolute; top:0; left:0; height:55px; width:100px}
#overlay_skitter{position:absolute; top:0; left:0; width:100%; z-index:9998; opacity:1; background:#000}
.box_skitter_home{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbpb4hlPJEKEOa18UzGN_dtxWZPUHvbyEeoPwgRnR3FeN1iUW6MGNEF0jDO427KaNfhoMr1Ryq6qCn8wEsCt8qXuh4a8kXUjitDiv_NwOfay3rba0JgE9D7F66WcMZo3pZsBhb0g03TkY/s1600/anim_loading_sm_082208.gif); background-position:center center; background-repeat:no-repeat}
.box_skitter_home.maxxiz-theme .prev_button, 
.box_skitter_home.maxxiz-theme .next_button, 
.box_skitter_home.maxxiz-theme .info_slide_dots{border:1px solid #FFF; box-shadow:0 1px 3px #BDBDBD; -moz-box-shadow:0 1px 3px #BDBDBD; -webkit-box-shadow:0 1px 3px #BDBDBD; -moz-border-radius:0; -webkit-border-radius:0; border-radius:0}
.box_skitter_home.maxxiz-theme .info_slide{}
.box_skitter_home.maxxiz-theme .info_slide_dots{    bottom:-14px;     height:30px;     padding:0px 4px;     z-index:99}
.box_skitter_home.maxxiz-theme .info_slide_dots span{transition:background linear .3s; -webkit-transition:background linear .3s; -moz-transition:background linear .3s; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKzAjSR4W0UdVfa1lEA7ZbSYNBFpUt4XX6EgEXOGpkRCLGOlCioYJqHcMXk3Z6FToPWHjjO9q42T4jJkUyAq0yEtDY2gFIvVabsopAVdXzIezYH3SEfjBsNeG8P4WzU_dMMitvO_3id-s/s1600/light-overlay.png); background-repeat:repeat-x; background-position:left -13px; background-color:#d1d1d1; color:#777; -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%; border-bottom:1px solid #FFF; display:block; width:10px; height:10px; text-indent:-9999px; float:left; margin:10px 6px 0 6px}
.box_skitter_home.maxxiz-theme .info_slide_dots span:hover{background-color:#777}
.box_skitter_home.maxxiz-theme .info_slide_dots span.image_number_select{background-color:#1ABFC6; border:none; width:14px; height:14px; margin:8px 3px 0 3px; box-shadow:inset 1px 0 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.1),inset 0 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.1); -webkit-box-shadow:inset 1px 0 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.1),inset 0 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.1); -moz-box-shadow:inset 1px 0 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.1),inset 0 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.1)}
.box_skitter_home.maxxiz-theme .prev_button, 
.box_skitter_home.maxxiz-theme .next_button{display:block; width:75px; height:22px; line-height:30px; text-decoration:none; font-size:10px; text-transform:uppercase; transition:none; -webkit-transition:none; -o-transition:none; -moz-transition:none; text-indent:0; bottom:-11px; top:auto; color:#777; z-index:98; cursor:pointer}
.box_skitter_home.maxxiz-theme .prev_button:hover, 
.box_skitter_home.maxxiz-theme .next_button:hover, 
.box_skitter_home.maxxiz-theme .prev_button:active, 
.box_skitter_home.maxxiz-theme .next_button:active{opacity:1 !important}
.box_skitter_home.maxxiz-theme .next_button{right:25.5%; padding-right:5px; text-align:right; line-height:22px; opacity:1 !important}
.box_skitter_home.maxxiz-theme .next_button span{padding-right:20px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmCY9eLAxXsgjnD4OOkSqOLIrrh3DHpJzFkuaSW21tEyWEk5i_oFBBNjFtAGr9cFzQJ7iFs9wxuuTtOj_RG9mlpQkqbEs_T6-jyKYBLje-wOaGZVvQXjrsB__Mm8voUWlysK4HhJ7aZAc/s1600/nav-next.png) no-repeat left top; background-position:right center; padding-bottom:1px; display:block}
.box_skitter_home.maxxiz-theme .prev_button{left:25.5%; padding-left:5px; text-align:left; line-height:22px; opacity:1 !important}
.box_skitter_home.maxxiz-theme .prev_button span{padding-left:20px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4C-A9mn74FCuoG73P1r4VbwPy-j5GXV-mCUrZrntKG4U6Ka0-UoG8doxWe65zLBMzZiGHilLw9BWi0zcapIL6P6EvOfVdeKv2XFKWWfe-y1oRa-HzALaYYlfEdz8AFe8n9X1mAeB33Yw/s1600/nav-prev.png) no-repeat left top; background-position:left center; padding-bottom:1px; display:block}
.box_skitter_home.maxxiz-theme .label_skitter{width:90%; padding:0; left:50%; margin-left:-45%; bottom:10%; text-align:right; height:auto; color:white}
.box_skitter_home.maxxiz-theme .label_skitter .inner{padding:5px 8px 5px; background:#1ABFC6; border-right:5px solid white; border-left:5px solid white}
.box_skitter_home.maxxiz-theme .label_skitter p{padding:0; margin-top:5px; margin-bottom:5px; font-size:11px; text-shadow:0 1px 0 rgba(0,0,0,0.3)}
.box_skitter_home.maxxiz-theme .label_skitter strong{margin-top:0; line-height:20px !important; font-size:15px; text-shadow:0 1px 0 rgba(0,0,0,.3); color:white}
.box_skitter_home.maxxiz-theme .label_skitter a{color:#fff; text-decoration:none; font-family:arial,tahoma; font-size:17px; text-shadow:1px 1px #00D2D9}
.box_skitter_home.maxxiz-theme .label_skitter a:hover{color:#00D2D9}
.box_skitter_home.maxxiz-theme .info_slide_thumb{background-color:#FFF}
.box_skitter.maxxiz-theme .info_slide_thumb .image_number{margin:5px}
.box_skitter .container_skitter .date, 
.box_skitter .container_skitter .cm{font-size:8px}
.box_skitter .container_skitter .date span{margin-right:3px}
#autoslidenya .widget-content, 
#manualslidenya1 .featuredarea{margin:0; padding:2px}
#manualslidenya1 .featuredarea{margin:0 0 15px}

ثم قم بالبحث عن الكود التالي

</head>

 ** والصق الكود التالي قبله مباشره (فوقه) 

<script type="text/javascript" src="http://yourjavascript.com/3102224223/slideshow-jalal-maxxiz.js"></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>

وبالاخير قم بالبحث عن

  
<div id='main-wrapper'>

واذا لم تجده قم بالبحث عن احد الاكواد التاليه

  
<div id='main-wrapper'>
          او
<div id='content'>
          او
<div id="content"></div>
          او
<div class='column-center-inner'>

** و الصق الكود التالي بعده/أسفله :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div class='clear'/>
<div id='featpost'/>
<script type='text/javascript'>
jQuery(&quot;#featpost&quot;).AutofeaturedPost({
blogURL: &quot;http://alb33dani.com/&quot;,
MaxPost:10,
tagName: &quot;قوالب بلوجر&quot;
});
</script>
<div class='clear'/>
</b:if>

الان يجب عليك استبدال رابط مدونتي  http://alb33dani.com  برابط مدونتك
وايضا قم باستبدال كلمة قوالب بلوجر باسم احد اقسام مدونتك

وبالاخير قم بحفظ القالب وتمتع بمشاهدة السلايدرشو وهو يعرض اخر مواضيع مدونتك بطريقه تلقائيه وبدون بذل اي جهد او تعب من قبلك

وكالعاده اذا واجهتكم اي مشاكل في تركيب السلايدرشو ضعوا تعليق وسيتم الرد عليكم ان شاء الله .....

By glok

Similiar tagsاضافات بلوجرسلايدرشو