Rabu, 23 Oktober 2013

Cara Buat/Pasang Related Post Dibawah Posting Blog

Cara Buat/Pasang Related Post Dibawah Posting Blog – Sudahkah Anda melihat perubahan pada blog Tips SEO + Blog – PC 123 ini? Yup, saya menambahkan daftar related post (atau artikel terkait) pada bagian bawah/akhir posting blog. Pemasangan daftar related post ini bertujuan untuk menekan angka bounce pada blog saya (intinya agar SEO blog saya makin baik), dan untuk membuat pengunjung blog saya betah berlama – lama di blog saya, hehehe…  Kali ini saya akan membagikan bagaimana cara memasang widget related post dibawah posting blog Anda. Oke, seperti biasa. Sebelum mencoba, silahkan lihat screen-shot-nya dibawah ini :


blog, seo, related post, artikel terkait

Berikut ini cara memasang daftar related post/artikel terkait pada blogger :
1.     Seperti biasa, buka akun Blogger Anda, lalu masuk ke menu Template.
2.     Jangan lupa untuk membuat sebuah backup dari template blog Anda. Lanjutkan dengan mengklik tombol Edit HTML.
3.     Cari kode </head> (Gunakan kombinasi tombol sakti : CTRL+F). Jika sudah ketemu, silahkan copy kode berikut, dan pastekan tepat diatas/sebelum 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("http://3.bp.blogspot.com/-j1s0nzI-nvA/Umd9GdVJ9WI/AAAAAAAABAQ/pmj-lxvzd8M/s1600/icon+bullet.png") 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; } </style> <script src='https://googledrive.com/host/0ByoCwyjwB1aDR2NLTllMaGlHeEk/' type='text/javascript'/>
4.     Jika Anda sudah melakukkan langkah nomor 3, carilah kode <data:post.body/> (seperti biasa, gunakan tombol sakti, CTRL+F). Jika sudah ketemu, copy dan pastekan kode berikut tepat dibawahnya.
Catatan : Kode <data:post.body/> umumnya ada banyak (tergantung pada setiap template). Solusinya, Anda dapat mencoba meletakkan kode berikut pada setiap kode <data:post.body/> yang Anda temui. Jika widget related post tidak mau muncul, hapus kode berikut, dan coba letakkan di kode <data:post.body/> yang lain.
<br/><br/><b:if cond='data:blog.pageType == "item"'><div id="related-posts"><font face='Arial' size='3'><b>Baca Juga : </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>
5.     Terakhir, klik Simpan. Buka blog Anda untuk melihat hasilnya.
Kustomisasi :
-         Anda dapat mengganti tulisan Baca Juga : menjadi tulisan lain. Caranya, ganti tulisan yang berwarna oranye diatas (pada kode nomor 4).
-         Anda juga dapat mengganti icon bullet pada related post. Caranya, ganti url yang berwarna merah pada langkah nomor 3. Untuk menemukan pengganti icon tersebut, Anda dapat mencarinya di situs pencari icon. Usahakan, icon yang digunakan berukuran 16 x 16 px.

Bagaimana? Selamat mencoba tutorial memasang daftar related post/artikel terkait di blog! Jangan segan – segan untuk meninggalkan komentar pada kotak komentar dibawah, dan salam blogger!

Suka Artikel Ini? Yang Share Dapat Pahala Lho... Trims!

7 komentar:

  1. bagus infonya dan pastinya nermanfaat, sy mau nyoba!
    trims ya, salam

    BalasHapus
  2. @Bung Mukhlis : Oke gan, silahkan dicoba! Trims atas komentar dan kunjungannya. Salam blogger... :)

    BalasHapus
  3. mantap master,,izin obrak ambrik dulu ya..!

    BalasHapus
  4. gan ane mw ganti related post yg lama ke yg baru gmn gan? ane soalnya klo masang bgitu, jadi 2 related postnya.

    BalasHapus
  5. gan ane mw ganti related post yg lama ke yg baru gmn gan? ane soalnya klo masang bgitu, jadi 2 related postnya.

    BalasHapus
  6. maaf mas bro bisa di pasang tapi kok jadi lari ke blog orang laen yah yang keluar link artikel orang lain bisa bantu ini blog saya http://bigkomputer2.blogspot.com

    BalasHapus
  7. terimakasih infonya...ijin nyba ya mas.silahkan mampir ke http://rembangteknologi.blogspot.com/

    BalasHapus

Kurang mengerti dengan artikel diatas, ingin menanyakan sesuatu yang kurang jelas atau ingin meninggalkan jejak? Silakan gunakan Kotak Komentar!. Jika Anda ingin meletakkan kode HTML pada kotak komentar, gunakan tools HTML Parser But, remember! Berkomentarlah dengan bahasa yang sopan, tanpa iklan, spam politik, porno, dan hal - hal negatif lainnya. Terima kasih!