شرح إضافة سلايدر تشغيل ذاتي "أوتوماتيكي" لمدونات البلــــــوغر

بسم الله الرحمن الرحيم في هذا الموضوع سنتعرف على طريقة إضافة سلايدر تشغيل ذاتي "أوتوماتيكي" لمدونات بلوغر. 

اولا صورة ومثال حي عن السلايدر :

صورة السلايدر الأوتوماتيكي :

الآن شرح إضافة سلايدر تشغيل ذاتي "أوتوماتيكي" لمدونات بلوجر :

1-اذهب الى تحرير HTML و بحث عن كود :

]]></b:skin>

2-أضف قبل هذا الكود مباشرة الكود التالي :

/* START
--------------------------------------------------------------------
Easy Slider
--------------------------------------------------------------------
EasySlider
*/
#slide-container {
height:360px;
position:relative;
width:480px;
}
#slider {
height:360px;
right:25px;
overflow-x:hidden;
overflow-y:hidden;
position:relative;
width:480px;
}
.slide-desc {
background:transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;
color:#FFFFFF;
padding:10px;
position:absolute;
left:0px;
text-align:right;
top:0;
width:200px;
z-index:99999;
}
.slide-desc h2{display:block;}
.crosscol .widget-content {position:relative;}
#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{margin-top:1em;}
#slider li, #slider2 li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:480px;
height:360px;
overflow:hidden;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
right:-30px;
text-indent:-9999px;
top:71px;
z-index:1000;
}
#nextBtn, #slider1next{
right:500px !important;
}
#prevBtn, #nextBtn, #slider1next, #slider1prev {
display:block;
height:77px;
right:0;
position:absolute;
top:132px;
width:30px;
z-index:1000;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;
}
/* numeric controls */
ol#controls{
margin:1em 0;
padding:0;
height:28px;
}
ol#controls li{
margin:0 10px 0 0;
padding:0;
float:right;
list-style:none;
height:28px;
line-height:28px;
}
ol#controls li a{
float:right;
height:28px;
line-height:28px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a{
background:#5DC9E1;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
/* END
--------------------------------------------------------------------
Easy Slider
--------------------------------------------------------------------
EasySlider
*/

3-تحرير HTML ابحث عن : 

</body>

4-وأضف قبلها الكود التالي :

<!-- jQuery -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script src='https://bloggerexp.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 $("#slider").easySlider({
 auto: true,
 continuous: true
 });
});
//]]>
</script>

وأخيرا وليس أخيرا اضغط حفظ.

5-قم بإضافة أداة HTML/JavaScript والصق الكود التالي :

<div id="slider">
<script style="text/javascript" src="http://catur-at-abu-farhan.googlecode.com/svn/trunk/galleryposts-easySlider.min.js"></script>
<script style="text/javascript">
 var numposts_gal = 3;
 var numchars_gal = 150;
 var random_posts = false; // random posts
</script>
<!-- replace with your web address (marked with red color) -->
<script src="http://arblogger-templates.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>

مع تغيير :

• http://arblogger-templates.blogspot.com برابط مدونتك
• var numposts_gal = 3 : هو عدد المواضيع المراد عرضها بالسلايدر
• var numchars_gal = 150; : هو عدد حروف الوصف
• var random_posts = false; // random posts : اجعله false لعرض آخر المواضيع أو true لعرض مواضيع عشوائية.

وقم بحفظ الأداة وإزاحتها إلى المكان الذي تريد عرض سلايدر تشغيل ذاتي "أوتوماتيكي" لمدونات بلوجر عليه.

--مؤخود من http://www.bloggerexp.com بتصرف .--