Minggu, Maret 11, 2012

Jika mungkin anda telah menggunakan atau memasang widget (script) related post untuk blogger seperti yang sudah banyak terposting di beberapa blog lainnya, pasti akan terlihat sedikit berbeda dengan yang ada di blog ini. Cobalah untuk menggulung halaman ini turun hingga di bawah posting. Arahkan cursor ke setiap link dan akan terlihat sebuah animasi saat tersentuh cursor. Untuk membuat related posts yang seperti ini anda perlu menambahkan css3 transition serta mengatur padding dan background position yang terpasang pada setiap link.

Kode yang diperlukan untuk membuat related posts blogger dengan animasi yang tercipta melalui css3 transition dapat anda lihat dalam beberapa box berikut:

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://lh3.googleusercontent.com/-JwrOsJL-jP4/T1yD1XepuCI/AAAAAAAAASw/9zWGr5YWaTE/s128/ball.red.png') no-repeat scroll 12px 0 transparent;
      background-size:auto 18px;
      display:block;
      list-style-type:none;
      padding:0 0 0 35px;
      line-height:20px;
      margin:0;
      transition:all 0.8s ease;
      -o-transition:all 0.8s ease;
      -moz-transition:all 0.8s ease;
      -webkit-transition:all 0.8s ease;
      -ms-transition:all 0.8s ease;
}
#GRrelated-posts li:hover{
      background: url('https://lh5.googleusercontent.com/-y40w76_1gfc/T1yD5fk7uOI/AAAAAAAAAS4/V_do9hRxpt8/s128/arrow-gold.png') no-repeat scroll 3px 0 transparent;
      padding-left:45px;
}

Javascript :

<script src='http://gubhugreyotprojects.googlecode.com/svn/widgets/GR_related-posts.js' type='text/javascript'></script>

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>

Cara menggunakan kode related posts :

  • Login ke Blogger.
  • Halaman Dasbor (Dasboard):
    KLik Design (Rancangan)
  • Klik Edit HTML
  • Backup template.
    Karena melakukan perubahan xHTML di bagian body mempunyai resiko terjadi kegagalan yang mungkin menimbulkan kerusakan template, anda harus melakukan proses backup template terlebih dahulu demi keamanan.
    • Klik Download Template Lengkap (Download Full Template)
    • Simpan file template di folder PC.
    • File yang tersimpan ini bisa digunakan untuk memulihkan template seperti sebelum dilakukan modifikasi dengan cara menguploadnya kembali ke blogger dengan cara :
      Klik browse kemudian temukan file yang sebelumnya yelah tersimpan dan lanjutkan dengan klik upload.
  • Kembali di halaman Edit HTML :
    Cari kode ]]></b:skin>
  • Letakkan kode CSS tepat di atas kode tersebut sedang javascript di bawahnya sehingga kode ]]></b:skin> akan berada diantara kode css dan javascript.
  • Klik Simpan Template (Save Template).
  • Jika sudah berhasil tersimpan, lanjutkan kembali dengan klik Expand Widget Template.
  • Cari kode <data:top.authorLabel/>
    Di atas kode ini terdapat beberapa kode lain dengan bentuk seperti berikut:

    <div class='post-footer'>
        <div class='post-footer-line post-footer-line-1'>
          <span class='post-author vcard'>
            <b:if cond='data:top.showAuthor'>
              <data:top.authorLabel/>

    Letakkan xHTML tepat di atasnya.

    <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>
    
        <div class='post-footer'>
        <div class='post-footer-line post-footer-line-1'>
          <span class='post-author vcard'>
            <b:if cond='data:top.showAuthor'>
              <data:top.authorLabel/>


  • Klik Simpan Template (Save Template).

Keterangan :

  • Angka 10 merupakan jumlah posting yang akan ditampilkan di widget related posts. Rubah angka ini sesuai jumlah yang anda inginkan.
  • Jika ingin merubah tampilan related posts, perubahan cukup dilakukan pada kode css.

Related Posts

9 komentar:

  1. bos numpang tanya, bagaimana cara buat show hide back top yang hidden seperti dalam blog anda dibawah sih. terima kasih

    BalasHapus
  2. Thanx untuk informasi nya..
    kunjungi jg blog qu ya http://salemharp.blogspot.com/

    BalasHapus
  3. thanks sharenya sob ...
    http://mat3riku.blogspot.com/

    BalasHapus
  4. Thanks telah berbagi. Namun pada HTML ada pesan error ini : "Kesalahan saat mengurai XML, baris 675, kolom 94: The reference to entity "callback" must end with the ';' delimiter."

    yang merujuk pada snippet xHTML ini :
    ... + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/> ...

    Hohon bantuannya! Saya harus menaruh delimiter (;) disebelah mana?

    BalasHapus
  5. Kesalahan saat mengurai XML, baris 2194, kolom 94: The reference to entity "callback" must end with the ';' delimiter.

    Pada :
    script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/>*/

    BalasHapus


  6. yuk gan gabung di Royalflush99 situs judi poker online texas holdem uang asli rupiah,situs Judi poker online Utama di indonesia yang menggunakan UANG ASLI resmi dan terpercaya ,tanpa bot dan tanpa agen atau admin dengan keuntungan referal 20% serta promo-promo terbaik
    Poker Online Indonesia, Poker Indonesia Online, Poker Online Resmi, Poker Online terpercaya, Judi Poker Online Uang Asli" dan lagi ada promo heboh gan ,
    dan jangan lupa kunjungi juga blog kami http://chaniaj.blogspot.com/

    BalasHapus
  7. situs poker online terpercaya, dewa poker, texas poker, poker club,judi bola online,poker online indonesia, daftar situs poker online indonesia
    poker 88,situs poker online indonesia uang asli,situs poker online terpercaya, dewa poker, texas poker, poker club,poker online indonesia
    nice post....
    article yang menarik untuk dibaca dan bermanfaat...
    maju terus sob,,,
    kunjungi blog saya juga ya sob, http://chaniaj.blogspot.com
    dan kunjungi juga situs kesayangan kami http://www.oliviaclub.com/oliviaclub/index.php
    link alternatif http://www.oliviaclub.net/oliviaclub/index.php
    oliviaclub poker online uang asli indonesia terbaik dan terpercaya
    Poker Indonesia, Indonesia Poker, Poker Online Indonesia
    yuk,,buruan gabung,,ada bonus nya lho,,,,

    BalasHapus

 
Tantytm | Edited by | Tanty Template Modification