Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Widget Postingan Berdasarkan Label With Thumbnail

Cara Membuat Widget Postingan Berdasarkan Label With Thumbnail


Cara Membuat Widget Postingan Berdasarkan Label With Thumbnail - Adanya widget pada sebuah blog dapat membantu meminimalkan tampilan pada blog  dan memudahkan pencarian artikel.

Selain itu widget juga sangat berperan penting bagi anda yang berniat untuk mendaftarkan blog ke Google Andsense.
Ada yang berpendapat bahwa saat mendaftarkan blog ke Google Adsense, blog harus mempunyai widget seperti, Popular Post, Archive, Kategori, Recent Post, termasuk widget yang akan kita bahas disini, yaitu widget postingan terbaru bersasarkan label.

Salah satu fungsi widget ini untuk memudahkan pengunjung dalam mencari subuah artikel atau berita yang di inginkan, widget ini juga berguna untuk meminimaliskan atau meringkas ruang pada template.

Bagi anda yang berminat untuk memasang widget ini silakan simak langkah-langkah nya dibawah ini.


Cara Membuat Widget Postingan Berdasarkan Label With Thumbnail


1. Login ke Bloger dengan akun anda
2. Pilih Tata Letak ---> Tambah Gadget ---> HTML/JavaScript.
3. Copy kode berikut ini pada HTML/JavaScript.

<style>
img.recent_thumb {padding:1px;width:70px;height:auto;border:0; float:left;margin:0 10px 5px 1px;}.recent_posts_with_thumbs {float: right;width: 100%;min-height: 72px;margin: 5px 10px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:72px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;} </style>
<script>
function showrecentpostswiththumbs(json) {document.write('<ul class="recent_posts_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='http://lh4.ggpht.com/_IjrRiI_bVb0/TOCYn1fMjII/AAAAAAAAF24/5Fvv-HJqh74/loading-2.gif';
}
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] = "Jun";monthnames[7] = "Jul";monthnames[8] = "Aug";monthnames[9] = "Sep";monthnames[10] = "Oct";monthnames[11] = "Nov";monthnames[12] = "Dec";document.write('<li class="clearfix">');
if(showpostthumbnails==true)
document.write('<img class="recent_thumb" src="'+thumburl+'"/>');
document.write('<b><a href="'+posturl+'" target ="_top">'+posttitle+'</a></b><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('<i>');
document.write(postcontent);
document.write('</i>');}
else {
document.write('<i>');
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...');
document.write('</i>');}
}

var towrite='';var flag=0;
document.write('<br><strong>');

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">Read more&#187;&#187;</a>';
flag=1;
;
}
document.write(towrite);
document.write('</strong></li>');
if(displayseparator==false)
if (i!=(numposts-1))
document.write('<hr color="#d9f1fa" size=0.5>');
}document.write('</ul>');

}
</script>
<script>
var numposts = 6;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;
</script><script src="/feeds/posts/default/-/Artikel?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs">
</script><div class="clear"/></div>

Keterangan : Perhatikan Warna Font
Merah : Ganti dengan nama label yang akan ditampilkan
Hijau : Mengatur Size Thumbnail
Biru : Mengatur Jumlah Tampilan Post
Kuning : Mengatur Jumlah karakter yang muncul di cuplikan post

4. Klik Simpan


Nah itu dia cara membuat Widget Postingan Berdasarkan Label alis Artikel per kategori
Jika ada kesulitan silakan tanyakan di kolom komentar...!!!

12 komentar untuk "Cara Membuat Widget Postingan Berdasarkan Label With Thumbnail "

  1. Balasan
    1. sory ka, kemaren ganti tampilan area code HTML jadi warna nya kehapus, silakan sekarang sudah di update

      Hapus
  2. Makasih tutorialnya sudah berhasil, tapi biar widgetnya ga ngikut kebawah pas kita scroll ke bawah gimana caranya?

    BalasHapus
    Balasan
    1. di template kamu kayanya ada code widget stinky coba di hapus code nya

      Hapus
  3. Terimakasih gan, sangat membantu sekali bagi saya yang masih awam ini, semoga bermanfaat

    BalasHapus
  4. bagus banget hasilnya mksi ya kak

    BalasHapus
  5. TERIMA KASIH, KEREN, SUDAH SAYA TERAPKAN DI BLOG SAYA

    BalasHapus
  6. Cara konfigurasi ukuran gambar tumbnailmya gimana gan?

    BalasHapus
  7. Gak jadi gan, udah selesai. Kalo gitu cara setting fontnya gimana? Seperti ukuran fontnya? Jenis fontnya? Soalnya di blog ane ukuranya kurang besar, trus kenapa font nya kayak miring giman gitu. Rasanya kurang pas kalau gak padu ama templatenya

    BalasHapus