سلايدشو ذاتي للقائمة الجانبية

انتشر في الكثير من المدونات العربية فكرة السلايدشو الذاتي بسبب سرعته وسهولة تخصيصه واستعمال مواقع مشهورة له، من خلال هذا الموضوع أردت أن أطرح الجديد في هذا المجال عبر سلايدشو آلي أو ذاتي يتم تركيبه للقائمة الجانبية يعرض لك آخر المواضيع في كامل المدونة أو من قسم معين... تابعوا معي الموضوع. 

أولا وكما قلت فإن له فوائد كثيرة حيث أنه جميل وسوف يحث الزوار على الدخول إلى المواضيع الأخرى مما سوف يزيد من نسبة الزيارات لديك كما أنه يضفي على مدونتك لمسة احترافية تزيد من رونقها وجمالها :) .

تركيب السلايدشو في القائمة الجانبية

كل ما يتوجب علينا فعله هو الدخول إلى لوحة التحكم > التخطيط > إضافة أداة جديد > HTML/JAVASCRIPT
ثم ضع الكود التالي :

<style scoped="" type="text/css">

ul.rcentside *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

ul.rcentside{font:normal normal 11px Verdana,Geneva,sans-serif}

ul.rcentside,ul.rcentside li{margin:0;padding:0;list-style:none;position:relative}

ul.rcentside{width:100%;height:500px}

ul.rcentside li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}

ul.rcentside li:nth-child(1),ul.rcentside li:nth-child(2),ul.rcentside li:nth-child(3),ul.rcentside li:nth-child(4){display:block}

ul.rcentside img{border:0;width:100%;height:100%}

ul.rcentside li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}

ul.rcentside li:nth-child(2){left:0;top:50%}

ul.rcentside li:nth-child(3){left:50.5%;top:50%}

ul.rcentside li:nth-child(4){width:100%;left:0;top:75%}

ul.rcentside  .overlayx,ul.rcentside li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}

ul.rcentside .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-Bfl9_M70ITZ8viasN1w2XG-kvCbWZXDKnHXUaEODA9APqEtzhdkDuZy3_DPw6EhInyqCuNfF3Dp4FBrbll_SFRcTFj8lrpNjNbbkYIsGp0JW09PGSCOWe4kP_oPZtx30flihQQ86oRs/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}

ul.rcentside .overlayx,ul.rcentside img{border:4px solid #2E8DCE;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}

ul.rcentside li:nth-child(1) .overlayx{background-position:50% 25%}

ul.rcentside .overlayx:hover{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}

ul.rcentside h4{position:absolute;bottom:30px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:Georgia,Times,"Times New Roman";font-weight:normal}

ul.rcentside li:nth-child(1) h4,ul.rcentside li:nth-child(4) h4{font-size:150%}

ul.rcentside .label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size:90%}

ul.rcentside li:nth-child(2) .autname,ul.rcentside li:nth-child(3) .autname{display:none}

.buttons{margin:5px 0 0}

.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative;float:left;}

.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}

.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}

</style>

<div id="featuredpostside" style="width:300px;"></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

<script src="https://ivyth.googlecode.com/svn/js/featuredpostside.min.js" type="text/javascript"></script>

<script type='text/javascript'>

//<![CDATA[

FeaturedPostSide({

blogURL:"http://blogging.arabiclabs.com",

MaxPost:8,

idcontaint:"#featuredpostside",

ImageSize:300,

interval:5000,

autoplay:true,

MonthNames:["جانفي","فيفري","مارس","أفريل","ماي","جوان","جويلية","أوت","سبتمبر","أكتوبر","نوفمبر","ديسمبر"],

tagName:false

});

//]]>

</script>

ثم غير الرابط الأحمر برابط مدونتك
ثم إضغط حفظ

كيفية تخصيص الأداة

يمكننا طبعا تخصيص الأداة، فيمكننا تغيير أسماء الأشهر (حسب ما يتوافق مع بلدك) عبر MonthNames كما يمكننا جعل السلايدشو يستعرض المواضيع من تسمية أو قسم واحد عبر tagName ونغير كلمة false باسم القسم/ التسمية

أرجوا أن يكون الموضوع قد لاقى رضاكم، وإلى اللقاء في موضوع جديد