طريقة اضافة سلايد شو تلقائي بشكل رائع وجذاب

اهلا بكم, اليوم مع اضافة جديدة من اضافات بلوجر . 

اضافة سلايد شو تلقائي سهل التحكم 

نقدم لكم إضافة جديدة وهي اضافة سلايد شو (slide show) تلقائي محترف لمدونات بلوجر جميل جدا ورائع وبسيط ولكنه .. مميز
يقوم بعرض أخر المشاركات بطريقة رائعة في عرض شرائح المقالات .

طريقة تركيب السلايد شو التلقائي 

•  إذهب إلى لوحة التحكم في مدونتك
• ثم توجه إلى تبويب : تخطيط 
• ثم إضافة أداة 
• ثم أخترمن قائمة الادوات , أداة HTML/JavaScript 
  

ثم اضف الكود التالي : 

<style scoped="" type="text/css">#coinautoslide{margin:0 auto;border:4px solid white;border-radius:2px;font:normal normal 11px Verdana,Geneva,sans-serif;line-height:1.6em} .coin-slider{overflow:hidden;zoom:1;position:relative} .coin-slider a{text-decoration:none;outline:none;border:none} .cs-buttons{font-size:0;padding:10px;float:left} .cs-buttons a{margin-left:5px;height:10px;width:10px;float:left;border:1px solid #B8C4CF;color:#B8C4CF;text-indent:-1000px} .cs-active{background-color:#B8C4CF;color:#FFFFFF} .cs-buttons a{border-radius:50%;background:#CCC;background:-webkit-linear-gradient(top,#CCCCCC,#F3F3F3);background:-moz-linear-gradient(top,#CCCCCC,#F3F3F3);background:-o-linear-gradient(top,#CCCCCC,#F3F3F3);background:-ms-linear-gradient(top,#CCCCCC,#F3F3F3);background:linear-gradient(top,#CCCCCC,#F3F3F3)} a.cs-active{background:#599BDC;background:-webkit-linear-gradient(top,#599BDC,#3072B3);background:-moz-linear-gradient(top,#599BDC,#3072B3);background:-o-linear-gradient(top,#599BDC,#3072B3);background:-ms-linear-gradient(top,#599BDC,#3072B3);background:linear-gradient(top,#599BDC,#3072B3);border-radius:50%;box-shadow:0 0 3px #518CC6;border:1px solid #3072B3!important} .cs-title{width:100%;padding:5px 0;background-color:#000000;color:#FFFFFF} .cs-title strong{display:block;font-size:120%} .cs-title p{margin:0} .cs-title cite{font-size:90%} .cs-title strong,.cs-title cite,.cs-title p{padding:0 10px} .cs-prev,.cs-next{background-color:#000000;color:#FFFFFF;padding:0 10px} </style><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script><script type='text/javascript'>var AutoCoinConfig = { url_blog: "<data:blog.homepageUrl/>", MaxPost: 8, cmtext: "تعليقات", MonthNames : ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"], pBlank : "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif", NoCmtext : "comment number", imageSize :500, SumChars : 100, tagName:false, width: 500, height: 250, spw: 7, sph: 5, delay: 3000, sDelay: 30, opacity: 0.7, titleSpeed: 500, effect: '', navigation: true, links : true, hoverPause: true, prevText: 'السابق', nextText: 'التالي' }; </script><script src="https://dl.dropboxusercontent.com/s/ps6ipd33yf46hti/slider-www-madad2-com.js" type="text/javascript"></script>

ملاحظات : 

اذا لم يعمل معك السلايد شو فهذا يعني ان هذا الكود موجود في قالبك من قبل لذلك قم بحذفه من السلايد شو 

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

للتحكم في عدد الموضوعات : غير الرقم 8 :MaxPost 

للتحكم في الارتفاع  غير النسبة من هنا height: 250

للتحكم في العرض (الاتساع ) غير من هنا width: 500

سلايد شو رباعي 

وهذا سلايد شو اخر مقسم إلى اربعة اقسام 

الكود هنا

<style type="text/css">#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}#slides ul{height:250px}#slides li{width:49.9%;height:100%;position:absolute;display:none}#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4){display:block}#slides li:nth-child(1){left:0;top:0}#slides li:nth-child(2){left:50.1%;width:24.8%;height:49.8%}#slides li:nth-child(3){left:75.2%;width:24.8%;height:49.8%}#slides li:nth-child(4){left:50.1%;top:50.2%;height:49.9%}#slides a{display:block;width:100%;height:100%;overflow:hidden}#slides img{display:block;width:100%;height:100%;border:0;padding:4px;background-color:#0097BD;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTi6bmVm3YrZ3shRNfHCKBG_7yKDmpCfGkZM0BDvKmpT5BilWvDLWDKjoBaV-5Cfvk8TAzZOm2x3eAmWR2o5mtf7Iw5vNNmVc1zbPxHjnwhTrgVWoIeRZ2czYXovhxN7UNrQCT5keIdzcs/s320/bloggerheroe.com-fadebg.png);background-position:50% 50%;background-repeat:repeat-x;border:4px solid #1BA1E2;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}#slides h4{position:absolute;bottom:30px;margin:0;font-size:18px;font-family:Arial;left:0;padding:0 10px;color:white;z-index:3;line-height:20px;font-weight:normal}#slides li:nth-child(2) h4,#slides li:nth-child(3) h4{font-size:13px;line-height:15px}#slides .label_text{font-size:9px;color:white;bottom:10px;z-index:3;left:10px;font-family:Verdana,Geneva,sans-serif;position:absolute}#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname{display:none}#slides .overlayx,#slides 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}#slides li:hover .overlayx{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}#buttons{margin: 5px auto;text-align: center;background:#1BA1E2;width: 10%;}#buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}#buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #FFFFFF transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}#buttons a#nextx::before{border-color:transparent transparent transparent #FFFFFF;margin-left:-3px}@media only screen and (max-width:600px){ #slides ul{height:600px} #slides li:nth-child(1){width:100%;height:49.8%} #slides li:nth-child(2){top:50.2%;height:24.8%;left:0;width:49.8%} #slides li:nth-child(3){left:50.2%;top:50.2%;width:49.8%;height:24.8%} #slides li:nth-child(4){left:0;top:75.3%;height:24.8%;width:100%}}</style><div id="featuredpost"> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script><script src="http://dl.dropbox.com/u/81212926/bloggerheroe.com-fade.js" type="text/javascript"></script><script type='text/javascript'>//<![CDATA[$(document).ready(function () {FeaturedPost({blogURL:"http://add-ar.blogspot.com/",MaxPost:8,idcontaint:"#featuredpost",ImageSize:300,interval:5000,autoplay:true,tagName:false});});//]]></script>

قم بتغيير رابط موقعي برابط موقعك