Membuat Label Vertikal dengan Gambar Thubnail per kategori Blogger

Membuat Label Vertikal dengan Gambar Thubnail Blogger Per kategori

Dalam Membuat Label dengan gambar merupakan suatu nilai plus untuk Blog karena tampilan lebih menarik atau membuat para pengunjung ingin melihat posting lainya apa bila gambar dan yang anda postikan menarik dan gambar juga keren pasti pengunjung mengeklik atau mengunjungi postingan anda yang postikan dengan label tersebut, Tidak Hanya Itu
Dengan Membuat Sebuah Label dengan Gambar dan Menarik, juga dapat meningkatkan traffik blog anda.
Dalam Membuat Label di blog google atau blogspot.com juga menyediakan tapi tampilan hanya dengan tulisan saja.
Pada Posting kali ini akan membuat label dengan Gambar, jadi bedanya dengan yang disediakan blogger hanya pada gambar, jika di blogger tidak ada gambar.

Dengan adanya label yang kita pilih atau per kategori dapat tampilan blog kita sesuka hati atau bisa dibilang, ingin menampilkan kategori ini saja, karena artikel ini mungkin bagus pasti pengunjung ingin melihat detailnya. dengan begitu jika pasti akan meningkatkan traffik karena artikel yang kita pilih menarik dan jika orang mengunjungi blog kita kita mempunyai label dengan gambar dan menampilkan artikel yang menarik ditampilkan di atas postingan atau dibawah, kemungkinan besar pengunjung akan melihat artikel tersebut

untuk langkah langkah dalam pembuatan tersebut sebagai berikut :

Sebelum Membuat sebuah label dengan gambar per kategori
langkah pertama kita buat CSS terlebih dahulu,

Belum Tahu CSS, silahkan anda klik pada kategori CSS di Blog ini
atau klik disini.

berikut CSS label gambar per kategori :

img.label_thumb{padding:2px;border:1px solid #e8e8e8;transition:all 0.15s ease-in-out 0s;position:absolute;top:0;left:0;float:left;height:46px;width:56px;opacity:10;}img.label_thumb:hover{background:#FFD62C;border:1px solid #FFD62C;}.label_with_thumbs{float:left;width:100%;min-height:60px;margin:0;padding:0;}ul.label_with_thumbs li{padding:0 0 3px 68px;position:relative;min-height:53px;margin:0 0 6px 0;border-bottom:1px dotted #e2e2e2;}ul.label_with_thumbs li:last-child{border-bottom:none;}.label_with_thumbs li{list-style:none;font-size:11px;color:#999;}.label_with_thumbs .title-label a{float:left;display:inline-block;font-weight:bold;font-size:13px;margin:0 0 3px;padding:0;color:#555;width:100%;}.label_with_thumbs a:hover{color:#0099cc;}.label_with_thumbs strong{padding-left:0px;}a.comment-label{font-size:11px;color:#999;}a.more-label{font-size:11px;color:#999;}

Letakan kode CSS diatas tepat diatas ]]></b:skin>

 untuk blogger kode ]]></b:skin> bisa anda  buka pada pengaturan Dasbor :

1. Login Blog Anda
2. Pilih menu Tema klik edit HTML
3. untuk mempercepat pencarian kode tersebut klik CTRL+F paste "]]></b:skin>"

Langkah ke 2 :
kita buat Javascript,
dimana Javascript berfungsi memanggil data yang akan kita tampilkan pada blog kita, contoh disini adalah data Artikel Blog.
Untuk Javascript label feed sebagai berikut :

<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/AVvXsEjkBWi5Hqcp0NYl042ERNkQN1PMMvCEO5yUAOYZ4CEIK12iBTfTmAcVB8f5pusCyVS_TAs3FVtg8zI_wbS1PmfSF-zdESJMnK9j1mapOOnFmLcS0SMo1fS4Tey09U2xSToYK3JVfPRfFWU/s1600/picture_not_available.png';}
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]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'" alt="'+posttitle+'" title="'+posttitle+'"/></a>');document.write('<div class="title-label"><a href="'+posturl+'" target ="_top">'+posttitle+'</a></div>');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 class="comment-label" href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a class="more-label" href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

Copy Paste Javascript diatas letakan diatas kode </head>
 langkah 1 dan 2 sudah lalu Simpan atau Save,

Langkah selanjutkan kita akan menampilkan dari Javascript dan CSS yang kita buat tadi.
Berikut langkah langkah menampilkan Label Feed dengan Gambar :

1. Login Blogger
2. Pilih Menu Layout atau Tata Letak
3. Tambah Widget HTML --> letakan Label Feed sesukan Anda
4. Paste Sorce Code dibawah ini :

<script type="text/javascript">var numposts = 4;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = true;var showpostdate = true;var showpostsummary = false;var numchars = 100;</script>
<script type="text/javascript" src="URLBlogAnda/feeds/posts/default/-/Label Anda?published&amp;alt=json-in-script&amp;callback=labelthumbs"></script>

Keterangan  :

untuk var numposts = 4; merupakan jumlah post artikel yang ingin anda tampilkan.

Selesai,

Selamat Mencoba,,

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: