JavaScript is not enabled!...Please enable javascript in your browser

جافا سكريبت غير ممكن! ... الرجاء تفعيل الجافا سكريبت في متصفحك.

اكتب ما تود البحت عنه و اضغط Enter
recent
عاجل
الصفحة الرئيسية

سلايدر شو رائع جدا لمدونات البلوجر يوضع بالسيد بار




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





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




قم ابحث عن الوسم ]]></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(//3.bp.blogspot.com/-LnvazGBvKh8/VskckSkmzxI/AAAAAAAAC4s/erEgI6A_ih4/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:"http://3.bp.blogspot.com/-qnLm52EsvBE/VDkrZ46TWXI/AAAAAAAAAsM/tiJ36WiboU4/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





عصام ويب




    author-img

    maher

    تعليقات
      ليست هناك تعليقات
      إرسال تعليق
        الاسمبريد إلكترونيرسالة