Cara Membuat Related Post

Dari saking banyaknya kegiatan di dunia offline ternyata sudah lama saya tidak posting artikel di dunia online (asyik ya punya dua dunia :) ). Tutorial berikut untuk menjawab salah satu sahabat blogger di form komentar di blog ini yang meminta untuk memposting tutorial tentang cara membuat related post pada blogger yang bentuknya thumbnail kurang lebih seperti pada blog ini. Akan tetapi, saya ingin memberikan bonus untuk sahabat tadi dan mungkin berguna juga untuk anda dan yang lainnya.

Bonus yang saya maksud adalah bukan hanya related post thumbnail yang akan saya posting  akan tetapi yang related post yang lain juga sampai random post alternatif dari linkwithin pun juga ada. okey.. here we go..

Related Post Thumbnail


  • Login ke Blogger.com
  • Pilih Tata Letak
  • Kemudian Edit HTML
  • Centang Expand Widget tentunya
  • Copas kode berikut diatas kode </head>
<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End--> 
  • Selanjutnya Copas kode berikut setelah kode <div class='post-footer-line post-footer-line-1'> atau setelah kode <p><data:post.body/></p>
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbsundefined);
printRelatedLabels_thumbsundefined);
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End—>
  • Berikutnya Save Template 


Related Post Hanya Link Teks Saja

  • Caranya sama seperti diatas..
  • Bedanya diatas kode </head> Copas kode berikut:

<style>

#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : urlundefined"http://www.dogphilosophy.net/graphics/sample1.jpg") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

</style>

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Arrayundefined);
var relatedTitlesNum = 0;
var relatedUrls = new Arrayundefined);
function related_results_labelsundefinedjson) {
for undefinedvar i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for undefinedvar k = 0; k < entry.link.length; k++) {
if undefinedentry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicatesundefined) {
var tmp = new Arrayundefined0);
var tmp2 = new Arrayundefined0);
forundefinedvar i = 0; i < relatedUrls.length; i++) {
ifundefined!containsundefinedtmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function containsundefineda, e) {
forundefinedvar j = 0; j < a.length; j++) if undefineda[j]==e) return true;
return false;
}
function printRelatedLabelsundefined) {
var r = Math.floorundefinedundefinedrelatedTitles.length - 1) * Math.randomundefined));
var i = 0;
document.writeundefined'<ul>');
while undefinedi < relatedTitles.length && i < 20) {
document.writeundefined'<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if undefinedr < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.writeundefined'</ul>');
}
//]]>
</script>

Kodenya panjang, makanya saya pake scroll..
  • Selanjutnya dibawah kode <div class='post-footer-line post-footer-line-1'> atau setelah kode <p><data:post.body/></p> Copas kode berikut:
<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<h2>Related Posts on <b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/></b:if></b:loop> </h2>

<script type='text/javascript'> removeRelatedDuplicatesundefined); printRelatedLabelsundefined); </script>

</div></b:if>
  • Terakhir Save Template

Related Post Thumbnail Linkwithin (Alternatif)


  • Bisa langsung berkunjung ke situsnya disini
  • Langkahnya mudah tinggal masukin email dan URL blog anda dan ikuti saja langkah selanjutnya
  • Berikutnya Copas kode yang didapat dari Linkwithin ke HTML/JavaScript blog anda
  • Save dan selesai..
