Cara Membuat Artikel Terkait Vertikal Dengan Thumbnail Di Blogger

Posting berikut saya akan membawa tutorial tentang cara membuat Widget Artikel Terkait dengan style vertikal serta dilengkapi dengan thumbnail/gambar dan ringkasan artikel. Pada posting sebelumnya saya sudah membahas tentang cara membuat artikel terkait di blog Anda tapi dengan menggunakan aplikasi ke-tiga seperti LinkWhitin dan nRelate. Manfaat dengan menambahkan Artikel Terkait di blog Anda sangat banyak, selain sebagai interlink antara artikel di blog juga sebagai menu navigasi artikel yang akan menampilkan posting yang terkait sehingga memudahkan pengunjung dalam menjalajahi blog Anda. 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.

artikel-terkait-vertikal-dengan-gambar-dibawah-posting

satu-delapan

Langkah-langkah Membuat Widget Artikel Terkait :

Login ke BLogger- masuk ke Dashboard Blog Anda
Klik Template - dan PIlih Edit HTML
Cari tag dibawah, tekan Ctrl+F

satu-delapan

</head>

Setealah Anda menemukan tag diatas, salin script dibawah ini tepat diatas/sebelumnya

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<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>

satu-delapan

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

<data:post.body/>

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

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<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='&quot;/feeds/posts/default/-/&quot; + 
data:label.name + 
&quot;?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=50&quot;' 
type='text/javascript'/>

</b:loop>

<ul id='relpost_img_sum'>

<script type='text/javascript'>relatpost();</script>

</ul>

</div>

</b:if>

satu-delapan

Langkah terakhir klik Simpan Template - Selesai !

Tambahan :

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>

Diatas Anda telah membaca Cara Membuat Widget Artikel Terkait Vertikal dengan thumbnail dan ringkasan artikel. JIka Anda mendapatkan kesulitan dengan penjelasan saya, silahkan tinggalakan komentar Anda. Akhir kata semoga Artikel yang singkat ini bermanfaat buat Anda semua. Salam satu-delapan !

Search This Blog

BLOGSATUDELAPAN.COM