Etiket Kategorinizi Küçük Resimlerle Sergileyin (Popüler Yayınlar Stili)

Etiketler yayınlarınızın kolayca kategorilere ayrılmasını sağlayan bir yoldur. Bu eklenti sayesinde Blogger etiket kategorilerinizi Küçük Resimler ile istediginiz etiketi sidebarınızda ayrıntılı bir şekilde sergileyebileceksiniz. Eklenti sizin kendi belirlediğiniz bir etiket adıyla popüler yayınlar Stili dizaynıyla gösterir. Etiket sayısını, resim boyutlarını vb. kendiniz ayarlayabildiğiniz bir eklenti. Göze hoş ve güzel gelen bir etiket eklentisi. Okuyucular, örneğin Sosyal Medya üzerine olan tüm yayınlarınızı tek seferde sidebarınızda görüntüleyebilir. Farklı yaratıcı kullanımları denemekten çekinmeyin!

Demo - Resimlerle Araçlar Etiketi

Blogger Kontrol Paneli ► Şablon ►HTML'yi Düzenle tıklıyoruz.
CTRL+F tuşuna basıp ]]></b:skin> kodunu buluyoruz ve aşağıdaki kodları hemen üstüne kopyalayıp yapıştırıyoruz.

img.label_thumb{float:left;margin-right:10px!important;height:65px;width:65px;border:1px solid #5e6367;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.4);-moz-box-shadow:0 1px 1px rgba(0,0,0,.4);}
ul.label_with_thumbs li{min-height:65px;margin-bottom:0;border-bottom: 1px solid #5e6367;padding:8px 0;}
.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 10px 2px 0;padding:0;}
.label_with_thumbs li{list-style:none;color:#888;font:11px georgia, Arial, Helvetica;padding-left:0!important;}
.label_with_thumbs a{text-decoration:none;font:12px Oswald, georgia, Arial;font-weight: 400;}
.label_with_thumbs strong{padding-left:0;}

Tekrar CTRL+F tuşuna basın ve </head> kodunu bulun aşağıdaki kodları hemen üstüne kopyalayıp yapıştırın.

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href}if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}var thumburl;try{thumburl=entry.media$thumbnail.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kR55PcuhJ2LjhNKBe5iUGby8KLwnSsQLp8ay1snnRgvggyPamQWxPdhCB2yJcOdnA9O8XxFgihJraMxCaDHf1UD_97EMB5TLib3DVjluBED_g0rZDwLulfPWBh04DrNTb7cwR78K_tQ/s1600/no-photo-available.jpeg'}var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Ocak";monthnames[2]="Şubat";monthnames[3]="Mart";monthnames[4]="Nisan";monthnames[5]="Mayıs";monthnames[6]="Haziran";monthnames[7]="Temmuz";monthnames[8]="Ağustos";monthnames[9]="Eylül";monthnames[10]="Ekim";monthnames[11]="Kasım";monthnames[12]="Aralık";document.write('<li class="clearfix">');if(showpostthumbnails==true)document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('')}else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('')}}var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1}if(showcommentnum==true){if(flag==1){towrite=towrite+' | '}if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1}if(displaymore==true){if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">Devamını Oku »</a>';flag=1}document.write(towrite);document.write('</li>');if(displayseparator==true)if(i!=(numposts-1))document.write('')}document.write('</ul>')}
//]]>
</script>

Şablonu Kaydet diyoruz ve Blogger Paneline giriyoruz oradan Yerleşim sonra eklentiyi görmek istedigimiz yere Gatget ekle sonra HTML/JavaScript'i buluyoruz. Sonra aşağıdaki kodları istediğiniz şekilde özelleştirerek içine kopyalayıp yapıştırın.

<script type='text/javascript'>
var numposts = 8;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;
</script> 
<script type="text/javascript" src="/feeds/posts/default/-/Etiket Adı?published&alt=json-in-script&callback=labelthumbs">
</script>

Özelleştirme

Kırmızı renkle işaretlediğim Etiket Adı bölümüne istediğiniz Label/Etiketinizi yazın.

var numposts ← Etiket adeti kaç tane olmasını istiyorsak ayarlıyoruz.

var showpostthumbnails ← Resimleri göster/gösterme, true/false

var displaymore ← Devamını Oku göster/gösterme, true/false

var displayseparator ← ekran ayırıcı göster/gösterme, true/false

var showcommentnum ← Yorum sayısını göster/gösterme, true/false

var showpostdate ← Tarih göster/gösterme, true/false

var showpostsummary ← Yazı özetini göster/gösterme, true/false

var numchars ← Resim boyutlarını ayarlamak için bir boyut seçiyoruz.

Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...