Cara Membuat Widget Artikel Terkait di Blog

Pada kesempatan baik ini  saya akan membahas tentang cara membuat Widget Artikel Terkait dengan style vertikal serta dilengkapi dengan thumbnail/gambar dan ringkasan artikel di Blog. Manfaat dengan menambahkan Widget Artikel Terkait di blog  guna menunjang SEO dan sebagai interlink antara artikel di blog juga sebagai menu navigasi artikel yang akan menampilkan posting yang terkait sehingga memudahkan pengunjung dalam mengakses artikel lainnya. Selain itu juga Artikel Terkait dapat meningkatkan lalu lintas di blog Anda dan mengurangi tingkat bouncing di blog sehingga hal ini akan menjadi nilai plus buat blog Anda. Contoh Widget Artikel seperti gambar dibawa ini. Bagaiaman ... ?? tertarik, kalau ya silahkan teruskan membaca artikel dibawahnya. Atau anda dapat lihat hasilnya seperti yang ada paling bawah di artikel ini

 

Tahapan Membuat Widget Artikel Terkait :

• Login ke Blogger- masuk ke Dashboard Blog Anda
• Klik Template - dan PIlih Edit HTML

• Akan muncul halaman script, saya sarankan hati-hati jangan mainkan mouse dan keybord di halaman script kalau ada yang kurang / nambah script yang tidak di sengaja di ketahui akan berakibat perubahan pada tampilan blog anda, kalau sudah terjadi maka akan mengulang desaign script anda dari awal lagi.
• Cari tag </head>, agar memudahkan pencarian : letakan kursor mouse anda di halaman script blog, kemudian  tekan pada keybord bersamaan Ctrl+F , copy paste tag diatas di halaman pencarian tekan enter.

Setelah menemukan tag diatas, salin script dibawah ini tepat diatasnya.

<b:if cond='data:blog.pageType == "item"'> <style> #related_posts{} #related_posts h4{ border-top:1px solid #333; border- bottom:1px solid #333; color:#333; font-size:14px; letter- spacing:0; line-height:20px; margin:0 0 5px; padding:5px 10px; background:#03C} #relpost_img_sum{/* height:320px; overflow:auto; */margin:0; padding:0px; line-height:16px} #relpost_img_sum:hover{background:none} #relpost_img_sum ul{list-style-type:none; margin:0; padding:0} #relpost_img_sum li{border:1px solid #ccc; background:#fff; margin:0 0 5px; padding:5px; height:65px; list-style:none} #relpost_img_sum .news-title{display:block; font- weight:bold !important} #relpost_img_sum .news-text{display:block; text-align:justify; font-weight:normal; text-transform:none; color:#333} #relpost_img_sum img{float:left; margin-right:5px; padding:4px; border:solid 1px #ccc; width:50px; height:50px; background:#fff} </style> <script type='text/javascript'>//<![CDATA[ var relnum = 0; var relmaxposts = 5; var numchars = 150; var morelink = "selengkapnya"; eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e (parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c +29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e (c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\ \w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e (c)+'\\b','g'),k[c]);return p}('2 4=f g();2 5=f g();2 9=f g();2 b=f g();s K(L,M){2 7=L.19("<");l(2 i=0;i<7.3;i++){8(7[i].N(">")!=-1) {7[i]=7[i].O(7[i].N(">")+1,7[i].3)}}7=7.1a("");7=7.O(0,M-1);y 7}s 1b(z){l(2 i=0;i<z.P.6.3;i++){2 6=z.P.6[i];4[n]=6.A. $t;u="";8("Q"B 6){u=6.Q.$t}C 8("R"B 6){u=6.R.$t}9[n]=K (u,1c);8("S$T"B 6){D=6.S$T.1d}C {D="1e://1f.1g.1h/1i/1j/1k/1l/d/1m.1n"}b[n]=D;l(2 k=0;k<6.E.3;k++){8(6.E[k].U==\'1o\'){5[n]=6.E[k].v;F}}n++}}s V(a,e){l(2 j=0;j<a.3;j++)8(a[j]==e)y 1p;y 1q}s 1r(){2 m=f g (0);2 o=f g(0);2 p=f g(0);2 q=f g(0);l(2 i=0;i<5.3;i++){8(!V (m,5[i])){m.3+=1;m[m.3-1]=5[i];o.3+=1;o[o.3-1]=4[i];p.3+=1;p [p.3-1]=9[i];q.3+=1;q[q.3-1]=b[i]}}4=o;5=m;9=p;b=q;l(2 i=0;i<4.3;i++){2 c=w.W((4.3-1)*w.X());2 Y=4[i];2 Z=5[i];2 10=9[i];2 11=b[i];4[i]=4[c];5[i]=5[c];9[i]=9[c];b[i]=b [c];4[c]=Y;5[c]=Z;9[c]=10;b[c]=11}2 x=0;2 r=w.W((4.3-1)*w.X ());2 12=r;2 h;2 13=14.1s;1t(x<15){8(5[r]!=13){h="<16 G=\'H- A 1u\'>";h+="<a v=\'"+5[r]+"\' U=\'1v\' I=\'J\' A= \'"+4[r]+"\'><1w 1x=\'"+b[r]+"\' /></a>";h+="<a v=\'"+5[r]+"\' I= \'J\'>"+4[r]+"</a>";h+="<17 G=\'H-18\'>"+9[r]+" ... <a v= \'"+5[r]+"\' I=\'J\'>"+1y+"</a><17 G=\'H-18\'>";h +="</16>";14.1z(h);x++;8(x==15){F}}8(r<4.3-1){r++}C{r=0} 8(r==12){F}}}',62,98,'||var|length|reljudul|relurls|entry|cuplik|if| relcuplikan||relgambar|informasi|||new|Array|relhasil||||for|tmp| relnum|tmp2|tmp3|tmp4||function||postcontent|href|Math| rangkumanPosts|return|json|title|in|else|postimg|link|break| class|news|target|_top|saringtags|suchas|panjang|indexOf| substring|feed|content|summary|media|thumbnail|rel|contains| floor|random|tempJudul|tempUrls|tempCuplikan|tempGambar| rini|dirURL|document|relmaxposts|li|span|text|split|join| relpostimgthum|numchars|url|http|lh3|ggpht|com| _xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw| noimagethumb|gif|alternate|true|false|relatpost|URL|while| clearfix|nofollow|img|src|morelink|write'.split('|'),0,{})) //]]></script></b:if>  

