» » MEMBUAT WIDGET RELATED POST THUMBNAIL VERSI-1

MEMBUAT WIDGET RELATED POST THUMBNAIL VERSI-1

Pada artikel tentang Bounce Rate telah dibahas bahwa salah satu penyebab tingginya prosentase Bounce Rate ini adalah ketiadaan widget related post (artikel terkait) pada akhir tiap-tiap postingan blog. Dengan tanpa pemasangan widget ini para visitor bisa jadi tidak memiliki pilihan untuk membaca artikel-artikel kita yang lainnya, sehingga apa yang terjadi ? Setelah membaca sebuah artikel, dan ia telah mendapatkan apa yang dicari, kontan langsung menutup blog kita dan pergi menuju blog lain yang mungkin artikel-artikelnya lebih variatif.

Dunia Blog 888

DUNIA BLOG dalam hal ini mengalami perlakuan yang serupa, terbukti dari catatan Alexa.com, prosentase Bounce Rate blog ini pun masih berkisar di angka 30 % lebih, hal ini membuktikan bahwa para visitor blog kebanyakan hanya sudi untuk membuka satu halaman artikel dan selanjutnya perrgi begitu saja. Admin blog menyadari akan hal ini, karena beberapa waktu yang lalu widget related post (pada bagian akhir masing-masing artikel) tidak dapat berjalan sebagaimana mestinya.

Admin blog menyadari dan langsung merubah kombinasi script related post yang terdahulu, dan ..... akhirnya mulai sekarang telah dapat berjalan sebagaimana mestinya. Bagaimana cara membuatnya ? Berikut ini akan saya paparkan.

1. Log in ke blog anda, masuk ke dashboard blogger.
2. Pilih template kemudian pilihlah menu edit HTML.
3. Sebelum melangkah lebih jauh, ada baiknya anda backup dulu template anda.
4. Langkah selanjutnya, carilah kode </head> dan letakkan rangkaian script berikut di atasnya :

Kode Script:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
#related_posts h4 {
background: none repeat scroll 0 0 #333;
color: #FFF;
font-family: Arial,Tahoma,Verdana;
font-size: 11px;
font-weight: bold;
margin: 0;
padding: 2px 5px 1px 8px;
text-shadow: 1px 1px #000000;
text-transform: uppercase;
}
#relpost_img_sum {
/* height: 320px;
overflow: auto; */
margin: 0;
padding: 4px;
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 #DDD;
margin: 0;
padding: 5px;
height: 65px;
list-style: none;
}

#relpost_img_sum li:hover {
background-color: #E6E6E6;
}

#relpost_img_sum a {
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

#relpost_img_sum .news-title {
display: block;
font-weight: bold !important;
margin-bottom: 4px;
}

#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: 14px;
padding: 4px;
border: solid 1px #DDD;
width: 55px;
height: 55px;
}
</style>
<script type='text/javascript'>//<![CDATA[
var relnojudul = 0;
var relmaxtampil = 10;
var numchars = 200;
var morelink = "readmore";
/*
Related Post with Thumbnail & Summary 1.0 (June 17, 2011)
*/
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|relnojudul|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|relmaxtampil|li|span|text|split|join|relpostimgcuplik|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|artikelterkait|URL|while|clearfix|nofollow|img|src|morelink|write'.split('|'),0,{}))
//]]></script>
</b:if>


5. Kemudian carilah kode
    
<div class='post-footer-line post-footer-line-3'>
    <!-- Untuk kode artikel terkait -->
    </div>
6. Letakkan rangkaian script berikut pada tempat yang telah disediakan seperti di atas

  1. <b:if cond='data:blog.pageType == &quot;item&quot;'>  
  2. <div id='related_posts'>  
  3. <h4>Related Posts</h4>  
  4. <b:loop values='data:post.labels' var='label'>  
  5. <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50&quot;' type='text/javascript'/>  
  6. </b:loop>  
  7. <a href='http://creatingwebsite-maskolis.blogspot.com/' style='display:none;'>Related Posts with thumbnails and summary post for blogger</a>  
  8. <ul id='relpost_img_sum'>  
  9. <script type='text/javascript'>artikelterkait();</script>  
  10. </ul>  
  11. </div>  
  12. </b:if> 
7. Kemudian simpan template anda dan lihatlah hasilnya.

Keterangan:

  • var relnojudul = 0; ubah nilai 0 jika ingin menampilkan jumlah artikel yang terkait dalam setiap kategori, nilai 0 artinya artikel dalam kategori tertentu akan ditampilkan semua (direkomendasikan tetap bernilai 0 karena dalam beberapa kasus, jika kita ubah nilainya maka artikel terkait akan menampilkan keterangan "undefined". Hal ini bisa terjadi jika ada artikel dalam kategori tertentu yang hanya terdiri dari 1 artikel)
  • var relmaxtampil = 10; ubah nilai 10 untuk menentukan jumlah artikel yang terkait sesuai kategori
  • var numchars = 200; ubah nilai 200 untuk menentukan jumlah karakter yang akan ditampilkan pada ringkasan artikel. Karakter termasuk spasi dan tanda baca
  • var morelink = "readmore"; ubah kata readmore sesuai dengan keterangan link akhir ringkasan artikel yang akan menuju pada artikel yang dimaksud pada saat di klik.
Demikian tadi tutorial singkat cara membuat artikel terkait dengan thumbnail disertai uraian singkat, mungkin agak sedikit membingungkan, jika ada yang mau ditanyakan silahkan isi kolom komentar yanga da dibawah, sekian dan semoga bermanfaat.

Script source by : modification-blog.blogspot.com

MEMBUAT WIDGET RELATED POST THUMBNAIL VERSI-1 9 Out Of 10 Based On 10 Ratings. 9 User Reviews.
Share 'MEMBUAT WIDGET RELATED POST THUMBNAIL VERSI-1' On ...

Ditulis oleh: Unknown -

Belum ada komentar untuk "MEMBUAT WIDGET RELATED POST THUMBNAIL VERSI-1"

Posting Komentar

Silahkan meninggalkan komentar secara sopan, jangan melakukan spam pasti akan terhapus secara otomatis