share all free for you

Advertiser Here

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'>

KodeKeterangan
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"
SelengkapnyaAdalah kata yang berfungsi seperti Read More atau link menuju postingan
CSSCSS adalah judul label yang akan di tampilkan pada Related Post

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

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.

Sudah ada [ 84 komentar ] bagaimana pendapat Anda,,?

  1. woww kerenn,..
    gaya baru nihh..
    baru lihat.
    ehh ada ga related post yg hanya judulnya saja dan tapil brdasarkan label post ?

    ReplyDelete
    Replies
    1. related post ini juga kan bisa di bikin judul saja gan tinggal merubah angka [code]var numchars = 200;[/code] menjadi 0 dan gambarnya tinggal di kasih display:none di cssnya pada

      Delete
    2. hihi, saya masih suka yg judul postnya saja. Lebih simple :D

      Delete
    3. sipt silahkan dipilih mana yang lebih bagus :)

      Delete
    4. maen ke tempat kakak cunayz ahh :)

      Delete
  2. wahhh bolehh dcoba nihh sob

    ReplyDelete
  3. boleh juga nih trik ente :D

    ReplyDelete
  4. Saya save sop ya,mau di coba di blog satunya lagi.
    Nice share,thanks ya,happy blogging.

    ReplyDelete
  5. terlihat keren jg., tp kelemahanx hny mampu menampikan satu label sj dan kodex buanyak banget hehe.., thx sharex sob.., happy blogging ! *smile

    ReplyDelete
    Replies
    1. banyakkan CSSnya sob kodenya sedikit cuma saya satuin :)

      Delete
  6. jadi kelihatan rapi kalau dua kolom...

    ReplyDelete
  7. Waduh sob, banyak banget,.......

    ReplyDelete
  8. wah yang ini mantes sob, model baru yah, di simpen dulu deh}

    ReplyDelete
  9. Related post dua kolom? Kerenn...tapi edit html-nya ini yg biasanya bikin saya mumet karena srg ngalami kesalahan...#gaptek !

    ReplyDelete
    Replies
    1. ini kan gampang banget mbk pasangnya cuma cssnya saja yang panjang

      Delete
    2. Yang panjang itu modifikasinya mas? :D heheheh saya kalau ambil widget ndak suka sama ama sumbernya....? :D Bikin style sendiri

      Delete
    3. sipt agan emang masternya deh kalo tentang ginian :D

      Delete
  10. wah keren gan, terlihat panjan scripnya. tapi kayanya ringan, soalnya scripnya langsung ya, gapake pihak ke 3 ya?

    ReplyDelete
  11. wew,, keren nih,, aq coba dah.. thanks gan..

    ReplyDelete
  12. Tips yang cerdas cuma di Wibesite ini banyak kumpulan Artikel bagus. harus dicoba. salam sukses

    ReplyDelete
  13. Amazing Artikel yang sangat berguna,terutama Tipsnya sangat membangun. boleh dicoba.

    ReplyDelete
  14. Tips dan Info menarik, boleh dicoba, Semoga berhasil

    ReplyDelete
  15. Setelah membuka Wibesite ini, saya menemukan Artikel yang Amazing dan infonya boleh dicoba. Sukses selalu

    ReplyDelete
  16. wihhh manteb sobat :)
    bisa di coba nih :))

    ReplyDelete
  17. Saya lebih suka yang cuma pakek judul ajah mas, ndak ribet hehehehehehe ? :D

    ReplyDelete
    Replies
    1. Baru tahu saya ternyata gambar ini [img]https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcSCRnf3N9dhrmqSkKV7UktdIafsiOdZxdfYGLf9vfQzkP7sOHTXQA[/img] pakek enkripsi? :D

      Delete
  18. kalau punya saya di pasang di sidebar, tapi ngak dua kolom. Apa tinggal di kasih

    [blockquote]Width:46%; [/blockquote]

    ReplyDelete
  19. mantaff nih brow semakin maju tutorialnya :)

    ReplyDelete
  20. kembali berkunjung sob.., happy blogging *smile

    ReplyDelete
  21. terima kasih atas artikel ini sangat bermanfaat
    saya sedang mencari ini.
    terima kasih sudah share :D



    #Salam Sehat Selalu

    ReplyDelete
  22. wow..keren punya nich..bisa sampai dua kolom :)

    ReplyDelete
  23. Terima kasih sahabat atas berbagi pengetahuannya nih tentang membuat artikel terkait...
    Beda dengan jenis artikel terkait lainnya sahabat..jempol dech

    ReplyDelete
  24. harus belajar CSS lagi saya.. :)

    ReplyDelete
  25. Wow... boleh dicoba ne Gan... Thanks sudah share gan,,, :)
    Hadir selalu di Blog Sobat terbaik, izin share : MP3 Kisah Inspiratif Bag. XIV, ditunggu komentarnya, Thx... :)
    Salam bLogger,

    ReplyDelete
  26. ajib pisan, keren abies euy...segera tanpa banyak pikir segera disimpen dalam kotak warna merah dipojok desa dulu nih kang.
    bikin berat load blog ngga ya?
    maaf yeuh baru mampir, sibuk cari setoran.
    salam sehat selalu.
    btw lanjutin kuliah kemana nih?

    ReplyDelete
    Replies
    1. manyapa sohib desa tercinta memohon maaf lahir dan batin jelang puasa ramadhan besok.
      salam sehat selalu

      Delete
  27. Bang Boleh Tau Apa nama templatenya ?

    ReplyDelete
  28. tips yang berguna sobat..

    anyway pada css box-shadow nya perlu penambahan kode css untuk browsernya, biar lebih afdhol ,,,hehehheeh (maaf kalau sudah menggurui) :D

    ReplyDelete
  29. wow, panjang juga scriptnya. bikin berat gk ney ya???

    ReplyDelete
  30. Ikut menyimak artikelnya Gan :-)

    Salam,

    ReplyDelete
  31. mampir kerumah sohib tercinta, semoga selalu sehat dan keberkahan ramadhan selalu menyertaimu...amin

    ReplyDelete
  32. mantap gan, keren, mampir ketempat ane, sekalian disapa, salam kenal

    ReplyDelete
  33. lapor gan link agan sudah saya pasang disini
    http://www.radirachim.web.id/p/tukar-link-exchange-link.html
    pasang balik ya

    ReplyDelete
  34. Mantapp Artikelnya...

    Follow My Blog

    [blockquote]www.fhandikablog.com[/blockquote]

    ReplyDelete
  35. terima kasih sudah berbagi, bisa buat belajar otak atik template neh...

    ReplyDelete
  36. Weeew mantaab,Langsung ane praktekin gan :D salam kenal :D

    ReplyDelete
  37. Kebetulan sekali saya ingin membuat blog saya ada related post nya tapi ingin yang 1 tapi di coba dulu ah ini juga lumayan informasinya sangat bermanfaat..

    ReplyDelete
  38. yes,akhirnya nemuin juga yang saya cari"
    makasih mz dah share info nya...
    mampir ke gubug saya mz bila berkenan,,^^
    tq b4

    ReplyDelete
  39. Wach keren bgt tipsnya kawan.. salam sukses sllu

    ReplyDelete
  40. tips yang sangat bermanfaat,, bisa dicoba neh

    ReplyDelete
  41. Hmm.. mantap.. keren juga blognya.. salam kenal xD

    ReplyDelete
  42. [img]http://1.bp.blogspot.com/-PPw_7cR5jTQ/UD3_xggqOZI/AAAAAAAABb0/DF_yAOaUHFQ/s320/darkhimajiev1blogspottemplate.jpg[/img]

    ReplyDelete
  43. [blogckquote]seep[/blockquote]

    ReplyDelete
  44. [blockquote]seep[/blockquote]

    ReplyDelete
  45. ini dia yg ane cri2 kira2 brat gk nih gan...

    ohh iya klo bleh tau keren bngt tempe nya gan...

    ReplyDelete
  46. keren sekali related postnya. thanks atas tutornya mendingan saya bookmark dulu.

    ReplyDelete
  47. wah keren sob, jdi lebih menghemat tempat :D

    ReplyDelete
  48. keren bro...
    oh ia btw cara buat label 2 kolom ky gmn? ky di blog ini?
    ko filenya udah g ada yah not existing?
    tulis lg dong...

    ReplyDelete
  49. wah keren gan.. tapi kok javascriptnya banyak bgt ya? pasti berat tuh gan..
    coba pake post.snippet aja gan bisa gak? -_-

    ReplyDelete
  50. mantaep gan, sudah saya coba dan berhasil, terima kasih

    ReplyDelete
  51. gan gambar ya kok gak keluar, undefined gitu

    ReplyDelete
  52. manteb banget deh mas :D

    ReplyDelete
  53. Terimakasih infonya gan, sangat membantu saya :)

    ReplyDelete
  54. oh ya mas saya mau nanya nih:
    script berikut termasuk dalam kode juga ya?
    [code]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();
    [/code]

    btw tutorial yang bagus, siap untuk saya coba,
    terima kasih....

    ReplyDelete
  55. wah, mantap gan..
    izin copas scriptnya gan..
    terima kasih.

    ReplyDelete
  56. nah ini mantap nich buat bahan belajar nubi kayak ane :D

    ReplyDelete
  57. because the blessing lies from all directions

    ReplyDelete
  58. btw tutorial yang bagus, siap untuk saya coba,

    ReplyDelete

Untuk menyisipkan kode,gunakan tag
[code]KODE ANDA[/code]
Untuk menyisipkan quote,gunakan tag
[blockquote]KATA-KATA ANDA[/blockquote]
Untuk menyisipkan gambar,gunakan tag
[img]URL GAMBAR ANDA[/img]
Untuk menyisipkan video,gunakan tag
[youtube]URL VIDEO ANDA[/youtube]
Anda juga bisa menggunakan emoticon seperti biasa.

Pasang Iklan Anda Disini

 
Copyright © 2011 Blogcunayz Template Design By Rizky Wardiansyah