-->

Situs Multi Pengetahuan Meliputi Pendidikan, Informasi Teknologi, Tutorial, Serta Pengetahuan Penting Lainya

Cara Membuat Artikel Terkait Bergambar

Membuat Artikel terkait dengan gambar memang sangat penting pada blog yang membahas apa saja. Karena dengan Artikel Terkait atau Related Post, bisa membuat pengunjung akan berlama-lama melihat artikel-artikel unik pada blog anda.

Memang disana banyak sekali macam-macam atau gaya Artikel terkait hingga membuat anda bingung artikel terkait yang bagaimana yang seharusnya ada diblog Saya.

Untuk itu multiajaib akan membagikan Cara Membuat Related Post With Thumbnail (Gitu sih bahasa kerennya) tapi sudahlah! langsung saja kita menuju tutorial :

Related Posts

Cara Membuat Artikel Terkait Bergambar 

1. Pertama login ke www.blogger.com
2. Klik judul blog anda
3. Pilih Template - Edit HTML
4. Cari Kode ]]></b:skin> atau </style> 
5. Tambahkan kode dibawah ini tepat dibawah kode ]]></b:skin> atau </style> tadi

<style>
#related_posts{}#related_posts h2{border-top:1px solid #F4F3F3;border-bottom:1px solid #F4F3F3;color:#222;font-size:13px;color:#222;text-shadow:white 1px 1px 1px;letter-spacing:0;line-height:20px;background:#C4C4C4;margin:0 0 5px;padding:5px 10px}#relpost_img_sum{line-height:16px;margin:0;padding:0}#relpost_img_sum:hover{background:none}#relpost_img_sum ul{list-style-type:none;margin:0;padding:0}#relpost_img_sum li{list-style-type:none;padding:5px;border:1px solid #eee;margin:5px 0;overflow:hidden}#relpost_img_sum .news-title{}#relpost_img_sum .news-text{display:block;text-align:left;font-weight:400;text-transform:none}#relpost_img_sum img{float:left;margin-right:10px;display:block}
.terkait-suka{text-align:left;margin-top:10px}.terkait-suka h2{ font-size:110%; font-weight:bold; color:#888; margin:0 0 5px; background:#EEE; padding:8px}.terkait-suka h2 a:link,.terkait-suka h2 a:visited{color:#555}.terkait-suka ul a{color:#1ABC9C;font-weight:bold;font-family:arial}.terkait-suka a:hover{text-decoration:underline}
</style>
<script type='text/javascript'>//<![CDATA[
var relnojudul = 0;
var relmaxtampil = 5;
var numchars = 170;
var morelink = "";
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]+" ... <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>

6. Jika sudah, cari lagi kode ini <div class='post-footer'> biasanya kode ini terdapat 2. Silahkan anda pilih yang kedua, dan letakkan kode dibawah ini tepat diatas kode <div class='post-footer'> yang kedua
<div class='terkait-suka'>
<h2>Related : <data:blog.pageName/></h2>
<b:if cond='data:post.labels'>
<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>
<ul id='relpost_img_sum'>
<script type='text/javascript'>artikelterkait();</script>
</ul>
</b:if>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
7. Simpan template, lihat hasilnya!

Ups... gampang sekali bukan? nah jika ada yang belum berhasil, silahkan tanyakan pada kolom komentar dibawah, jika saya dapat membantu, akan saya bantu. Demikianlah tutorial cara membuat artikel terkait dengan gambar / Thumbnail versi Horizontal dibawah artikel ini, semoga bermanfaat...

Previous
Next Post »

5 komentar

Randi Bouty delete May 1, 2015 at 2:38 PM

Terima Kasih mas. oh ya kalo blog pagernya gmna? :D

Mangs Aduls delete May 2, 2015 at 9:40 AM

kebetulan blog saya g pake related post. cara nampilkan related posnya gimana
?

Al Fikri delete May 2, 2015 at 11:17 AM

Sama-sama ...

Al Fikri delete May 2, 2015 at 11:18 AM

Cara nampilkannya, yaa pakek cara diatas mas :D

Anugrah Ramadhanu delete September 17, 2015 at 4:18 PM

gan,cara mindahinya gimana

Apa tanggapan anda tentang artikel diatas?

 

Contact Form

Name

Email *

Message *