--> Cara Membuat Related Post di Sisi Kiri/Kanan Blog seperti Kompas.com | Kumpulan Artikel

Tuesday, December 18, 2012

Cara Membuat Related Post di Sisi Kiri/Kanan Blog seperti Kompas.com

| Tuesday, December 18, 2012
Tutorial ini saya bikin saat memodifikasi salah satu blog saya Artikel Islam. Melihat template nya saya berfikir related post yang sudah terpasang di bawah postingan blog alangkah bagusnya kalau berada tepat di bawah judul blog, di sisi kanan atau kiri postingan seperti yang bisa kita lihat di situs berita Kompas.com. Setelah cari-cari kesana kemari akhirnya ketemu juga solusinya.

Prinsip dasarnya sebenarnya sederhana,
Pertama, memasang related post yang biasa dilakukan oleh para blogger pemula seperti saya di bawah postingan, (dalam hal ini saya ambil turornya dari blog bdigg.blogspot.com
Kedua, memindahkan related post yang sudah terpasang ke sisi kanan/kiri tulisan di bawah judul blog (dalam hal ini saya ambil tutornya dari blog lostsector.blogspot.com

Untuk lebih jelasnya silahkan ikuti langkah-langkah berikut:

1.Log in ke akun Blogger
2.Klik Template
3.Edit Html » Centang kotak Expand template widget.
4.Cari kode </head> (gunakan CTRL + F). Kemudian letakkan kode berikut tepat diatas kode  </head>

<style> #related-posts { float : left; width : 300px; margin-top:2px; margin-left : 5px; margin-bottom:20px; font : 11px Arial;  color:#FF0080;margin-bottom:5px; } #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 { color:#116f9e;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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN3JbQrnRNVb3wIE0Du_R1jObLleWwQwe06yxirOtdqgCFN2LiSLGjXwJ_jgo_UduYtHV9B8_44pH4QZdVICmcj3kbzsuS-dq_8x_CkKiVtNSgJIOaE8OovqGefTXieK5bSNkOtZ53WWc/s320/titik.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 10px; margin-bottom : 5px; line-height : 1.5em; border-bottom:1px dotted #cccccc; } </style> <script src='http://yudatfort.googlecode.com/files/related%20posts%20b-digg.js' type='text/javascript'/>

5.Sekarang cari kode  <div class='post-body entry-content'> atau  <div class='post-header-line-1'/>
 Kemudian letakkan kode di bawah ini tepat di bawah kode tadi.

<div style='float:left; margin : 0px 10px 0px 0px'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='2'><b> TERKAIT : </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>
</div>

Kode Warna merah tersebut adalah perintah untuk menempatkannya di sisi kiri atau kanan. Untuk memindahkan ke kanan tinggal ganti float:left menjadi float:right

6. Save

Note: Untuk ukuran lebarnya bisa diatur sendiri dengan mengganti kode berwarna pink yang berada diatas kode </head>

Selamat mencoba

Related Posts

27 comments:

  1. Bagus banget nih gan kodenya digabungin menjadi sebuah kode baru saya minta izin kodenya dihare di blog saya ya sob nanti saya cantumkan source kodenya dari blog agan :D salam dari b-digg

    ReplyDelete
  2. terimakasih sobat tutorialnya sangat informatif dan berguna bagi saya

    salam
    http://earninspire.blogspot.com/

    ReplyDelete
  3. Kalo untuk navbar kaya KOMPAS.com caranya gimana ya gan?

    ReplyDelete
  4. Galat bro. Yg sukses, ada di blog ku, http://ariefnew.blogspot.com

    ReplyDelete
  5. mantab nian stu re...sukses bae buat kaban ne....

    Info Sehat Kita Semua hari ini,
    http://makalahkitasemua.blogspot.com/

    ReplyDelete
  6. Related posnya seperti di situs berita yang sering saya kunjungi.. langsung saya praktekan mas... makasih tutorialnya :)

    ReplyDelete
  7. Waduh kok tidak bisa yaw. http://masterspiz.blogspot.com/

    ReplyDelete
  8. Susah amat gan copy-nya... cape ngetiknya...!!! SayaGak Bisa Ngopi Code-nya, padahal bagus tuh gan, Ajarin Cara Copynya Dong Gan...!!! Lagi Butuh Nih...!!! Makasih Sebelumnya

    ReplyDelete
  9. mantab gan,,,ijin praktek di blog ane...ditunggu kunbalnya gan :D

    ReplyDelete
  10. keren gan,,tp bingung caranya,,hhahah

    ReplyDelete
  11. cara masangnya giman nih gan,,,kok gk bisa muncul-muncul di blog ane,,hhe

    ReplyDelete
  12. mantap gan,,ane nyimak aja

    ReplyDelete
  13. mantab bang, silahkan mampir
    http://good-news00.blogspot.com

    ReplyDelete
  14. Gan kalau untuk blog wordpres pakai plugin apa ya? mohon bikin tutorialnya gan

    ReplyDelete
  15. kagak berhasil sob,, hadeeehhh

    ReplyDelete
  16. ane kagak berhasil gan, bingung nih dimana salahnya. tapi terima kasih deh informasinya, nanti ane coba-coba lagi dari awal.

    ReplyDelete