- Login ke Blogger
- Beberapa saat setelah login anda akan masuk di halaman "Dasbor (Dasboard)". Silahkan cari dan klik "Rancangan (Design)". Tunggu beberapa saat hingga halaman baru terbuka!
- Klik "Edit HTML".
- Lakukan "Backup Template" terlebih dahulu agar bila terjadi kesalahan template bisa dipulihkan kembali seperti sedia kala.
- Cari kode ]]></b:skin>
- Copy dan kode css berikut tepat di atas kode ]]></b:skin>.
Kode CSS :
#GRrelated-posts{ padding:10px; display:block; clear:both; border-top:5px double #444; border-bottom:5px double #333; margin:15px 0; } h3.GRrelated-post{ border-bottom:3px double #666; font-weight:bold; line-height: 1.2; margin:25px 15px 5px; padding:0 6px; text-transform:uppercase; font-size:14px; } #GRrelated-posts a:hover{ text-decoration:none; } #GRrelated-posts ul{ list-style-type:none; margin:10px 0; padding:0; } #GRrelated-posts li{ background: url('https://lh4.googleusercontent.com/-u0XPRqFBfNU/T1uNTOOsV-I/AAAAAAAAAVQ/t1rX8b1tAwU/s128/gubhugreyot-bullet.png') no-repeat scroll 3px 50% transparent; display:block; list-style-type:none; padding:0 0 0 30px; line-height:20px; margin:0; } #GRrelated-posts li:hover{ background-position:20px 50%; padding-left:35px; }
- Copy dan pastekan javascript berikut di bawah ]]></b:skin>
Javascript :
<script src='http://gubhugreyotprojects.googlecode.com/svn/widgets/GR_related-posts.js' type='text/javascript'></script>
- Klik "Simpan Template (Save Template)".
- Lanjutkan dengan klik "Expan Widget Template"
- Cari kode <div class='post-footer'>. Kode ini ada 2 (dua). Gunakan yang posisinya di atas. Sebagai tambahan imformasi, di atas kode tersebut terdapat kode </b:if>.
- Copy dan paste-kan xHTML berikut di antara </b:if> dan <div class='post-footer'>
xHTML :
<b:if cond='data:blog.pageType == "item"'> <h3 class='GRrelated-post'>Related Posts</h3> <div id='GRrelated-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'></b:if> <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=10"' type='text/javascript'/></b:if> </b:loop> <script type='text/javascript'> var currentposturl="<data:post.url/>"; var maxresults=10; removeRelatedDuplicates(); printRelatedLabels(); </script> </div> </b:if>
Keterangan: pada beberapa template kode berbentuk spt ini:
<p class='post-footer'> - Klik "Simpan Template (Save Template)".
- Buka blog dan lihat hasilnya yang letaknya di atas kolom komentar atau di bawah posting.
- Seeee...le....saiiiiiiiii.....iiiii!!!!
Catatan/Keterangan :
- Box Related Posts akan terletak di bawah posting.
- Untuk merubah jumlah jumlah posting yang ditampilkan dlam widget related posts, rubah nila (angka) yang terdapat di xHTML sesuai jumlah yang diinginkan.
Tidak ada komentar:
Posting Komentar