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/AVvXsEjYXXSGb5_zx55HHkO_59FSqc1WOoAd7mttWkaijBKmKeY6Qimnwzpm-RbIPPkbq49gyuUJNGVLwUYxzM9U47vhAQLNzr9dTDb1rDlZd58JT-WwpQYPkX-ju7iyB5r9k9TArZmwXrsggB-X/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/AVvXsEjAmExkbWPnoE_tmG42apYdE2t6DKmFeIb5XhzYq27jBjEteE9wvfy_6omlZoAlOC15ERfHU1SuyFMGmocqku9AL6pnAsH2zf9poS96a3xp2g-kEpqIsLf4FMVH6c_oBU77CyHwiuZZ_NHj/s128/arrow-gold.png') no-repeat scroll 3px 0 transparent;
      padding-left:45px;
}

dan selesai.. selamat mencoba???