Monday, May 2, 2011

Artikel Terkait dengan Gambar Mini dan Ringkasan

Posted by dav On 11:45 AM
Alhamdulillah. Widget artikel terkait yang dilengkapi gambar mini (thumbnail image) dan ringkasan artikel (summary content) telah selesai dibuat, mungkin jika di tulis dalam bahasa Inggris menjadi Related Post with Thumbnail Image and Summary Content. Diantara artikel terkait yang pernah Blogger Tune-Up tulis dan coba, versi ini merupakan versi yang sangat menguras waktu, selain tingkat kerumitannya yang cukup tinggi juga kurangnya pengetahuan penulis tentang bahasa JSON Feed sehingga proses penulisan script cukup dan bahkan memakan waktu yang sangat lama. Dari sisi tampilan dan kelengkapan, versi ini sangat berbeda jauh dengan yang lainnya dan bahkan boleh dikatakan memiliki fitur yang sama persis dengan yang dikembangkan oleh para pengguna Wordpress. Versi ini masih menggunakan inti JSON Feed dan merupakan gabungan dari Membuat Artikel Terkait (Versi 3.0) dan jQuery News Ticker Recent Post Plus Thumbnails. Namun untuk versi Related Post Ticker with Thumbnail and Summary akan dituliskan dalam artikel terpisah, hal ini untuk mempermudah pemahaman, penerapan dan penggunaannya, juga untuk mengurangi kesalahan penerapan pada template blogger.

Fasilitas Artikel Terkait dengan Gambar Mini dan Ringkasan Artikel

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

Integrasi Artikel Terkait dengan Gambar Mini dan Ringkasan Artikel

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cheklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini:
</head>
Langkah 5
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 4:
<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 (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>
</b:if>
Langkah 6
Cari kode dibawah ini (rekomendasi) :
<div class='post-footer-line post-footer-line-3'/>
atau kode dibawah ini (alternatif) :
<data:post.body/>
Langkah 7
Ubah kode pada langkah 6 (jika menggunakan kode rekomendasi) menjadi seperti dibawah ini:
<div class='post-footer-line post-footer-line-3'>
<!-- Untuk kode artikel terkait -->
</div>
Langkah 8
Masukan (copy paste) kode dibawah ini menggantikan kode <!-- Untuk kode artikel terkait --> pada langkah 7:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related_posts'>
<h4>Related Posts</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=relpostimgcuplik&amp;max-results=50&quot;' type='text/javascript'/>
</b:loop>
<a href='http://modification-blog.blogspot.com/' style='display:none;'>Related Posts with thumbnails and summary post for blogger</a>
<ul id='relpost_img_sum'>
<script type='text/javascript'>artikelterkait();</script>
</ul>
</div>
</b:if>
Jika anda menggunakan kode alternatif (lihat langkah 6), masukan (copy paste) kode diatas, dibawah kode <data:post.body/>.
Langkah 9
Simpan template blogger
Langkah 10
Preview blog anda...

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
Tunggu artikel terkait dengan tampilan yang lebih menarik dan animasi cantik pada artikel mendatang. Selamat mencoba dan semoga berhasil. Happy Blogging :)
,

Popular Posts