• Selanjutnya cari tag dibawah ini, gunakan kembali Crtl+F untuk memudahkan pecarian :

<data:post.body/>

Kemudian salin script dibawah ini tepat dibawahnya, mungkin dalam pencarian akan menemukan beberapa tag yang sama gunakan tag yang kedua atau ketiga. 

<b:if cond='data:blog.pageType == "item"'> <div id='related_posts' style='margin-top:35px;'> <h4 style='color:#ffffff; text-shadow:none; border-radius:5px; border:2px solid #ddd; background:#6fa8dc;'> Artikel Terkait</ h4> <b:loop values='data:post.labels' var='label'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in- script&callback=relpostimgthum&max- results=50"' type='text/javascript'/> </b:loop> <ul id='relpost_img_sum'> <script type='text/javascript'>relatpost();</script> </ul> </div> </b:if>

Langkah terakhir klik Simpan Template. Lihat blog anda apakah sudah muncul Widget Artikel Terkait, Jika belum muncul widgetnya pada salinan script kedua/terakhir coba pindahkan script yang sudah di copy paste tadi ke tag yang keempat dst sampai muncul Widget tersebut.

Sebagai Tambahan Info Script di Atas:

• var relmaxposts = 5, jumlah artikel terkait yang ditambilkan
• var numchars = 150, jumlah dari ringkasan artikel
• Untuk mengubah style dari widget seperti ukuran huruf, warna, dll. Edit pada script yang ada didalam tag <style> ... </style>

Anda bisa berkreasi merubah angka artikel atau style warna / huruf sesuai keinginan anda. 

Demikian diatas tahapan membuat Cara Membuat Widget Artikel Terkait Secara Vertikal dengan Thumbnail dan ringkasan artikel. JIka anda mendapatkan kesulitan/kurang paham dengan penjelasan saya diatas, silahkan tinggalakan komentar Anda. Akhir kata semoga Artikel ini bermanfaat buat Anda semua.