Memasang Widget Artikel Terbaru Plus Gambar Berdasarkan Label

Cara Memasang Widget Artikel Terbaru Plus Gambar Berdasarkan Label - Pada kesempatan kali ini saya akan membagikan tutorial blogger mengenai penambahan widget artikel terbaru disertai dengan gambar (snippet) berdasarkan label yang ada di home page. Tampilannya akan sama seperti widget artikel populer apabila opsi 'thumbnail' dan 'snippet' diaktifkan. Tujuan lain dari penerapan widget ini adalah menciptakan sebuah blog menjadi professional dan menarik untuk dipandang, serta untuk memudahkan pengunjung membaca artikel kita berdasarkan label yang tersedia.

Sebelum sobat memulai tahap pemasangannya saya harap untuk teliti dalam memasukan kode html, css, script, agar memasangnya tidak terjadi kesalahan dan back up dahulu template sobat untuk mencegah terjadinya eror.

Cara Memasang Widget Artikel Terbaru Plus Gambar Berdasarkan Label

1. Masuk ke akun blogger.

2. Pilih Template >> Edit HTML

3. Letakan kode berikut di atas ]]></b:skin> atau </style>.

#main-home{width:687px; margin-bottom:30px; overflow:hidden}
#main-left h2, #main-right h2{border-top-right-radius:4px; border-top-left-radius:4px; background:#363b40; margin:0 -15px 0 -15px; padding:15px; color:#fff; font-family:'Roboto Condensed',sans-serif; font-size:16px; font-weight:400}
#main-left{border-bottom:3px solid #ddd; border-radius:4px; background:#f9f9f9; padding:0 15px 0 15px; width:44.6%; float:left}
#main-right{border-bottom:3px solid #ddd; border-radius:4px; background:#f9f9f9; padding:0 15px 0 15px; width:44.6%; float:right}
img.label_thumb{float:left; margin-right:10px !important; margin-bottom:6px; margin-top:2px; height:65px; width:65px; border:#eee solid 4px}
.label_with_thumbs{float:left; width:100%; min-height:65px; margin:0 10px 10px 0; padding:0; line-height:1.3em}
ul.label_with_thumbs li{min-height:80px; margin:2px 0; padding:7px 0; border-bottom:1px dashed #ddd}
.label_with_thumbs li{font-size:13px; list-style:none; padding-left:0 !important}
.label_with_thumbs a{font-family:'Oswald',Calibri,sans-serif; font-size:13px; padding-bottom:2px; font-weight:normal; color:#444; line-height:1.4em; margin-bottom:9px}
.label_with_thumbs a:hover{color:#2C82B1}
.label_with_thumbs strong{padding-left:0}

4. Letakan script widget ini diatas kode </head>.

<script type='text/javascript'>
//<![CDATA[

function labelthumbs(e){document.write('<ul class="label_with_thumbs">');for(var t=0;t<numposts;t++){var n=e.feed.entry[t];var r=n.title.$t;var i;if(t==e.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if(n.link[o].rel=="replies"&&n.link[o].type=="text/html"){var u=n.link[o].title;var f=n.link[o].href}if(n.link[o].rel=="alternate"){i=n.link[o].href;break}}var l;try{l=n.media$thumbnail.url}catch(h){s=n.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!=""){l=d}else l="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRl76RnO0xi-Lt_DStZrCpuRyIdTrnOREB501CsU6WSx3b57uXx1hfdncGCKK6wbqsm_XMjQ_-dxoznU5xwptwX_v2lPhnK2DUY0GZcJ4RzcEyHcku2v8C7I3CTeuj9-FP3gNJZJkA7jk/s1600/picture_not_available.png"}var p=n.published.$t;var v=p.substring(0,4);var m=p.substring(5,7);var g=p.substring(8,10);var y=new Array;y[1]="Jan";y[2]="Feb";y[3]="Mar";y[4]="Apr";y[5]="May";y[6]="June";y[7]="July";y[8]="Aug";y[9]="Sept";y[10]="Oct";y[11]="Nov";y[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)document.write('<a href="'+i+'" target ="_top"><img class="label_thumb" src="'+l+'"/></a>');document.write('<strong><a href="'+i+'" target ="_top">'+r+"</a></strong><br>");if("content"in n){var w=n.content.$t}else if("summary"in n){var w=n.summary.$t}else var w="";var E=/<\S[^>]*>/g;w=w.replace(E,"");if(showpostsummary==true){if(w.length<numchars){document.write("");document.write(w);document.write("")}else{document.write("");w=w.substring(0,numchars);var S=w.lastIndexOf(" ");w=w.substring(0,S);document.write(w+"...");document.write("")}}var x="";var T=0;document.write("<br>");if(showpostdate==true){x=x+y[parseInt(m,10)]+"-"+g+" - "+v;T=1}if(showcommentnum==true){if(T==1){x=x+" | "}if(u=="1 Comments")u="1 Comment";if(u=="0 Comments")u="No Comments";u='<a href="'+f+'" target ="_top">'+u+"</a>";x=x+u;T=1}if(displaymore==true){if(T==1)x=x+" | ";x=x+'<a href="'+i+'" class="url" target ="_top">More »</a>';T=1}document.write(x);document.write("</li>");if(displayseparator==true)if(t!=numposts-1)document.write("")}document.write("</ul>")}

//]]>
</script>

5. Penerapan widget artikel terbaru.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='main-home'>
<b:section class='main-left' id='main-left'/>
<b:section class='main-right' id='main-right'/>
</div>
</b:if>

Keterangan!!
Untuk meletakan HTML tersebut letakan kode diatas sebelum kode </div> penutup main wrapper, atau lihat gambar di bawah ini.

6. Kode widget pemanggil artikel terbaru.

<script type='text/javascript'>var numposts = 4;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 60;</script>

<script type="text/javascript" src="/feeds/posts/default/-/Label Anda?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs"></script>
<br/>
<a style='float:right;font-size:13px;padding:5px 0 20px 0' href='http://www.web-anda.com/search/label/Label%20Anda/max-results=6'  title='Testing other' rel='nofollow'>Testing other &#187;</a>

Keterangan!!

Tambahkan script diatas pada layout blog (Tata Letak).

Ganti Label%20Anda dengan label sobat.

Ganti web-anda dengan alamat blog sobat dan ganti nama labelnya juga.

7. Letakan jquery ini di di bawah kode </head>. Jika di template sobat sudah terpasang kode ini versi berapa pun abaikan saja.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>

8.  Simpan dan lihat hasilnya.

Demikianlah panduan blogger dengan judul Memasang Widget Artikel Terbaru Plus Gambar Berdasarkan Label yang telah saya bagikan kali ini semoga panduan tersebut bermanfaat.

Apabila sobat ingin bertanya seputar panduan diatas silahkan ajukan pertanyaan sobat di kotak komentar yang telah sediakan. Terimakasih.


Resource: http://www.aluha-web.com/2014/04/tambahkan-artikel-terbaru-plus-gambar.html