Note:
  • Pada kode yang berwarna biru silahkan dimodifikasi sesuai selera anda
  • Kalau ada pertanyaan dan sebagainya, silahkan komen di form komentar atau buku tamu
  • Semoga berhasil..!! (cuapek juga sob, tapi it's ok lah yang penting bermanfaat) Happy Blogging :)
Share on Google Plus

About Admin

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.
    Blogger Comment
    Facebook Comment

54 comments:

  1. LinkWithin emang keren sob. Dulu q pernah pake tapi karena membuat loading blog q lelet terpaksa q hapus...

    Salam kenal dr Blog Motivasi | Dani Setiyawan

    ReplyDelete
  2. ok deh sob blog q juga dah aq pasang related article

    ReplyDelete
  3. sip... bagus tutornya.
    sampe bingung mau komen apa :D

    ReplyDelete
  4. Salam kenal ya.
    Kunjungan pertama di blog ini.
    Keuntungan memasang related post bergambar sepeti link within adalah faktor diklik pengunjungnya tinggi jika memang postingan kita bergambar.
    Namun bagi yang tidak bergambar, maka akan terasa hambar :D

    ReplyDelete
  5. manteb sob, salam knal, bnyak ilmu yang bisa digunakan disini

    ReplyDelete
  6. Wah mantep tutorialnya... Tx sobat!

    ReplyDelete
  7. kalo saya lebih suka pake related post yg tanpa thumbnail,coz lebih ringan :)
    thx infonya

    ReplyDelete
  8. kalo saya lebih suka pake related post yg tanpa thumbnail,coz lebih ringan :)
    thx infonya

    ReplyDelete
  9. mas.. lo cara buat related post yang scrol gmn ya.. trims atas kunjungannya..

    ReplyDelete
  10. wah sangat berguna bos.... thx uda mampir di http://milanistisolo1899.wordpress.com/

    ReplyDelete
  11. tutorialny mantabs shob, makasih telah berbagi

    ReplyDelete
  12. @pluma: nanti sy posting di artikel berikutnya y..
    @all: mksih apresiasinya sobat.. happy blogging..

    ReplyDelete
  13. wah tutorialnya yahud ni sob tQ udah sharing... keep blogging....

    ReplyDelete
  14. mantab ni... saya simpan tutornya.. izin ya..

    ReplyDelete
  15. Keren mas ... makasih pencerahannya ... saya bookmark !

    ReplyDelete
  16. wah postingannya sangat menarik dan membantu ni tq for sharing

    ReplyDelete
  17. bermanfaat sekali sob.
    keep post

    ReplyDelete
  18. wah... thnks mas tutorialnya.. keren abis...

    ReplyDelete
  19. mantap lah pko'a...!!!

    ReplyDelete
  20. mantab gan tutornya, makasih dah sharing

    ReplyDelete
  21. artikel yang bermanfaat sob, makasih sharenya...

    komen balik ya, GOOGLE CHROME OS

    ReplyDelete
  22. sipp dah.............,,ane pake yang related psot yang satunya lagi dah,, bukan yang link within

    ReplyDelete
  23. keren sobat....
    memang kita perlu untuk menerapkan related post tersebut...
    tnx sobat...

    ReplyDelete
  24. Wew..tutorial mengenai related post bener² super complete n thx yach...
    saya mau cobain point yang nomor 2 dulu, mudah²an bisa. coz di template saya selalu klo mau di masukan related post suka error...
    ok..c u mas raziq n salam kenal :a:

    ReplyDelete
  25. bener banget tu sob... lebih membuat blog menjadi cantik... lanjutkan postingnya sob.. jangan mudah patah semangat.. hehehe

    ReplyDelete
  26. eh iya, ini memberatkan blog tidak?

    ReplyDelete
  27. Tolong donk gan, Ane Kesulitan untuk bikin Related Post seperti di tutor ini....

    Katanya xml not performed... gitu deh peringatannya,... help ya...!!!

    ReplyDelete
  28. thanks infonya, ane bookmark dulu :x:

    ReplyDelete
  29. :u: izin bookmark. info baru soalnya

    ReplyDelete
  30. keren . boleh dicoba niih . thx ya

    ReplyDelete
  31. :c: lengkap sob... :m: keren....

    ReplyDelete
  32. saya pernah pasang tapi akhirnya tak lepas :)
    milih model sidebar kek di blog mas doyok

    ReplyDelete
  33. pernah pasang nih mas :)
    tapi akhirnya tak lepas milih model yg disidebar kek aku

    ReplyDelete
  34. Bagus sekali tampilan RELATED POST-nya. Menambah pageviews juga.

    Salam ukhuwah

    ReplyDelete
  35. @mas doyok: kalo gtu ijin share dsini y mas tutornya (biar lengkap wkkwkkw)..
    @beda: salam ukhuwah juga sobat..

    ReplyDelete
  36. nice info...thanks...:j:

    ReplyDelete
  37. yang widget dari blogger sendiri ada kan sob. yang seperti ini.

    ReplyDelete
  38. mantafff yang pake gambar..cuma kalo ditampilin banyak2 jadi beban juga...

    ReplyDelete
  39. wah saya baru tau yang soal ginian sob, nice post..hehehe :s:

    ReplyDelete
  40. thanks infonya
    saya pernah memakai ini sob, tapi saya hapus lagi karena blog saya menjadi lambat

    ReplyDelete
  41. tutorialnya sangat bacoba bagus saya coba langsung tp sayang jd berat tampilanya

    paksa deh tak hapus

    o iya mas numpang tanya bagaimana supaya memisahkan halaman depan tidak ikut ketika kita membuka halaman postingan...
    seperti punya mas ini halaman depan penuh tp halaman posting ketika di buka cuma sponsor dan recent post aja yg ikut

    balas ke email saya ya mas
    terima kasih sebelumnya

    ReplyDelete
  42. postingan yang mantap sob.

    Terima kasih telah berbagi.

    ReplyDelete
  43. @adris: nanti saya posting diartikel berikutnya y mas..biar bermnfaat jg bagi yg lain :)

    ReplyDelete
  44. oke, bisa dipraktekkan nih.... :c:

    ReplyDelete
  45. wah yg ini blm ada di blog saya... mu langsung di coba nih... makasih ya..

    ReplyDelete
  46. hasil output nya gimana ya?
    penasaran pingin nyoba tapi aku gak tau utak atik kode HTML

    ReplyDelete
  47. irvan>> kalo gak mo ambil resiko bisa di backup dlu templatenya sob ato bikin blog baru khusus untuk latian kode HTML..

    ReplyDelete
  48. wah bisa di cuba nih... manteb bang....

    ReplyDelete
  49. Wah.. inilah PeeR ane saat ini.. Related Post belom dipasang di blog ane..
    pengen tapi blom sempet, trus ada alternatif lain ga yah selain dengan Javascript ?? misalkan dengan otak atik kode CSSnya barangkali...???

    ReplyDelete
  50. ^^ Maaf , saya baru di dunia blogging ,
    mau nanya , waktu mau nyimpen tempelate , ada tulisan ginian ,,
    Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: The string "--" is not permitted within comments.

    kenapa yaa ??

    ReplyDelete
    Replies
    1. keliatannya ada kode yang salah gan..
      coba ente ulangi lagi dari awal dan jangan sampe salah Copy kodenya..

      Delete