Cara Membuat Widget Related Posts
Beatdownx - Cara Membuat Widget Related Posts - Hi, the article you are reading is Cara Membuat Widget Related Posts,the information that we present as best as possible. Hopefully the contents of the post
Article Blog, that we wrote according to what you are looking for, useful and can help you. all right, have a nice reading.
Kemarin ada seorang sobat yang bertanya kepada saya, 'bagaimana cara
membuat widget related posts seperti yang saya gunakan pada blog ini'.
Sebenarnya cara membuat widget related posts
sudah pernah saya posting di blog ini, hanya saja memang versi related
posts yang saya gunakan sekarang ini berbeda dengan versi related posts
yang sudah pernah posting di blog ini. .
Sedangkan versi ini, related posts atau artikel yang berhubungan hanya menampilkan judul posting saja (tanpa judul label) dan semua artikel yang berhubungan digabung menjadi satu sehingga mirip dengan widget related posts milik Wordpress. Contoh tampilannya seperti ini:
Bagi anda yang ingin memasang related posts v2 atau related posts ala wordpress silahkan ikuti langkah-langkah dibawah ini:
1. Pada halaman dashboard blogger, buka menu Design -> Edit HTML
2. Beri centang pada "Expand Widget Templates"
3. Cari kode ]]></b:skin>
4. Letakkan kode css berikut diatasnya
6. Letakkan kode javascript berikut diatasnya
8. Jika ada dua kode yang sama, pilih yang pertama
9. Letakkan kode berikut dibawahnya
Teks yang dicetak tebal adalah judul widget dan angka 5 adalah jumlah postingan yang muncul dalam related posts. Silahkan ganti sesuai keinginan
10. Jika sudah, simpan template anda dan lihat hasilnya. Kalau berhasil jangan lupa pencet tombol like dibawah
Cara Membuat Widget Related Posts
Sedangkan versi ini, related posts atau artikel yang berhubungan hanya menampilkan judul posting saja (tanpa judul label) dan semua artikel yang berhubungan digabung menjadi satu sehingga mirip dengan widget related posts milik Wordpress. Contoh tampilannya seperti ini:
Bagi anda yang ingin memasang related posts v2 atau related posts ala wordpress silahkan ikuti langkah-langkah dibawah ini:
1. Pada halaman dashboard blogger, buka menu Design -> Edit HTML
2. Beri centang pada "Expand Widget Templates"
3. Cari kode ]]></b:skin>
4. Letakkan kode css berikut diatasnya
#related-posts { float : left; width : 250px; margin-left : 5px; font-size: 12px; line-height : 1.8em; margin-bottom:10px; } #related-posts a{ color:#4b4b4b; }5. Selanjutnya cari </head>
#related-posts a:hover{ color:#ca1717; }
#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 { margin : 10px 5px 5px 20px; padding : 0; }
6. Letakkan kode javascript berikut diatasnya
<script src='http://hbhost.googlecode.com/files/Related-posts.js' type='text/javascript'/>7. Kemudian cari <p><data:post.body/></p> atau <data:post.body/>
8. Jika ada dua kode yang sama, pilih yang pertama
9. Letakkan kode berikut dibawahnya
<b:if cond='data:blog.pageType == "item"'>Keterangan:
<div id='related-posts'>
<div style='font-size:18px'><b>Related Posts:</b></div>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'/>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if>
</b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>
Teks yang dicetak tebal adalah judul widget dan angka 5 adalah jumlah postingan yang muncul dalam related posts. Silahkan ganti sesuai keinginan
10. Jika sudah, simpan template anda dan lihat hasilnya. Kalau berhasil jangan lupa pencet tombol like dibawah
Article Cara Membuat Widget Related Posts
Thats all Article about Cara Membuat Widget Related Posts for this time, thanks for reading and dont forget to share if this article helps you.