للبحـث بداخـل المدونــة . . .

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

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




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

يظهر بشكل بشكل عامودي الحركة عامودية
السلايدر متجاوب





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




قم ابحث عن الوسم ]]></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;
}


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


<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 يقصد بها عدد التدوينات المراد تمريرها


قم بوضع الاكواد التالية 
 في المكان الذي يناسبك ويفض وضعها فوق السايدبار أو أسفله



 <div class='DySliderstyle-material' id='IsweebSlider'>
<b:section class='Isweeb-slickSlider' id='Isweeb-slickSlider' maxwidgets='1'>
  <b:widget id='HTML748' locked='true' title='سلايدر أفقي' type='HTML' version='1'>
    <b:widget-settings>
      <b:widget-setting name='content'>10/قوالب</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
  <!-- script title btn more -->
                      <script>
document.write(&#39;&lt;div class=&quot;aftertitle&quot;&gt;&lt;h2&gt;<data:title/>&lt;/h2&gt; &lt;div class=&quot;getmorre&quot;&gt;&lt;a href=&quot;/search/label/?max-results=4&quot;&gt;المزيد&lt;i class=&quot;fa fa-plus&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&#39;);
                      </script>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
  </b:widget>
</b:section>
</div> 



ان أردت أن يعمل السلايدر بتسمية فقم بتغيير قوالب بتسمية لديك وان أردت أن يظهر مواضيع عشوائية ضع مكان التسمية randompost ولعرض اخر المواضيع ضع مكانها recentpost





عصام ويب




    صاحب مدونة هلا تك التي تهتم بكل ما هو جديد على منصة بلوجر من أضافات و قوالب و شروحاتهم

    إرسال تعليق

    ✩ تساعدنا ملاحظاتك في تطوير مدونتنا وتكون من خلال مشاركة أفكارك واقتراحاتك معنا.
    رأيك يهمنا، لذا يرجى مشاركته معنا. يمنع إضافة روابط لأي موقع في التعليقات و شكرا لتفهمك .

    مواضيع مهمة

    ملفات تعريف الأرتباط
    يستخدم موقعنا ملفات تعريف الارتباط Cookies لتحسين تجربتك أثناء تصفحك لموقعنا .
    إقرأ المزيد
    هنـاك مشكـلة !
    يبدو أن هناك خطأ ما في اتصالك بالإنترنت. يرجى الاتصال بالإنترنت وبدء التصفح مرة أخرى.
    تـم الكشــف عن مانــع أعلانــات !
    المعذرة ! لقد إكتشفنا أنك قمت بتنشيط Ad-Blocker يرجى النظر في دعمنا من خلال تعطيل Ad-Blocker الخاص بك فهو يساعدنا في تطوير هذا الموقع . . . وشكرا لتفهمك !
    Site is Blocked
    Sorry! This site is not available in your country.