Membuat Widget Related Post dibawah Postingan

Membuat widget related posts sebenarnya tidaklah sulit. Yang terutama diperlukan adalah ketelatenan untuk memasang dan menyimpan kode yang digunakan, terutama xHTML yang harus disimpan di bagian body diantara tag pembuka dan penutup body (<body> dan </body>). Jika anda menginginkan lebih banyak lagi posting dibaca pengunjung, silahkan ikuti panduan cara menggunakannya di bawah ini:

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;
}

]]></b:skin>

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&amp;callback=related_results_labels&amp;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.
Selesai.

Catatan/Keterangan :

Box Related Posts akan terletak di bawah posting.
Untuk merubah jumlah jumlah posting yang ditampilkan dlam widget related posts, rubah nila (angka) 10 yang terdapat di xHTML sesuai jumlah yang diinginkan.

Sumber : http://gubhugreyot.blogspot.com

Thanks for reading Membuat Widget Related Post dibawah Postingan

Blog'e Aji Bintara

Saturday, 21 July 2012

Membuat Widget Related Post dibawah Postingan

Kode CSS :

Javascript :

xHTML :

Your Comments

No comments:

Post a Comment

Labels

Labels

Labels