Membuat Related Posts Blogger dengan Efek CSS3

11

Mar 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnQSyseIz7M9OOhJlkkl7zXMSYljoUkfbhS39-aDdjxz59wUYqW0xvrP_Uc0zhfog6sPcXPRbiIeKyhgCMdLQBrM1n1tIBKdF_9A7C7Ggd9o5ifchUCHBt0DXurONptPjKWb_wgbq9R_ag/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfcMFoYVKi4hRLH7LvlT_eKkhgAngNXU5fQd8HMt-tXxJ43mtM8XdG1C1tayPMqfow-Cr7Q6fZT6m4flJDiWSbJhRWEj9lhPAFstCCM4gmd9n_lpDSqgRgQl2oNjwgHi_-7qsxb62LyqOv/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).