Cara memasang Widget Label dengan Thumbnails di Blogspot. Ada banyak tutorial cara pasang Widget label dengan Thumbnail di internet, tapi setelah di aplikasikan di blog, widget tidak muncul. Hal seperti ini sungguh menjengkelkan. Untungnya setelah susah payah mencari artikel degan judul yang sama tapi relevan dan dapat diaplikasikan di blogspot dengan baik, akhirnya saya menemukan artikel ini. Setelah saya aplikasikan di blog, widget benar-benar keluar dan terlihat sangat bagus dan layak untuk di pajang di sana.
Cara memasang Widget label dengan Thumbnails yang baik ini di bagikan oleh Nitin Maheta dalam blognya Blogger Widget Generators. Cara memasangnya sangat sederhana. Siapapun yang paham cara edit template di Blogspot pasti bisa. Untuk lebih jelasnya, sebenarnya saya lebih menyarankan kalau anda pergi berkunjung ke situsnya langsung di http://www.bloggerwidgetgenerators.com/2014/07/show-recent-posts-with-thumbnails-for-particular-label-blogger.html. Tapi jika anda tidak begitu paham dengan bahasa inggris, saya akan membaginya dalam konteks bahasa Indonesia .
Adapaun cara pasang Widget Label dengan Thumbnails tersebut adalah sebagai berikut.
1. Login ke www.blogspot.com
2. Pilih Blog yang akan di pasangi Widget
3. Pergi ke Template => Edit HTML
4. Arahkah cursor kehalaman HTML lalu tekan CTRL+F. Setelah muncul kota pencarian, ketikkan ]]></b:skin> di dalamnya, lalu tekan enter
5. Copy Kode berikut ini lalu Paste kan tepat diatas tag: ]]></b:skin>
2. Pilih Blog yang akan di pasangi Widget
3. Pergi ke Template => Edit HTML
4. Arahkah cursor kehalaman HTML lalu tekan CTRL+F. Setelah muncul kota pencarian, ketikkan ]]></b:skin> di dalamnya, lalu tekan enter
5. Copy Kode berikut ini lalu Paste kan tepat diatas tag: ]]></b:skin>
| /* Recent posts by labels --------------------------------- */ img.label_thumb{ float:left; margin-right:10px !important; height:65px; /* Thumbnail height */ width:65px; /* Thumbnail width */ border: 1px solid #fff; -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); box-shadow: 0 1px 1px rgba(0, 0, 0, .4); } #label_with_thumbs { float: left; width: 100%; min-height: 70px; margin: 0px 10px 2px 0px; padding: 0; } ul#label_with_thumbs li { padding:8px 0; min-height:65px; margin-bottom:0px; border-bottom: 1px dotted #999999; } #label_with_thumbs li{ list-style: none ; padding-left:0px !important; } #label_with_thumbs a { text-transform: uppercase;} #label_with_thumbs strong {padding-left:0px; } |
6. Selanjutnya cari tag: </head> lalu copy kode berikut ini dan paste kan di atas tag </head>
=>| <script type='text/javascript'> //<![CDATA[ function labelthumbs(json){document.write('<ul id="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/AVvXsEhvpcdA47fBhS-JLsC8xzn7XsO94CgLO5Azl3cMw70xgugF3M2_OPJO7kAr8IcI3VvWboAyznvf-TXs6wLeaZye7gwP05q0ev3qeU-eOWYvYgwvBwpYOc00HlmwZH37f7GtlEFuG1Lnhzw/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+'"/></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">More »</a>';flag=1;;} document.write(towrite);document.write('</li>');if(displayseparator==true) if(i!=(numposts-1)) document.write('');}document.write('</ul>');} //]]> </script> |~
7. Berikutnya cari tag: </body>, lalu copy kode berikut ini dan paste kan di atas tag </body> tersebut.
| <script type='text/javascript'> function changeThumbSize(id,size){ var blogGadget = document.getElementById(id); var replacement = blogGadget.innerHTML; blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c"); var thumbnails = blogGadget.getElementsByTagName("img"); for(var i=0;i<thumbnails.length;i++){ thumbnails[i].width = size; thumbnails[i].height = size; } } changeThumbSize("label_with_thumbs",210); </script> |
8. Klik save/simpan
9. Kemudian pergi ke Layout => Add Widget => HTML/JavaScript lalu COPAS kode berikut ini kedalamnya (jangan lupa mengganti nama label dengan label yang anda inginkan)
| <script type='text/javascript'> var numposts = 3; var showpostthumbnails = true; var displaymore = false; var displayseparator = true; var showcommentnum = false; var showpostdate = false; var showpostsummary = true; var numchars = 100; </script> <script type="text/javascript" src="/feeds/posts/default/-/Name-of-the-label?published&alt=json-in-script&callback=labelthumbs"></script> |
10. Klik Save/ Simpan.
Silahkan di cek hasilnya... Semoga berhasil!!
