Pasang related posts atau biasa kita sebut dengan artikel terkait, maksudnya artikel yang muncul bersama dengan postingan kita yang sama kategorinya atau labelnya. Pertama kali saya memasang related posts ini sangat mengejutkan saya hanya beda tanda ' dan ’ bisa membuat saya pusing. Hingga saya ulang pemasangannya berkali-kali dan selalu error. Ketika saya perhatikan, semua cara yang disajikan oleh para blogger itu sudah sesuai dengan tuntunan mereka.
Scrip pertama di atas ]]></b:skin> saya pasang kemudian saya preview tampilan normal, berarti aman.
Scrip kedua di atas </head> saya pasang saya preview lagi ada peringatan bla bla bla error pokoknya ada kalimat template tidak dapat diparse . . . . . . . wah mungkin scrip ketiga belum dipasang pikir saya.
Kemudian saya pasang scrip ke tiga tetap juga peringatannya sama. Hingga akhirnya saya klik bersihkan edit / saya batalkan. Hingga berulang kali.
Berikutnya saya pasang lagi hingga langkah kedua saya perhatikan scrip-nya
<script src=’http://hbhost.googlecode.com/files/Related-posts.js’ type=’text/javascript’/>
saya ubah dengan
<script src='http://hbhost.googlecode.com/files/Related-posts.js' type='text/javascript'/>
Perhatikan tanda berwarna merah, ada perbedaankan, kemudian semua saya seperti tanda pada scrip yang ke dua di atas. Sebelum saya simpan templatnya, saya preview dulu, eh ternyata berhasil. Akhir lanjut deh, saya simpan. Nah, sekarang saya mau berbagi ilmu kepada para blogger pemula yang ingin memasang related posts.
Sengaja semua scrip saya format dengan huruf itu, bukan apa-apa sih. Ini hanya semata-mata sambil belajar scrip kita juga tahu di mana letak kesalahannya, kalau kita belajar dari kesalahan itu merupakan pengalaman yang luar biasa yang tidak dapat digantikan.
Jangan khawatir jika salah, hal ini sudah saya buktikan dengan cara di atas, waktu pemasangan semua sesuai yang saya anjurkan sebaiknya preview dulu, jika error, bersihkan edit, dan ulangi pemasangannya.
Tampilan Related Posts
Langkah-langkah membuat related post di bawah 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; }
#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; }
#related-posts a{ color:#4b4b4b; }
#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; }
5. Selanjutnya cari </head>
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"’>
<div id=’related-posts’>
<div style=’font-size:14px’><b>Mungkin Lebih Baru</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>
<div id=’related-posts’>
<div style=’font-size:14px’><b>Mungkin Lebih Baru</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>
Keterangan:
Teks yang dicetak tebal adalah judul widget dan angka 5 adalah jumlah postingan yang muncul dalam related posts. Silahkan ganti sesuai keinginan
Teks yang dicetak tebal adalah judul widget dan angka 5 adalah jumlah postingan yang muncul dalam related posts. Silahkan ganti sesuai keinginan
4 komentar:
kunjungan balik mas ya, jgn lupa kunjungi blog saya. thanks
jgn lupa ikut juga bergabung di situs pertemanan saya, situs pertemanan derbynadia. situs ini seperti facebook. di www.derbynadia.com
OK, say, kok sulita gue mASUK YA
Maaf kawan baru bisa membalas kunjungannya... Artikel punyaku dan punyamu membahas hal yang sama. Pertanyaan sobat sudah saya jawab dalam artikel pada blogku. Berhubung sekalian BW aku jawab disini juga gak apa-apa kan? bagian head itu antara tag <head> dan </head>
Posting Komentar
Mohon gunakan kata-kata yang sopan dalam memberikan komentar.
Komentar SPAM, SARA dan sejenisnya tidak akan di tampilkan.