معهد خبراء بلوجر - شرح إضافة سلايدر تشغيل ذاتي "أوتوماتيكي" لمدونات بلوجر

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

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

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

http://i1258.photobucket.com/albums/...p/78f1f7be.png

مثال حي عن السلايدر الأوتوماتيكي : مدونة تجريبية

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

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

1- من تحرير HTML علم على توسيع قوالب عناصر واجهة المستخدم وابحث عن :

كود:

]]></b:skin>

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

كود:

/* 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

*/

ومن تحرير HTML ابحث عن :

كود:

</body>

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

كود:

<!-- 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>

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

2- من تصميم ثم عناصر الصفحة قم بإضافة أداة 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 لعرض مواضيع عشوائية.

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