Membuat Related Post Bergambar Serta Ringkasannya

Fasilitas Membuat Related Post Bergambar Serta Ringkasannya
Artikel terkait dengan fasilitas gambar mini dan ringkasan artikel (Related Post with Thumbnail Image and Summary Content) ini memiliki beberapa kelengkapan yang sangat menarik diantaranya:
Menggunakan bahasa JSON Feed turunan JavaScript
Mampu menampilkan gambar yang diambil gambar yang diupload pada artikel
Jika artikel tidak mengandung gambar maka gambar akan digantikan dengan gambar default yang sudah dituliskan pada script
Mampu menampilkan ringkasan artikel sehingga mempermudah para pengunjung untuk menemukan artikel terkait yang dibutuhkan
Artikel terkait ini kedepannya akan dikembangkan dalam versi Ticker dan versi Accordion yang tentunya menggunakan sentuhan animasi jQuery
Lebih ringan karena versi ini hanya akan diload pada saat artikel yang dituju sedang dibuka, sedangkan pada saat membuka halaman utama script ini tidak akan diload
Konfigurasinya sangat mudah
Blog lebih tampak profesional


Panduan Cara Bikin Artikel Terkait Bergambar Serta Ringkasan Untuk Blogger
Seperti tutorial lainnya, langkah pertama yang harus dilakukan adalah login dahulu ke blogger, kemudian ikuti langkah-langkah cara membuat related post di blogger berikut.


1. Klik menu seperti ini
2. Klik menu / tulisan Template
3. Klik menu Edit HTML
4. Klik tulisan / menu Lanjutkan
5. Beri centang pada Expand Template Widget
6. Cari kode berikut :


7. Pasang kode berikut ini tepat di atas kode tadi

<b:if cond='data:blog.pageType == "item"'><br /> <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><br /> <script type='text/javascript'>//<![CDATA[ var relnojudul = 0; var relmaxtampil = 10; var numchars = 200; var morelink = "readmore"; /* Related Post with Thumbnail & Summary 1.0 (May 02, 2011) copyright (c) 2011 Hendriono from http://modification-blog.blogspot.com/ */ 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><br /> </b:if>

Catatan :


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
8. Cari kode

atau kode


Kemudian pasang script yang akan menampilkan artikel terkait pada blog blogger kamu berikut ini di bawah kode

atau tersebut

Related Posts

Catatan :

Silakan ganti tulisan Related Posts dengan tulisan yang kamu mau.
9. Selesai dan silakan simpan pengaturan template kamu.