Membuat Related Post Dua Kolom

Halo sobat kembali lagi dengan saya seorang yang gagah dan sangat keren :P (maunya sih) yaitu sang penulis Share-Tuts pada kali ini Share-tuts akan share tentang cara Membuat Related Post Dua Kolom semoga saja tutorial kali ini akan sangat bermanfaat bagi sobat semua.

Oke langsung saja ikuti langkah - langkahnya :

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>

 4. Simpan Template

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 dari Share-tuts.

Source : http://blogcunayz.blogspot.com

Anda sedang membaca artikel tentang Membuat Related Post Dua Kolom dan anda bisa menemukan artikel Membuat Related Post Dua Kolom ini dengan url http://share-tuts.blogspot.com/2012/10/membuat-related-post-dua-kolom.html. Anda boleh menyebarluaskan atau mengcopy artikel Membuat Related Post Dua Kolom ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.

Ingin mempromosikan Blog, Produk, Bisnis, Jualan atau lainnya ? Sobat bisa memasangnya diBlog ini. Tunggu apa lagi mumpung masih ada slot untuk sobat. Silahkan hubungi ane dengan meng-Klik Disini

Related Posts :