إضافة سلايد شو تلقائي جميل

إضافة سلايد شو تلقائي جميل ورائع فإن سلايدر تلقائي يستعرض لك أجدد المواضيع يضهر لك الصورة الموضوع وزر اقرأ المزيد وكذلك وصفه عن الموضوع.

طريقة التركيب :



1 - ابحث بإستعمال CTRL+F عن ]]></b:skin> أو ضعه بين <style> </style> فوق </head>  ضع الكود التالي فوقه مباشر.

/*Slider V1 www.ar1web.com */ #featuredSlider{ background: #fff; float: right; margin: 10px; padding: 0 0 10px; border: 1px solid #E4E3E3;width: 96.2%;height: 285px;position: relative; color: #666;direction: rtl; } .featured-thumb {float: right; margin: 5px 0; padding: 0px; padding-left: 10px;} #featuredSlider .container { margin:8px 10px 0 0;overflow:hidden; position:relative;} .featuredTitle { padding-top: 15px; font: 16px droid arabic kufi, serif; text-align: right; font-weight: 700;} .featuredTitle a{color:#FC4F3F} .featuredTitle a:hover{color:#000} p.text-ar1web { font: 12px/1.9em tahoma;} a.readmore {float: right; border: 1px solid #BFBFBF; background: #FFF; display: block; font: bold 10px droid arabic kufi; margin: 10px 0 0 0; padding: 4px 10px; color: #383737;} a.readmore:hover {color: #FC4F3F;border:1px solid #ABAAAA;} .slides{width:100%!important;height:280px!important} .navigation {float:left;overflow:hidden;position: relative;bottom:7px} ul.pagination {list-style-type:none; margin:0 auto; padding:0;} ul.pagination a { float:left; margin:0 5px; display:inline; } ul.pagination a { display:block;width:12px; padding-top:12px; height:0; overflow:hidden; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipIeLK7SWVvOv2pFokGYwQx2iHiJ06JaY8LTKFnhh9FlIWx-Z7w8lpiG_WFP4Y56i6FQtLM_fQBu1Hftl76egZWrhNbQefGdcTyXw3rPtE3EYYh1dMtpk6dLCE61AaZ9Pa1T3Z30nrUPQ/s1600/slider+pagination.png); background-position:0 0; background-repeat:no-repeat; } ul.pagination a:hover { background-position:0 -12px; } ul.pagination a:hover { background-position:0 -12px; } ul.pagination a.activeSlide { background-position:0 -12px } /* * Droid Arabic Kufi (Arabic) http://www.google.com/fonts/earlyaccess */ @font-face { font-family: 'Droid Arabic Kufi'; font-style: normal; font-weight: 400; src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.eot); src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.eot?#iefix) format('embedded-opentype'), url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.woff2) format('woff2'), url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.woff) format('woff'), url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Regular.ttf) format('truetype'); } @font-face { font-family: 'Droid Arabic Kufi'; font-style: normal; font-weight: 700; src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.eot); src: url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.eot?#iefix) format('embedded-opentype'), url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.woff2) format('woff2'), url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.woff) format('woff'), url(//fonts.gstatic.com/ea/droidarabickufi/v6/DroidKufi-Bold.ttf) format('truetype'); }

2 -ابحث عن </head> ثم ضع قبله الكود التالي.

<script src='//cdn.rawgit.com/iHussam/ar1web/master/cycle.js' type='text/javascript'/><script src='//cdn.rawgit.com/iHussam/ar1web/master/slider2.js' type='text/javascript'/>

3 -  ابحث عن <b:section class='main' id='main' showaddelement='no'> بعدها ضع الكود فوقه إن وجدت فوقه كود مثلا : <div id='main-wrapper'> فضع الكود فوقه.

<b:if cond='data:blog.pageType == "index"'><div id='featuredSlider'><div class='container'> <script>document.write(" <script src=\"/feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>"); </script><div class='navigation'><ul class='pagination'/> <script>$('.slides').cycle({ fx: 'fade', speed: 'slow', timeout: 2000, pager: '.pagination' }); </script></div></div><!--end .container--></div></b:if>

By glok

Similiar tagsبلوجرحلقات