السلام عليكم ورحمة الله وبركاته اصدقائي الاعزاء احبت ان اشارك معكم اليوم سلايدر شو احترافي لمدونات بلوجر

يرجي العلم ان الاكواد نظيفة وغير مشفرة

.= وهذه صورة من السلايدر شو

نبدا بطريقة الاضافة اولا html و xml

  • قم بتحديد افضل مكان لك لوضع الاضافة يفضل وضعها بعد header
  • قم بوضع الكود التالي في ذلك المكان 
<div class='feature-post clearfix' id='feature-post'>
<b:section class='feature' id='feature' maxwidgets='1' showaddelement='yes'>
  <b:widget id='HTML1' locked='true' title='السلايدر شو' type='HTML' version='2' visible='true'>
    <b:widget-settings>
      <b:widget-setting name='content'/>
    </b:widget-settings>
    <b:includable id='main'>
  <div class='widget-content'>
<script src='/feeds/posts/default?alt=json-in-script&amp;redirect=false&amp;start-index=1&amp;max-results=6&amp;callback=plist' type='text/javascript'/>  
 </div>
</b:includable>
  </b:widget>
</b:section>
</div>

ثانيا الجافا اسكربت

قم باضافة الكود التالي فوق وسم ال </head>

كما في الصورة التالية 

<script type='text/javascript'>//<![CDATA[
var cb=function(){var e=document.createElement("link");e.rel="stylesheet",e.href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css";var t=document.getElementsByTagName("head")[0];t.parentNode.insertBefore(e,t)},raf=requestAnimationFrame||mozRequestAnimationFrame||webkitRequestAnimationFrame||msRequestAnimationFrame;raf?raf(cb):window.addEventListener("load",cb);
//]]></script>
<script type='text/javascript'>
//<![CDATA[ 
function plist(e){document.write("<ul>");for(var i=0;i<200;i++){var r=e.feed.entry[i],t="";if(i==e.feed.entry.length)break;for(var l=0;l<r.link.length;l++)if("alternate"==r.link[l].rel){t=r.link[l].href;break}if(""!=t){var a=r.title.$t,n=r.media$thumbnail.url.replace("s72-c/","s400/");document.write("<li><a href='"+t+"'><div class='imagethum'><img src='"+n+"'/></div><div class='desc'><p>"+a+"</p></div></a></li>")}}document.write("</ul>")}
//]]>
</script>

ثالثا اضافة ال css

قم باضافة ال css في <b:skin>

كما في الصورة التالية 

/*==== slider ====*/
#feature-post {display: inline-block;background: #fff;margin-bottom: 40px;box-shadow: 0 6px 6px -3px rgba(0,0,0,.1);padding: 12px;width: calc(100% - 312px);float: right;}
#feature-post ul li {float: right;margin-left: 12px;width: calc((100% - 24.1px)/ 3);height: auto;position: relative;border: 1px solid #ddd;}
#feature-post ul li {margin-bottom: 12px;overflow: hidden;}
#feature-post ul li:first-child {width: calc(100% - ((100% + 12px)/ 3));}
#feature-post ul li:last-child, #feature-post ul li:nth-child(2), #feature-post ul li:nth-child(3) {margin-left: 0;}
#feature-post ul li:first-child a .imagethum {padding-bottom: calc(75% + 4px);}
#feature-post ul li a .imagethum {position: relative;overflow: hidden;padding-bottom: 75%;}
#feature-post ul li a img {top: 0;left: 0;margin: 0 auto;width: 100%;height: 100%;border: none;position: absolute;right: 0;bottom: 0;}#feature-post ul li:hover {cursor: pointer;filter: grayscale(60%);}
#feature-post .desc, #feature-post .desc p, #feature-post ul li a img {position: absolute;right: 0;bottom: 0;}
#feature-post .desc {width: 100%;height: 50%;background: -webkit-linear-gradient(270deg,rgba(0,0,0,0),#000);background: -o-linear-gradient(270deg,rgba(0,0,0,0),#000);background: -moz-linear-gradient(270deg,rgba(0,0,0,0),#000);background: -ms-linear-gradient(270deg,rgba(0,0,0,0),#000);}
#feature-post ul li:first-child .desc p {font-size: 24px;line-height: 1.8;}
#feature-post .desc p {color: #fff;text-align: right;line-height: 1.6;padding: 12px;font-size: 16px;}

جعل الاضافة تظهر مواضيع من قسم محدد:

قم بتعديل هذا الكود 

/feeds/posts/default?alt=json-in-script&amp;redirect=false&amp;start-index=1&amp;max-results=6&amp;callback=plist

بهذا الكود 

/feeds/posts/default/-/yall2showf?published&alt=json-in-script&callback=labelthumbs

وقم بتغيير yall2showf الى اسم القسم الذي تريد ان تعرض مواضيعه