Rizqi Official

Rizqi Official

» » Cara Membuat Artikel Terkait Dengan Thumbnail Di Blog

Cara Membuat Artikel Terkait Dengan Thumbnail Di Blog

Unknown
Tutorial Blog
Sabtu, 10 Mei 2014
2 Komentar
Cara Membuat Artikel Terkait Dengan Thumbnail Di Blog

Cara Membuat Artikel Terkait Di Blog - Hai sobat blogger, gimana kabarnya? Semoga aja pada baik-baik semua ya.oke, pada kesempatan ini saya akan share Cara Membuat Artikel Terkait Dengan Thumbnail Di Blog. Mungkin yang ini agak lebih berbeda,karna dibuat oleh Bung Frangki.kelebihan dari widget ini adalah Valid HTML5 dan Valid CSS3..Oke langsung saja langkah-langkah di bawah ini di simak baik-baik ya :D

Tambahkan CSS

1. Login ke Blogger.com
2. Klik Template > Edit HTML
3. Tambahkan kode CSS di bawah ini di atas ]]></b:skin>

/* Related Post
-----------------------------------------------
*/
#related_posts{border-radius:0 0 4px 4px;padding:0 0 5px;margin:10px 5px 5px 5px;background:#fff}
#related_posts h3 {border-radius:4px 4px 0 0;margin:0 0 10px;padding:12px 0;width:100%;font-weight:normal; line-height:1.4em; text-transform:uppercase;font-size:150%;text-align:center;background:rgba(13, 150, 251, 1);color:#fff;}
#relpost_img_sum{line-height:16px;padding:0;transition:all .3s ease-in;margin:15px}
#relpost_img_sum ul{list-style-type:none;margin:0;padding:0}
#relpost_img_sum ul li {list-style-type:none;margin:0;padding:0}
#relpost_img_sum li{height:65px;list-style:none;border:1px solid #f2f2f2;padding:5px;transition:all .3s ease-in;margin-bottom:5px}
#relpost_img_sum a:link, #relpost_img_sum a:visited, #relpost_img_sum a:active{font-size:15px;color:#3498DB;transition:all .3s ease-in;font-weight:700}
#relpost_img_sum a:hover{color:#f3c18c}
#relpost_img_sum .news-text{font-size:15px;display:block;text-align:left;font-weight:400;text-transform:none;color:#888}
#relpost_img_sum img{float:left;margin-right:14px;background:#FFF;border:solid 1px #3498DB;width:55px;height:55px;padding:4px;transition:all .3s ease-in}



Tambahkan JavaScript


cari kode </head>, dan letakan kode JavaScript ini tepat di atas kode tersebut

<script type='text/javascript'>
//<![CDATA[
var relnojudul = 0;
var relmaxtampil = 5; // Jumlah Artikel Terkait
var numchars = 200; // Jumlah Text pada Artikel Terkait
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\' A=\'"+4[r]+"\'>"+4[r]+"</a>";h+="<17 G=\'H-18\'>"+9[r]+" ... <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>


Tambahkan HTML


Cari kode <data:post.body/> , bila kode tersebut ada 2, pilih saya yang kedua. dan copy kode di bwah ini tepat di bawah kode tersebut

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related_posts'>
  <h3> Artikel Terkait : </h3>
<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;amp;callback=relpostimgcuplik&amp;amp;max-results=5&quot;' type='text/javascript'/>
</b:loop>
<div id='relpost_img_sum'>
  <script type='text/javascript'>artikelterkait();</script>
</div>
</div>
</b:if>



4. terakhir Simpan Template. dan lihat Hasilnya :D

demikian tutorial dari saya,bila ada kekurangan saya minta maaf,saya akhiri wassalam.

2 Responses to "Cara Membuat Artikel Terkait Dengan Thumbnail Di Blog"

avatar
Balas
Hapus
hamdani 21 Juli 2015 pukul 21.08 Cara Membuat Artikel Terkait Dengan Thumbnail Di Blog

terima kasih gan,dari blog agan udah memeberikan informasi yang sangat bermanfaat untuk saya,
saya banyak belajar dan mendapat ilmu terbaru setelah melihat postingan yang ada di blog agan.
saya tunggu postingan selanjutnya gan..

avatar
Balas
Hapus
Gudang Ilmu 28 Juli 2015 pukul 12.18 Cara Membuat Artikel Terkait Dengan Thumbnail Di Blog

Terimakasih informasinya gan.. tapi saya mau tanya, apakah script ini muncul di bagian home page.

Catatan:
• Dilarang menulis link aktif!
• Dilarang ngiklan di kolom komentar!
• Untuk menyisipkan kode pendek, gunakan tag <i rel="code"> ... KODE ... </i>
• Untuk menyisipkan kode panjang, gunakan tag <i rel="pre"> ... KODE ... </i>
• Untuk menyisipkan catatan, gunakan tag <b rel="quote">.. TEKS ... </b>
• Untuk menyisipkan gambar, gunakan tag <i rel="image"> ... URL GAMBAR ... </i>

Sebelum menyisipkan kode silahkan gunakan Tool Konversi Kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar

Emoticon