Your Ad Here

Membuat Widget Related Posts (Ver 2)

Sebelumnya saya pernah posting membuat widget related posts dengan menggunakan layanan dari BRPS APPSHOT, namun ternyata layanan tersebut terbatas. Terbatas gimana? Gini ternyata layanan related posts dari brps.appshot.com hanya bisa digunakan pada blog yang jumlah artikel per labelnya kurang dari 20 artikel. Jika lebih dari itu akan diblok oleh pihak mereka, seperti kejadian kemaren shevy-blog diblok oleh brps.appshot.com, gara2 Artikel perlabel lebih dari 20 artikel.

Nah untuk itu shevy share tentang bikin related posts yang versi 2. Langkah2nya seperti dibawah ini.
  • Masuk keakun blogger kamu - dari halaman dashboard langsung masuk ke Tata Letak - Edit HTML.
  • Jangan lupa backup dulu template kamu, biar kalo gagal kita masih punya backup template.
  • Centang pada tanda Expand Template Widget.
  • Sekarang cari kode </head> 





    <!--Related Posts Scripts and Styles Start-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style>
    #related-posts {
    float:center;
    text-transform:none;
    height:100%;
    min-height:100%;
    padding-top:2px;
    padding-left:5px;
    }
    #related-posts .widget{
    padding-left:6px;
    margin-bottom:10px;

    }
    #related-posts .widget h2, #related-posts h2{
    font-size: 1.6em;
    font-weight: bold;
    color: black;
    font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
    margin-bottom: 0.75em;
    margin-top: 0em;
    padding-top: 0em;
    }
    #related-posts a{
    color:#006699;
    }
    #related-posts a:hover{
    color:#003366;
    }
    #related-posts ul{
    list-style-type:circle;
    margin:0 0 0px 0;
    padding:0px;
    text-decoration:bold;
    font-size:15px;
    text-color:#000000
    }
    #related-posts ul li{
    background:transparent url(http://2.bp.blogspot.com/_tbHfaj1A058/S0cIGtxWTMI/AAAAAAAAIWs/naYwvQOLV28/s1600/xxz.gif) no-repeat ;
    display:block;
    list-style-type:none;
    margin-bottom: 4px;
    padding-left: 15px;
    padding-top: 0px;}
    </style>
    <script type='text/javascript'>
    var relatedpoststitle=&quot;Related Posts&quot;;
    </script>
    <script src='http://sites.google.com/site/shevybloginc/file/relatedposts.js' type='text/javascript'/>
    </b:if>
    <!--Related Posts Scripts and Styles End-->
Script yang shevy tandai dengan warna putih merupakan judul dari related posts, kamu bisa merubahnya dengan apapun contoh dengan "Artikel Terkait" ato apapun. Sedangkan pada kode http://2.bp.blogspot.com/_tbHfaj1A058/S0cIGtxWTMI/AAAAAAAAIWs/naYwvQOLV28/s1600/xxz.gif, merupakan icon pada list item related posts, kamu juga bisa merubahnya dengan icon kamu. dengan mengganti url diatas dengan url tempat kamu menyimpan iconnya.
  • Selanjutnya cari kode script seperti dibawah ini.

    <div class='post-footer-line post-footer-line-1'>   Ato
    <p class='post-footer-line post-footer-line-1'>
  • Kemudian masukan kode script dibawah ini tepat dibawa kode <p class='post-footer-line post-footer-line-1'>.
      <!-- Related Posts Code Start--> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <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=6&quot;' type='text/javascript'/></b:if></b:loop><a href='' style='display:none'/> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(); </script> </div> </b:if> <!-- Related Posts Code End-->

    • Pada kode yang shevy tandai dengan warna putih var maxresults=5, merupakan jumlah maksimal artikel yang akan ditampilkan pada widget related posts. Silahkan rubah sesuai keinginan.
    Jika sudah jangan lupa Save Template, dan lihat hasilnya. ok selamat mencoba, untuk hasilnya hampir sama dengan related posts punya shevy, cuman beda dikit...