Artikel Terkait Blogger Dengan Gambar Mini dan Ringkasan Content

Fungsi related post atau artikel terkait adalah untuk menampilkan link artikel yang terkait atau berhubungan dengan artikel yang sedang dibuka pengunjung blog atau website. Selain untuk memudahkan pengunjung dalam menemukan artikel yang sedang dicari, tampilan related posts ini juga akan menambah kesan profesional blog kita.

Artikel Terkait Blogger Dengan Gambar Mini dan Ringkasan Content

Beberapa fitur artikel terkait blogger dengan gambar mini dan ringkasan

1. Menggunakan bahasa JSON Feed turunan JavaScript
2. Mampu menampilkan gambar yang diambil dari gambar yang diupload pada artikel
3. Jika artikel tidak mengandung gambar, maka gambar akan digantikan dengan gambar default yang sudah dituliskan pada script
4. Mampu menampilkan ringkasan artikel sehingga memudahkan pengunjung untuk menemukan artikel terkait yang dibutuhkan
5. Lebih ringan karena script versi artikel terkait ini hanya akan diload pada halaman artikel, dan script tidak akan diload pada halaman utama blog atau website
6. Konfigurasi yang sangat mudah
7. Blog menjadi lebih tampak profesional

Integrasi artikel terkait dengan gambar mini dan ringkasan ke blogger

1. Log in ke Blogger  » Template  » Backup template





Blogger Home Screen






Blogger Dashboard






Backup Template Blogger



2. Klik Edit HTML  » cari kode </head> (CTRL+F)





Edit HTML Blogger






Find Code </head>






Code </head>



3. Copy kode berikut kemudian letakkan di atas kode </head>
   

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

4. Cari kode berikut
   

   <div class='post-footer-line post-footer-line-3'>

5. Letakkan kode berikut di bawah kode di atas



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



6. Simpan pengaturan template

Keterangan

• var relnojudul = 0; ubah nilai 0 jika ingin menampilkan 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)

Undefined Article

• var relmaxtampil = 10; ubah nilai 10 untuk menentukan jumlah artikel terkait yang ingin ditampilkan
• var numchars = 200; ubah nilai 200 untuk menentukan jumlah karakter yang ingin ditampilkan pada ringkasan artikel.
• var morelink = "readmore"; kalimat untuk link pada akhir ringkasan yang akan menuju artikel, Anda bisa merubahnya sesuai keinginan Anda

Semoga bermanfaat.

sumber: http://modification-blog.blogspot.com/2011/05/artikel-terkait-dengan-gambar-mini-dan.html

Tweet

Postingan terkait:

Ditulis EM — Sunday 14 April 2013 — Add Comment — Blogger