mas template

Membuat Related Post di Blogspot Versi 1

Related Post merupakan sesuatu yang simple kelihatannya tapi mempunyai efek yang cukup bagus bagi blog kita. Dengan Related Post, pageview terhadap blog kita akan meningkat. Selain itu pengunjung bisa dengan mudah mengeksplore konten-konten yang ada dalam blog kita. Untuk cara membuat related post ini, tentu sudah banyak yang memberikan tutorial dan trik untuk ini. Dan salah satunya bisa dengan cara :
  • Silahkan menuju ke mode Edit HTML anda melalui Dashboard blogger ► LayoutEdit HTML
  • Beri tanda centang pada kotak kecil bertuliskan 'Expand Widget Templates'
  • Cari tag atau kode </head> dan copy- paste kode di bawah ini sebelum kode </head> atau tepat di atas kode </head> .
<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 {
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(&quot;http://1.bp.blogspot.com/_cNpXRtRph18/SpbSRYurg2I/AAAAAAAAD7Q/ GbYNm2feyIQ/rss.png&quot;) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 21px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
#related-posts ul li:hover {
background-color:#E2EBF8;
border-top:1px dotted #cccccc;
}
</style>
<script src='http://oemar.googlecode.com/files/Related_post _hack.js' type='text/javascript'/>
Cari kode <p><data:post.body/></p> . Kode setiap template berbeda - beda. Biasanya kodenya bisa berupa seperti berikut <div class='post-body> atau ada juga yang seperti ini <p><data:post.body/></p> . Sebenarnya kode ini bisa ditempatkan dibagian template yang anda sukai bila anda cukup mengerti tentang coding. Tapi yang pasti cari kode <p><data:post.body/></p> saja dulu. Untuk cara termudah anda bisa menggunakan perintah dengan menekan tombol CTRL+F di keyboard anda dan masukkan kode yang ingin dicari di kotak yang tersedia.

Setelah mendapatkan kode <p><data:post.body/></p> . Copy-paste kode dibawah ini tepat dibawah kode tersebut.
<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><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=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
  • Simpan Template anda .

Related Post anda akan tampak seperti gambar berikut.
Related Post List 
Picture

► Untuk menempilkan link related post sebanyak mungkin ganti angka yang berwarna biru diatas dengan yang anda inginkan.
► Untuk mengganti icon di samping kiri link related post, anda harus mengganti kode URL  gambar yang berwarna merah dengan URL gambar yang anda kehendaki. Anda bisa menggunakan situs penyedia jasa hosting gambar gratis seperti photobucket dan imageshack atau di blogger sendiri di sini.
► Untuk mengganti warna atau style hover ( warna atau style yang muncul di related post ketika disorot oleh mouse ) anda bisa mengutak - atik kode css nya. Tepatnya di kode
#related-posts ul li:hover {
background-color:#E2EBF8;
border-top:1px dotted #cccccc;
}
Bila ingin mengganti warnanya, anda tinggal mengganti kode #E2EBF8 dengan kode warna HTML yang anda kehendaki.

Semoga bermanfaat
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

34 comments:

  1. mau nanya gan ,,,kok saya punya template gak ada data
    post-body.... jd gak bs dipasangin artikel terkait, gmn gan solusix....?

    ReplyDelete
  2. @Taqienchank:
    Cari yg mirip sama kode data:post.body pasti tiap blog ada deh...

    ReplyDelete
  3. punya saya koq ga bisa ya..padahal sudah dijalankan sesuai perintah!!

    ReplyDelete
  4. @wongcilik:
    Coba diperiksa lagi, mungkin ada yang tertinggal. Kalo saya yg salah nanti saya perbaharui lagi.
    Oiya mungkin anda bisa mencopba ini http://www.maskolis.co.cc/2011/06/membuat-artikel-terkait-dengan.html mungkin tampilannya lebih menarik

    ReplyDelete
  5. trima kasih gan.. sukses selalu

    http://rexcarnation.blogspot.com

    ReplyDelete
  6. mas kok saya walaupun udah di save ga bisa, saya udah ikutin langkah-nya saya pake-nya template yang dari Mas template.blogspot.com, persis sama kaya blog mas, mohon pencerahan ya maskolis.

    ReplyDelete
  7. mas mau tanya gimana caranya agar related postnya bisa pake scroll....?

    ReplyDelete
  8. Hi,
    I like your post.

    http://sunilseoservices.blogspot.in/

    ReplyDelete
  9. sukses bos :D
    http://olengkblogs.blogspot.com/2012/07/membuat-related-post-di-blogspot-dengan.html

    ReplyDelete
  10. Hi maskolis,

    I tried this. Tapi kenapa list of article tidak keluar? yg show up cuma tajuknya: :"Don't Miss This." Is it has anything to do with the picture below the post? Please advise. TQ

    -Honeybee

    ReplyDelete
  11. berhasil :) thnks infonya dan tutornya mas :)

    ReplyDelete
  12. terus kalo misal mau bikin yang scrol gmna gan?
    biar simpel,
    coba di tinjau di blog ane,related postnya panjang banget
    http://arry21.blogspot.com

    ReplyDelete
  13. wih,, wih,, mantap mastah,, izin sedot ilmunya..

    ReplyDelete
  14. kang, koq ga' ada file nya di relate post gue,
    cuma ada tanda tanya, itu gimana ?

    ReplyDelete
  15. Bawa'an template mas yg Creating Website 2 , Banyak banget kode DataPostBody nya , heheheh , saya jadi bingung

    http://ahmad-manarul.blogspot.com/

    ReplyDelete
  16. Icon related post nya keren mas, kayak icon feed! :)

    ReplyDelete
  17. mas, punya saya tuh malah kode <data:post.body/> ada 3. tak taruh di atas footer gak kluar. tp klo di taruh di bawah header kluar. Gmn tuh? Wkwkwkw mumet mas :D

    ReplyDelete
    Replies
    1. mas scripnya error yg di Googlecode

      Delete
  18. mas cara bikin menu tutorial blog kayak punya mas gimana ya..... maklum masih pemula......

    http://jongsublog.blogspot.com

    ReplyDelete
  19. mantap banget deh. mau tanya, gmana ya mas kalo bikin menu blog dengan tiap kategori. jadi widgetnya tentang update tulisan tiap kategori

    http://www.insanwisata.com/

    ReplyDelete
  20. after reading so I love this blog article

    ReplyDelete
  21. Masih bingung, harus di baca berulang ulang, hehehhe, makasih artikelnya bagus...

    ReplyDelete
  22. mas, ko di blog saya tidak muncul" ,,, yg ada cuma jdulnya doang (related post ) mohon untuk pengarahan dan bantuannya,
    http://dot-peace.blogspot.com

    ReplyDelete
  23. thanks gan ...
    http://kamalulsoftware.blogspot.com/

    ReplyDelete
  24. thx gan, hanya saja ketika saya coba kok tidak bisa ya gan ?
    template saya pakai yg sederhana bawaan blogcepot. ini ramuan herbal indonesia
    solusi gan ?
    thx lagi

    ReplyDelete
  25. Terima Kasih mas, diobservasi dulu, tapi ini menambah wawasan pastinya.
    http://www.auliabalitour.blogspot.com

    ReplyDelete
  26. saya pasang di blog saya kok gak bisa ya mas? apa js-nya udah expired?

    ReplyDelete
  27. MANTAP GAN KUNJUNGAN BALIK NYA http://hijakbar.blogspot.com/

    ReplyDelete
  28. kalau untuk mengganti warna tulisannya gimana mas.?

    ReplyDelete
  29. Terimakasih atas informasinya gan, salam sukses

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger