Blogger Slayt Halinde Rastgele Yazılar

Blogger Slayt Halinde Rastgele Yazılar
Birçok blog/sitede bulunan,ilgi çekici slayt eklentisini sizinle paylaşmak istedik.Özellikleri:


Yorum Sayısı,
Yazar Resmi,
Yazar Adı,
Yayınlanma tarihi,
Etiketler,
Özel Küçük Resim,
Third Party Küçük Resim Desterkler,
YouTube Küçük Resim Destekler,
Düzenlenilebilir Başlık,
Mobil uyumlu
Kurulum:

1.Blogger > Şablon yolunu takip edin.
2.Şablonunuzu yedekleyin.
3.<head> etiketinden sonra aşağıdaki kodları ekleyin:
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script> 
<link href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet"></link> 
<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css"></link> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/flexslider.min.css" rel="stylesheet" type="text/css"></link> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/jquery.flexslider.min.js" type="text/javascript"></script>
4.Ardından ]]></b:skin> kodunu aratın ve üstüne aşağıdaki kodları ekleyin:
        /*######### Random Posts By Siber Yol #############*/ 
.mbt-random{margin:0 5px;border:0;width:100%;overflow:hidden} 
.mbt-random .slides{list-style-type:none;margin:0 auto;padding:0} 
.mbt-random li{color:#fff;font-family:helvetica;font-size:12px;overflow:hidden;padding-top:10px} 
.mbt-random .flex-control-nav li{display:inline-block;margin:0 2px} 
.mbt-random .flex-control-nav a{text-indent:9999px;display:block;width:10px;cursor:pointer;height:10px;background-color:#000;border:1px solid #000;border-radius:0!important} 
.flex-direction-nav .flex-prev{left:-50px} 
.flex-direction-nav .flex-next{right:-50px;text-align:right} 
.mbt-random .flex-control-paging{display:none} 
.flex-direction-nav{position:relative;top:-250px} 
.mbt-random .flex-control-nav a.flex-active{background-color:#84db06;border:1px solid #90f128} 
.mbt-random .flex-div{margin:0 auto;display:block;padding:0!important;position:relative;height:370px} 
.mbt-random li a{color:#0080ff;text-decoration:none} 
.mbt-random i{color:#999;padding-right:5px} 
.mbt-random .iline{line-height:2em;margin:0;position:relative;top:-90px;background:#56adff;padding:3px 10px;display:inline-block} 
.mbt-random .icontent{line-height:1.5em;margin-top:5px} 
.mbt-random div span{margin:0 5px 0 0;display:inline-block;font-weight:400} 
.mbt-random .mbttitle{font-family:oswald;font-size:20px;color:#fff;font-weight:400;text-decoration:none;position:relative;top:-90px;background:#66b5ff;padding:15px 10px;display:block} 
.mbt-random .mbttitle:hover,.mbt-random .itotal a:hover{color:#fff;text-decoration:none} 
.mbt-random .iedit a{text-decoration:none;color:#999;cursor:pointer} 
.mbt-random .iedit:before,.mbt-random .iauthor:before,.mbt-random .itag:before,.mbt-random .icomments:before,.mbt-random .idate:before,.mbt-random .itotal span:before{font-family:fontAwesome;position:relative;padding-right:8px;color:#fff} 
.mbt-random .iauthorpic{width:17px!important;height:17px!important;border-radius:50%;float:none;display:inline-block!important;margin:0;padding-right:3px;position:relative;top:3px} 
.mbt-random .iFeatured{overflow:hidden;position:relative;margin:0;padding:0;width:100%} 
.mbt-random .iFeatured a{background:none;padding:0;display:block;border:0px solid #eee;margin:0 -1px} 
.mbt-random .iFeatured img{height:305px!important;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;border-radius:0;margin:0;padding:0;opacity:.7} 
.mbt-random .iFeatured:hover img{opacity:1;-moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4)} 
.mbt-random .icomments a, .mbt-random .itag a{color:#0080ce;font-family:arial;font-size:12px} 
.mbt-random .icomments a:hover, .mbt-random .itag a:hover{text-decoration:underline} 
.mbt-random .itag:before{content:'\f02c';padding:0 3px 0 7px;color:#fff} 
.mbt-random .icomments:before{content:'\f086';padding:0 3px 0 7px;color:#fff} 
.mbt-random .idate{color:#fff;padding:3px 4px;font-family:arial;font-size:11px} 
.mbt-random .idate:before{content:'\f073';padding:0 5px;color:#fff}
Mavi arkaplanı değiştirmek için: #66b5ff
Açık mavi yazar adını değiştirmek için: #56adff
Beyaz yazı başlığını değiştrimek için: #fff
Yorum ve etiket değerlerinin rengini değiştrimek için: #0080ce
      5.Son olarak HTML/JavaScript eklentisi ekleyin ve bunu içine yapıştırın:
             <script type="text/javascript"> 
      //################### Defaults 
      var ListBlogLink = "Buraya blog linki"; 
      var ListCount = 4;  
      var TitleCount = 66; 
      var ImageSize = 800;
      $(window).load(function() { 
        $('.mbt-random').flexslider({ 
         animation: "slide", 
          itemWidth: 600, 
      itemMargin: 25, 
        directionNav: true, 
             touch: true, 
             slideshowSpeed: 2500, 
            pauseOnHover: true, 
           animationSpeed: 700, 
        }); 
      });
      var RandomArray = []; 
      var TotalPosts  = 0; 
      var RandomArray = new Array(ListCount); 
      function TotalCount(json) { 
          TotalPosts   = json.feed.openSearch$totalResults.$t 
      } 
      document.write('<script type=\"text/javascript\" src=\"'+ListBlogLink+'/feeds/posts/default?alt=json-in-script&callback=TotalCount\"><\/script>');
      function GenerateNum() { 
          for (var i = 0; i < ListCount ; i++) { 
          for (var j = 0; j < RandomArray.length; j++){ 
          var RandomNum = Math.floor(Math.random() * (TotalPosts ) + 1); 
          RandomArray[i] = RandomNum; } 
                                                                        } 
      }
      </script>
      <div class="flexslider mbt-random">
       
      <ul class="slides"> 
      <script type="text/javascript"> 
      //################### Function Start 
      function mbtrand(json) { 
      for (var i = 0; i < json.feed.entry.length; i++) 
      {  
      //################### Variables Declared 
      var listing= ListImage = ListUrl = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListDate = ListUpdate = ListComments = thumbUrl = TotalPosts = sk = AuthorPic= ListMonth = Y = D = M = m = YY = DD = MM = mm = TT =  ""; 
      //################### Category
      if (json.feed.entry[i].category != null) 
      { 
      for (var k = 0; k < json.feed.entry[i].category.length; k++) { 
      ListTag += "<a href='"+ListBlogLink+"/search/label/"+json.feed.entry[i].category[k].term+"'>"+json.feed.entry[i].category[k].term+"</a>"; 
      if(k < json.feed.entry[i].category.length-1) 
      { ListTag += ", ";} 
      } 
      } 
      //################### URL 
      for (var j = 0; j < json.feed.entry[i].link.length; j++) { 
            if (json.feed.entry[i].link[j].rel == 'alternate') { 
              break; 
            } 
          } 
      ListUrl= "'" + json.feed.entry[i].link[j].href + "'"; 
      //################### Info 
      TotalPosts = json.feed.openSearch$totalResults.$t; 
      if (json.feed.entry[i].title!= null) 
      { 
      ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount); 
      } 
      if (json.feed.entry[i].thr$total) 
      { 
      ListComments= "<a href='"+json.feed.entry[i].link[j].href+"#comment-form'>"+json.feed.entry[i].thr$total.$t+"</a>"; 
      } 
      ListAuthor= json.feed.entry[i].author[0].name.$t.split(" "); 
      ListAuthor=ListAuthor.slice(0, 1).join(" "); 
      AuthorPic = json.feed.entry[i].author[0].gd$image.src; 
      //################### Date Format 
      ListMonth= ["Oca", "Şub", "Mar", "Nis", "May", "Haz", "Tem", "Ağu", "Eyl", "Eki", "Kas", "Ara"]; 
      ListDate= json.feed.entry[i].published.$t.substring(0,10); 
                               Y = ListDate.substring(0, 4); 
                              m = ListDate.substring(5, 7); 
                               D = ListDate.substring(8, 10); 
                               M = ListMonth[parseInt(m - 1)];                       
      ListUpdate= json.feed.entry[i].updated.$t.substring(0, 16); 
                               YY = ListUpdate.substring(0, 4); 
                              mm = ListUpdate.substring(5, 7); 
                               DD = ListUpdate.substring(8, 10); 
                               TT = ListUpdate.substring(11, 16); 
                               MM = ListMonth[parseInt(mm - 1)];   
      //################### Thumbnail Check
      if (json.feed.entry[i].media$thumbnail) 
      { 
      thumbUrl = json.feed.entry[i].media$thumbnail.url; 
      sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/"); 
      ListImage= "'" + sk.replace("?imgmax=800","") + "'"; 
      }
      // YouTube scan 
      else if (json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/) != null) 
      { 
          var youtube_id = json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop(); 
          
          if (youtube_id.length == 11) { 
              var ListImage = "'//img.youtube.com/vi/"+youtube_id+"/0.jpg'"; 
              } 
      }
      else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null) 
      { 
      // Support For 3rd Party Images 
      ListImage =  json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1]; 
      } 
      else 
      { 
      ListImage= "'http://i.hizliresim.com/o0o5Z9.png'"; 
      } 
      //###################  Printing List 
      var listing = "
      <li><div class='flex-div'>
      <div class='iFeatured'>
      <a  href=" 
      + ListUrl+ 
        "><img src=" 
      +ListImage+ 
      "/></a></div>
      <div class='iline'>
      <span class='iauthor'><img class='iauthorpic' src='"+AuthorPic+"'/>" 
      +ListAuthor+ 
      "</span><span class='icomments'>" 
      +ListComments + 
      "</span> <span class='idate'>" 
      + D + 
      " " 
      + M + 
      "</span><span class='itag'>" 
      +ListTag + 
      "</span></div>
      <a class='mbttitle' href=" 
      +ListUrl+ 
      "target='_blank'>" 
      +ListTitle+ 
      "</a></div>
      </li>
      ";
      document.write(listing);
      } } 
      <!-- #### Invoking the Callback Function #### --> 
      for (var i = 0; i < ListCount ; i++) { 
      GenerateNum(); 
      var scripta = '<script type=\"text/javascript\" src=\"'+ListBlogLink+'/feeds/posts/default?alt=json-in-script&start-index='+RandomArray[i] + '&max-results=1&callback=mbtrand\"><\/script>'; 
      document.write(scripta); 
      };
      </script> 
      </ul>
      </div>
      

Kaynak : http://www.mybloggertricks.com/2016/12/create-random-post-slider-widget-for.html
blogger,rastgele yazılar,slider,blogger slider,slayt rastgele,blogger slayt halinde rastgele yazılar,blogger rastgele yazılar slider,rastgele,yazılar,slider