Recent post Thumnail Berdasarkan Label sanggup membuat blog terorganisir dengan baik, sehingga membuat pengunjung sanggup dengan gampang menemukan topik yang mereka cari. Seperti pada ulasan sebelumnya 5 Recent Post Keren Blogger, widget tersebut menampilkan semua postingan terbaru.
Pada Recent post kali ini hanya menampilkan postingan terbaru menurut kategori, sehingga kita sanggup menampilkan postingan terbaru untuk setiap kategori dan juga menampilkan gambar untuk setiap kategori.
Nah, untuk Anda yang berkeinginan memasang widget Recent Post menurut Label, sanggup mengikuti langkah-langkahnya di bawah ini :
1. Log-in ke akun Blogger
2. Dari dasbor, pilih Template >> klik tombol HTML
3. Langkah selanjutnya, dengan memakai CTRL+F cari kode ]]></b:skin> kemudian copy arahan dibawah ini dan pastekan diatasnya :
4. Selanjutnya Anda cari arahan </head> dan copy script di bawah ini dan pastekan sebelumnya
5. Untuk membuat resolusi gambar yang lebih baik, tambahkan script di bawah ini di atas </body>
6. Sekarang simpan template.
Kode yang kita tambahkan tadi yakni CSS fungsinya untuk memper anggun tampilan widget dan script untuk membuat widget berkeja secara maksimal. Untuk langkah selanjutnya menambahkan arahan pada sidebar, berikut langkah-langkahnya :
7. Pada dasbor Blog, pilih Layout/Tata letak, kemudian klik pada tambah gadget
8. Maka akan muncul jendela pop up, pilih widget HTML/Javascript dan pastekan arahan di bawah ini pada kolom yang tersedia.
Catatan : Pada arahan yang saya beri warna merah Nama-Label, ganti dengan label ingin Anda tampilkan pada sidebar.
Pada widget ini hanya menampilan postingan gres per-label, bila Anda ingin menampilkan postingan dengan label lain silangkan ulangi cara pada nomor delapan saja. Cukup sekian dari saya, dan terima kasih.
Sumber http://www.websiteedukasi.com/
Pada Recent post kali ini hanya menampilkan postingan terbaru menurut kategori, sehingga kita sanggup menampilkan postingan terbaru untuk setiap kategori dan juga menampilkan gambar untuk setiap kategori.
Nah, untuk Anda yang berkeinginan memasang widget Recent Post menurut Label, sanggup mengikuti langkah-langkahnya di bawah ini :
Cara Memasang Recent Post
1. Log-in ke akun Blogger
2. Dari dasbor, pilih Template >> klik tombol HTML
3. Langkah selanjutnya, dengan memakai CTRL+F cari kode ]]></b:skin> kemudian copy arahan dibawah ini dan pastekan diatasnya :
/* Recent posts by label
--------------------------------- */
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;font-family: 'Oswald', sans-serif; min-height: 10px; margin: 5px 0px 5px 0px; font-size:12px;}
#label_with_thumbs strong {padding-left:0px; }
4. Selanjutnya Anda cari arahan </head> dan copy script di bawah ini dan pastekan sebelumnya
<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/AVvXsEivUgC0yn2B-z3ObKYudV6Mcas1McGHdmB57Hz9Ud9LjbXZ8RlRUm0S1fGLwGhAuhjiUFEg5N_lkPQJGNGtWIT0r61ovyQoM_qBMyG-rKdOurQfTquBzdUHKHPLOupzKGNyHwEkaJBehFw/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+'" sasaran ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" sasaran ="_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+'" sasaran ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" sasaran ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>
5. Untuk membuat resolusi gambar yang lebih baik, tambahkan script di bawah ini di atas </body>
<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 = 65px;
thumbnails[i].height = 65px;
}
}
changeThumbSize("label_with_thumbs",210);
</script>
6. Sekarang simpan template.
Kode yang kita tambahkan tadi yakni CSS fungsinya untuk memper anggun tampilan widget dan script untuk membuat widget berkeja secara maksimal. Untuk langkah selanjutnya menambahkan arahan pada sidebar, berikut langkah-langkahnya :
7. Pada dasbor Blog, pilih Layout/Tata letak, kemudian klik pada tambah gadget
8. Maka akan muncul jendela pop up, pilih widget HTML/Javascript dan pastekan arahan di bawah ini pada kolom yang tersedia.
<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/-/Nama-label?published&alt=json-in-script&callback=labelthumbs"></script>
Catatan : Pada arahan yang saya beri warna merah Nama-Label, ganti dengan label ingin Anda tampilkan pada sidebar.
Pada widget ini hanya menampilan postingan gres per-label, bila Anda ingin menampilkan postingan dengan label lain silangkan ulangi cara pada nomor delapan saja. Cukup sekian dari saya, dan terima kasih.
Sumber http://www.websiteedukasi.com/
