Blogger için son konuları gösteren slider eklentisi flexslider
Blogger için son konuları gösteren slider eklentisi olan flexslider ile sidebarda ister kategori içerisinden isterseniz de tüm son konuları gösterebilirsiniz.
Bu makalemde blogger üzerinde yayınladığınız son makalelerinizi JSON Feed kullanarak widget desteği ile slider içerisinde gösterebilmenizi sağlayan eklentiyi anlatacağım.
FlexSlider, woothemes tarafından ücretsiz olarak sunulan bir slider sistemi. Bu sistemin özelliklerine bir göz atalım.
- Yazar Avatarı Gösterebilme
- İki farklı slider içerisinde son yazıları gösterebilme
- Belirli bir kategori yada etiket içerisindeki yazıları gösterebilme
- İki farklı animasyon desteği
- Yorum sayısı gösterebilme
- Tarih gösterebilme
- Thumbnail gösterebilme
- Thumbnail çözünürlüğünü değiştirebilme
- Üçüncü parti resim ve youtube video thumbnail desteği
- İçerik başlık uzunluğu ayarı
Blogger hesabımıza giriş yapıyoruz. Şablon ve ardından HTML’yi düzenle tıklıyoruz.
Kodlar içerisinde <head> kodunun hemen altına aşağıdaki kodları ekliyoruz
Eklemeniz gereken kodlar:
<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 href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/> <link href='https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/flexslider.min.css' rel='stylesheet' type='text/css'/> <script src='https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.1/jquery.flexslider.min.js' type='text/javascript'></script>
[mks_highlight color=”#ededed”] Not : Eğer daha önceden bloğunuza fontawesome,oswald ve jquery kodlarını eklemişseniz bu kodları yeniden eklemeyin.[/mks_highlight]
Yine aynı template içerisinde bu kez ]]></b:skin> kodunu aratıp buluyoruz. Ve hemen üzerine aşağıdaki kodları ekliyoruz ve kaydediyoruz.
/*######### son konular slider stili #############*/ .mbtslides-title{font-family:oswald; font-weight:normal;font-size:18px!important; border-bottom:2px solid rgb(144, 241, 40); color:#242729; width:300px;}.flexslider{ width:300px; margin:0px; border:0;} .flexslider .slides {list-style-type:none; margin:0px auto 10px auto;padding:0px;} .flexslider li {color:#666; font-family:helvetica; font-size:12px; overflow:hidden; position:relative; padding-top: 10px; line-height: 1.6em;} .flexslider .flex-control-nav{list-style:none outside none;position:absolute;top:-45px;right:5px;text-align:right;height:10px} .flexslider .flex-control-nav li{display:inline-block;margin:0 2px} .flexslider .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} .flexslider .flex-control-nav a.flex-active{background-color:rgb(132, 219, 6);border:1px solid rgb(144, 241, 40)} .flexslider .flex-div{margin:0px auto 20px auto; display:block; border-bottom:1px solid #eee; padding-bottom:20px!important; position:relative;} .flexslider li a { color:#0080ff; text-decoration:none; } .flexslider i{color:#999; padding-right:5px; } .flexslider .iline{line-height:2em; margin-top:3px;} .flexslider .icontent{line-height:1.5em; margin-top:5px;} .flexslider div span{margin:0 5px 0 0; display:inline-block;font-weight: normal; } .flexslider .mbttitle {font-family:oswald; font-size:13px; color:#666; font-weight:normal; text-decoration:none;} .flexslider .mbttitle:hover, .flexslider .itotal a:hover {color:#333; text-decoration:none;} .flexslider .iedit a{text-decoration:none; color:#999; cursor:pointer} .flexslider .iedit:before, .flexslider .iauthor:before, .flexslider .itag:before, .flexslider .icomments:before, .flexslider .idate:before, .flexslider .itotal span:before{font-family:fontAwesome; position:relative; padding-right:8px; color:#999;} .flexslider .iauthorpic{width: 17px!important;height: 17px!important;border-radius: 50%; float: none; display: inline-block!important; margin:0px 0px 0px 0px; padding-right:3px; position:relative; top:3px;} .flexslider .iFeatured{overflow:hidden;position:relative;float:left;margin:0 5px 10px 0;padding:0;} .flexslider .iFeatured a {background: none; padding:0px; display: block;border:1px solid #eee;} .flexslider .iFeatured img{width:110px!important;height:65px!important;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s; border-radius: 2px;} .flexslider .iFeatured:hover img{ opacity:1; -moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4)} .flexslider .icomments a{color:#0080ff; font-family: arial;font-size:12px;} .flexslider .icomments a:hover{text-decoration:underline} .flexslider .icomments:before {content:'\f086'; padding:0px 3px 0px 7px; color:#84DB06;} .flexslider .idate {position: absolute;left: 0px;top: -7px; background: rgb(132, 219, 6);color: #fff;padding: 3px 4px;font-family: oswald;font-size: 11px;border: 1px solid rgb(144, 241, 40);} .flexslider .idate div{width:18px; line-height:1.6em; text-align:center;} .flexslider .idate:after {content: ' ';position: absolute;z-index:-9999px;width: 0;height: 0;left: 25px;top: -1px;border-width: 4px 6px;border-style: solid;border-color: transparent transparent rgb(125, 208, 4) rgb(125, 208, 4);}
Slider varsayılan olarak yeşil bir renk paletine sahip. Bu renkler üzerinde değişiklik yapmak isterseniz üstteki kodların son satırında yer alan rgb(125, 208, 4) ve rgb(125, 208, 4) renk kodlarını dilediğiniz renkler ile değiştirebilirsiniz. İstediğiniz renk paletini oluşturmak için Renk Kodu Oluşturucu ‘yu kullanabilirsiniz.
İşlemlerinizi bitirdikten sonra dosyayı kaydedelim.
Flexslider için widget oluşturma kısmına geçebiliriz. Bunun için Yerleşim menüsüne tıklıyoruz. Karşımıza şablon yerleşimi geldiğinde, flexslider göstermek istediğimiz kısım için Gadget Ekle tıklıyoruz. Gadget seçeneklerinden HTML/Javascript seçiyoruz .Başlık kısmını boş bırakıp içeriğine aşağıdaki kodları ekleyip kaydediyoruz.
<style>.flexslider .flex-div-v{margin:10px auto 20px auto; display:block; border-bottom:1px solid #eee; padding-bottom:20px!important; position:relative;}</style> <script type="text/javascript"> $(window).load(function() { $('.mbt-v').flexslider({ animation: "slide", directionNav: false, touch: true, direction: "vertical", slideshowSpeed: 2500, pauseOnHover: true, animationSpeed: 700, }); }); </script> <h2 class="mbtslides-title">Son Konular</h2> <div class="flexslider mbt-v"> <ul class="slides"> <script type="text/javascript"> //################### Defaults var ListBlogLink = "http://mybloggertricks.com"; var ListCount = 6; var ListLabel = "Google"; var ChrCount = 45; var TitleCount = 66; var ImageSize = 150; //################### Function Start function mbtsliderV(json) { for (var i = 0; i < ListCount; 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; //################### Content Check ListConten = json.feed.entry[i].content.$t; ListContent= ListConten.replace(/(<([^>]+)>)/ig,"").substring(0, ChrCount); //################### Date Format ListMonth= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; 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 // YouTube scan 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].media$thumbnail) { thumbUrl = json.feed.entry[i].media$thumbnail.url; sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/"); ListImage= "'" + sk.replace("?imgmax=800","") + "'"; } 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://4.bp.blogspot.com/-HALLtgFeep0/VfryhQ0C5oI/AAAAAAAAPcY/77mSGND4q84/s200/Icon.png'"; } //################### Printing List var listing = "<div class='flex-div-v'><div class='iFeatured'><a href=" + ListUrl+ "><img src=" +ListImage+ "/></a></div><a class='mbttitle' href=" +ListUrl+ "target='_blank'>" +ListTitle+ "</a><div class='iline'><span class='iauthor'><img class='iauthorpic' src='"+AuthorPic+"'/>" +ListAuthor+ "</span><span class='icomments'>" +ListComments + "</span> <span class='idate'><div>" + D + "</div><div> " + M + "</div></span></div></div>"; if (i == 0) document.write('<li>'); if (i < ListCount/2) document.write(listing); if (i == ListCount/2) document.write('</li><li>'); if (i >= ListCount/2) document.write(listing); if (i == ListCount) document.write('</li>'); } } <!-- #### Invoking the Callback Function #### --> document.write("<script src='"+ListBlogLink+"/feeds/posts/default/-/"+ListLabel+"?alt=json-in-script&callback=mbtsliderV'></"+"script>"); </script> </ul></div>
Üstteki kodlar içerisinde Flexslider kişiselleştirebilmeniz için bazı parametler bulunuyor. Aşağıda bu parametreleri ve anlamlarını bulabilirsiniz. Dilediğiniz şekilde ayarlayabilirsiniz.
- Animation : Animasyon tipi seçin (fade yada slide)
- SlideshowSpeed : Slider hızı (milisaniye cinsinden)
- AnimationSpeed : Animasyon hızı (milisaniye cinsinden)
- pauseOnHover : Fare imleci içerik üzerindeyken animasyonun durmasını sağlar
- Kodlar içerisindeki Yeni Makaleler yazan kısım widget başlığıdır. Bu kısmı değiştirebilirsiniz.
- Listbloglink : http://siteismi.com (blog adresinizi yazın)
- List count : 6 ( Bu kısım listelenecek makale sayısını gösterir )
- ListLabel : “Seo” ( Bu kısım hangi etikete ait konuların listeleneceğini gösterir )
- TitleCount : 66 ( Makale Başlık Uzunluğu )
- Imagesize : 150 ( Makale resmi thumbnail boyutu )
NOT : Eğer belirli bir kategori yada etiketteki içerikleri değilde tüm son içerikleri göstermek isterseniz üst kodlar içerisindeki son bloğu aşağıdaki kodlar ile değiştirin.
<!-- #### Invoking the Callback Function #### --> document.write("<script src='"+ListBlogLink+"/feeds/posts/default/?alt=json-in-script&callback=mbtslider'></"+"script>"); </script> </ul></div>
Son olarak dosyayı kaydedin ve işlemi tamamlamış olalım. Aşağıdaki şekilde bir slider elde etmiş olacağız.