اضافة سلايدر شو احترافي لمدونات بلوجر بطريقة بسيطة

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

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

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

نبدا بطريقة الاضافة اولا 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&redirect=false&start-index=1&max-results=6&callback=plist

بهذا الكود

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

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