Sebenarnya saya sudah pernah menuliskan cara membuat related post di blogger, namun kali ini saya akan menuliskan lagi panduan cara membuat related posts with thumbnail and summary 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 :
8. Cari kode
Nah itu lah tutorial cara membuat related post di blogger yang ada thumbnails + summary.
Ket :
Selamat mencoba dan semoga bermanfaat.
1. Klik menu seperti ini
2. Klik menu / tulisan Template
6. Cari kode berikut :
</head>7. Pasang kode berikut ini tepat di atas kode </head> tadi
<b:if cond='data:blog.pageType == "item"'>
<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];211=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>- 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
<div class='post-footer-line post-footer-line-3'/>atau kode
<data:post.body/>Kemudian pasang script yang akan menampilkan artikel terkait pada blog blogger kamu berikut ini di bawah kode <div class='post-footer-line post-footer-line-3'/> atau <data:post.body/> tersebut
<b:if cond='data:blog.pageType == "item"'> <div id='related_posts'> <h4>Related Posts</h4> <b:loop values='data:post.labels' var='label'> <script expr:src='"/feeds/posts/default/-/" +
data:label.name + "?alt=json-in-script&
callback=relpostimgcuplik&max-results=50"'
type='text/javascript'/> </b:loop> <a href='http://modification-blog.blogspot.com/'
style='display:none;'>Related Posts with thumbnails
Catatan :and summary post for blogger</a> <ul id='relpost_img_sum'> <script type='text/javascript'>artikelterkait();</script> </ul> </div> </b:if>
Silakan ganti tulisan Related Posts dengan tulisan yang kamu mau.9. Selesai dan silakan simpan pengaturan template kamu.
Nah itu lah tutorial cara membuat related post di blogger yang ada thumbnails + summary.
Ket :
Pembuat kode + script artikel terkait dengan gambar serta cuplikan ini adalah Hendriono, Terimakasih buat Senior Hendriono.Oh ia mungkin tampilannya akan berbeda dengan yang ada di blog ini (karena sedikit saya edit). Jika kamu ingin mengunjungi dan membaca tutorial dari sumbernya langsung silakan baca di http://modification-blog.blogspot.com/2011/05/artikel-terkait-dengan-gambar-mini-dan.html
Selamat mencoba dan semoga bermanfaat.
Comments
Post a Comment