شرح تركيب سلايدر شو لمدونات البلوجر بالسيد بار

اقدم لكم سلايدرشو لقالب البلوجر يوضع بالسيد بار

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

قم ابحث عن الوسم ]]></b:skin> و ضع الكود التالي فوقه

/*=====================================
= Slick Slider widget css
=====================================*/
.isw-DySlider {
    position: relative;
    overflow: hidden;
     padding: 0;
}
.slider-thumb img {
    width: 100%;
}
.slider-content p.ssummary {
    display: none;
}
.slider-thumb {
    height: 200px;
    overflow: hidden;
    position: relative;
}
.slider-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: right;
    color: #fff;
    padding:5%;
    box-sizing: border-box;
}
.slider-thumb a:before {
    content: no-close-quote;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIGkDhO_wFz5T5eyfGT2MzPdvumnsMSCUFNO471Ghrq6zBuOzsqi6ztWFp_bWjImCn0IzrOF0QJAIfrl-_5BZfXfzUZvpU006zJEkX13c17UpiAIUPfhTTWFKESt4C_7YunDZHtqiCTiw/s1600-r/metabg.png) repeat-x;
    background-size: 100% 100%;
    height: 100%;
}
a.tagslider {
    background: #c71212;
    padding: 0 8px;
    border-radius: 10px;
    display: inline-block;
}
.slider-title {
    font-size: 1.3rem;
    font-weight: 800;
    margin-top: 8px;
}
.slider-content .date {
    color: #aba7a7;
    font-family: sans-serif;
    font-size: 12px;
}
.date:before {
    content: "\f017";
    font-family: fontawesome;
    float: right;
    padding-left: 5px;
}
.slider-content .postAuthor:before {
    content: "\f007";
    font-family: fontawesome;
    float: right;
    padding-left: 5px;
    font-size: 10px;
    color: #aba1a1;
    margin-top: 4px;
}
.slider-content .postAuthor {
    float: right;
    font-size: 14px;
}
/*=====================================
= Slick Slider css
=====================================*/
/* Slider */
button.slick-arrow {
    border: none;
    background: #d62424;
    color: #fff;
    width: 13%;
    padding: 12px 0;
    margin-right: 2%;
}
.slick-slider
{
    position: relative;



    display: block;
    box-sizing: border-box;



    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;



    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}



.slick-list
{
    position: relative;



    display: block;
    overflow: hidden;



    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}



.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}



.slick-track
{
    position: relative;
    top: 0;
    left: 0;



    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;



    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}



.slick-slide
{
    display: none;
    float: left;



    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;
    position:relative;
    height: auto;



    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

<script type='text/javascript'>
//<![CDATA[
$("#IsweebSlider .widget").each(function(){
var e=$(this),
    t=e.find(".widget-content").text(),
    l=t.split("/"),
    i=l[0],r=l[1],
    n=Math.floor(Math.random()*i+1);
if(t.match("recentpost"))
var o="/feeds/posts/default?alt=json-in-script&max-results="+i;
else if(t.match("randompost"))
var o="/feeds/posts/default?alt=json-in-script&orderby=updated&start-index="+n+"&max-results="+i;
else var o="/feeds/posts/default/-/"+r+"?alt=json-in-script&max-results="+i;
$.ajax({
type:"GET",
url:o,
dataType:"jsonp",
success:function(e){
for(var t="<button type='button' class='top-arrow' style='display: inline-block;'><i class='fa fa-chevron-up'></i></button><button type='button' data-role='none' class='bottom-arrow' aria-label='Next' role='button' style='display: inline-block;' aria-disabled='false'><i class='fa fa-chevron-down'></i></button><ul class='isw-DySlider isw-carousel'>",l="",i=0;i<e.feed.entry.length;i++){
for(var r=e.feed.entry[i],
postAuthor=r.author[0].name.$t,
uriauthor=r.author[0].uri.$t,
date=r.published.$t.substring(0,10),
n=r.title.$t,
o=0;o<r.link.length;o++){
if("replies"==r.link[o].rel&&"text/html"==r.link[o].type){r.link[o].title,r.link[o].href}if("alternate"==r.link[o].rel){
var f=r.link[o].href;break}}
var p,h=r.content.$t,u=$("<p>").html(h).text(),m=u.substring(0,180)+"...",
v=r.category[0].term;
try{p=0==i?r.media$thumbnail.url.replace("s72-c","w550-h420-c").replace("default","hqdefault"):r.media$thumbnail.url.replace("s72-c","w550-h420-c").replace("default","hqdefault")}catch(g){s=r.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),p=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjWmSCL1ByyCN_pAJRjH-oBvjX1hljvSDnNSHOPxmDvEFn7Vqm5tj8UEV5R0EiGYeulXM4eXgWDIMohSYqz4oKRZpJ6ISPt94xi5H0KAlP2pnesxUstxiQcdiSHsH4eSShOepUGhq8NhE/s1600/90.jpg"}
l+='<li class="recent-slider"><div class="slideto">',
l+='<div class="slider-content">',
l+='<div class="slider-thumb"><a href='+f+'><img class="slidep-img traslider" src="'+p+'" title="'+n+'" alt="'+n+'"/></a></div>',
l+='<div class="slider-bottom">',
l+='<div class="slider-tag"><a class="tagslider" href="/search/label/'+v+'">'+v+"</a></div>",
l+='<div class="slider-title"><a class="slider-titlea" href='+f+">"+n+"</a></div>",
l+='<div class="slider-faq traslider">',



l+='<p class="ssummary">'+m+"</p>",           //|
//0==i&&(l+='<p class="ssummary">'+m+"</p>"), //|
                                              //|
l+='<div class="date">'+date+"</div>",
l+='<a class="postAuthor" href='+uriauthor+' target="_blank" rel="nofollow">'+postAuthor+"</a>",
l+="</div>",
l+="</div>",
l+="</div></div></li>"}
l+="</ul>",
t+=l,
$("#IsweebSlider .widget-content").html(t);
/*==============*/
//OwlCarousel-js
/*==============*/
$('.isw-DySlider.isw-carousel').slick({
            infinite: true,
            autoplay: true,
            vertical:true,
            verticalSwiping:true,
            slidesToShow: 3,
            slidesToScroll: 1,
            prevArrow: $('.top-arrow'),
            nextArrow: $('.bottom-arrow')
});
}})
});
//]]>
</script>
<script src='https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js' type='text/javascript'/>

1. slidesToShow يقصد بها عدد التدوينات المراد عرضها
2. slidesToScroll يقصد بها عدد التدوينات المراد تمريرها