Cara Membuat Related Post Dua Kolom

Cara Membuat Related Post Dua Kolom - Related Post atau dalam bahasa Indonesia disebut Artikel Terkait. Fungsi dari related post/artikel terkaint adalah untuk menampilkan artikel terkait berdasarkan label artikel dalam postingan

Related post yang akan saya share sekarang berbeda dengan related post seperti biasanya. related post ini memiliki dua kolom dan juga hanya menampilkan artikel dalam satu label saja, misalkan Anda memasukan label CSS maka related post ini akan terus menampilkan postingan yang berlabel CSS.

Berikut langkah - langkah untuk membuatnya :

1. Masuk Dasbor >> Template >> Edit HTML >> Lanjutkan

2. Cari kode </head> hapus dan udab kode </head> dengan kode berikut :

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<style type='text/css'>
@font-face {font-family: &#39;Federant&#39;;
font-style: normal;
font-weight: 400;
src: local(&#39;Federant Medium&#39;), local(&#39;Federant-Medium&#39;), url(&#39;http://themes.googleusercontent.com/static/fonts/federant/v4/C109bUmZeyhh-vIXq9lNfvesZW2xOQ-xsNqO47m55DA.woff&#39;) format(&#39;woff&#39;);
}

Paste the CSS source code you want to compress here#post-related {
width:100%;
margin-left:11px
}

#post-related p {
font-family:Federant;
font-size:14px;
margin:10px auto 0px
}

.reltit {
color:#333;
font-family:Arial,Tahoma,Verdana;
font-size:16px;
font-weight:700;
text-shadow:1px 1px #eee;
text-transform:uppercase;
text-align:center;
margin:5px 0 0;
padding:5px 0
}

#ar-related {
line-height:16px;
margin:0;
padding:5px 0
}

#ar-related ul {
list-style-type:none;
margin:0;
padding:0
}

#ar-related li {
width:46%;
float:left;
list-style:none;
border:1px solid #D3D3D3!important;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
-moz-box-shadow:1px 1px 2px #CCC inset;
height:145px;
margin:0 3px;
padding:5px
}

#ar-related li:hover {
background-color:#f9f9f9
}

#ar-related a {
text-shadow:0 1px 1px #aaa;
color:#5D73B5;
font-family:Federant
}

#ar-related .news-title {
margin-bottom:5px;
display:block;
font-size:14px;
text-align:left
}

#ar-related .news-text {
font-family:Rockwell;
display:block;
font-size:12px;
text-align:justify;
font-weight:400;
text-transform:none;
color:#333
}

#ar-related img {
float:left;
margin-right:5px;
width:70px;
height:70px;
border:1px solid #D3D3D3!important;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
-moz-box-shadow:1px 1px 2px #CCC inset;
padding:4px
}
</style>
<script type='text/javascript'>
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf&#39;;
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.stripBrs = true;
SyntaxHighlighter.all();
</script>
<script type='text/javascript'>//<![CDATA[
var relnojudul = 0;

var relmaxtampil = 10;

var numchars = 200;

var morelink = "Selengkapnya ...";
/**/
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|bcrelated|URL|while|clearfix|nofollow|img|src|morelink|write'.split('|'),0,{}))
//]]></script>
</b:if>

  </head>

3. Masih dalam Edit HTML beri centang pada Expand Templates Widget, cari kode
<data:post.body/> dan letakan kode berikut di bawahnya :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='post-related'>
<p class='reltit'>Baca Juga Artikel Menarik Lainnya :</p>
&lt;script src=&#39;/feeds/posts/default/-/CSS?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50&#39; type=&#39;text/javascript&#39;&gt;&lt;/script&gt;
<ul id='ar-related'>
<script type='text/javascript'>bcrelated();</script>
</ul>
</div>
</b:if>

Bila related post tidak muncul coba letakan kode pada poin tiga di atas kode

      <div style='clear: both;'/> <!-- clear for photos floats -->

Jika masih belum muncul juga coba letakan di bawah kode

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

Kode	Keterangan
var relmaxtampil = 10;	Artinya anda akan menampilkan posting dalam related post sebanyak 10 postingan
var numchars = 200;	200 adalah jumlah kata dalam satu post di "related post"
Selengkapnya	Adalah kata yang berfungsi seperti Read More atau link menuju postingan
CSS	CSS adalah judul label yang akan di tampilkan pada Related Post

Sekian tutorial Cara Membuat Related Post Dua Kolom semoga dapat bermanfaat.

Share this history on :

Tweet

Title : Cara Membuat Related Post Dua Kolom
URL : http://blogcunayz.blogspot.com/2012/06/cara-membuat-related-post-dua-kolom.html
Anda boleh menyebar Luaskan atau Meng Copy-Paste Artikel ini bila dapat bermanfaat bagi teman-teman anda, Namun jangan lupa untuk meletakkan Link Cara Membuat Related Post Dua Kolom sebagai Sumbernya.