Beranda  ›  Tutorial Blog

Cara Membuat Related Post dengan List View

by -

Related post merupakan widget recent post yang biasanya kita taruh di bawah postingan, dan hasilnya lumayan buat mempercantik tampilan blog dan menambah trafik. Dengan Related Post, page view terhadap blog kita akan meningkat. Selain itu pengunjung bisa dengan mudah meng-explore konten-konten yang ada dalam blog kita. 

 Menurut para pakar internet, salah satu cara untuk meningkatkan lama waktu pembaca berada di blog kita dan menurunkan bouncing rate adalah dengan menampilkan artikel terkait di bawah kiriman blog kita. Banyak cara yang dapat dilakukan untuk menampilkan artikel terkait di bawah kiriman blog kita. Kita bisa menggunakan jasa linkwithin juga. Berikut artikelnya:
Mari kita menuju ke topic pembahasan Cara Membuat Related Post dengan List View. Jika berhasil nantinya akan terlihat seperti gambar diatas

Pembahasan Related Post dengan List View

Berikut langkah-langkah yang harus dilakukan:
Related:Cara menghemat area blog dengan Multi Tab Widget
1.  Masuk ke akun blogger anda
2.  Masuk ke Template 
3.  Lalu pilih Edit HTML
4. Cari tag atau kode </head> lalu copy paste kode di bawah ini diatas 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;
Related:Mengedit Count Label Blogger menjadi lebih keren
border-top:1px dotted #cccccc;
}
</style>
<script src="http://oemar.googlecode.com/files/Related_post _hack.js" type="text/javascript">

 Keterangan :
*_*  Kode berwarna merah adalah ukuran lebar widget
*_*  kode berwarna orange adalah ukuran font dan jenis font yang digunakan
*_*  kode berwarna biru adalah url gambar pada bagian kiri judul post

5. Cari kode <p><data:post.body/></p> 

Related:Percantik label blog anda dengan CSS
     Jika tidak ada, ini disebabkan oleh kode setiap template berbeda - beda. Anda dapat mencari kode <div class='post-body>. Sebenarnya cara ke 6 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.

6. 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>

 Keterangan :
Related:Membuat menu navigasi seperti blog ini ^_^
*_*  Kode berwarna merah adalah jumlah  posting yang akan muncul

7. Simpan template anda and you're done.

Last Words

Jadi kesimpulannya, related post terbukti menambah traffik blog anda, jadi amatlah wajib jika anda memasang widget ini dibawah postingan. Sekian post tentang Cara Membuat Related Post dengan List View. Jangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI. Maaf bila ada salah-salah kata dan semoga tulisan ini dapat bermanfaat bagi anda :)


Share this

Related Posts

About Contact Disclaimer Privacy Policy Sitemap
close