3/21/2013

Cara Menambahkan Efek Berputar Dengan Efek Bayangan Pada Popular Post

Menambahkan Efek ini adalah efek yang berputar dan dilengkapi dengan efek bayangan. Efek ini muncul jika kursor diarahkan pada gambar Widget Popular Post, seperti efek gambar saya. Widget ini juga mudah dipasang, tidak membutuhkan waktu yang lama untuk memasangnya. Efek ini Cocok untuk dipasang agar bisa menghiasi Widget popular post. Untuk Memasangnya Anda Perlu Mengedit Template HTML anda, Ikutilah Cara Berikut ini :


  • Silahkan Login Ke Blogger Anda.
  • Setalah itu, Klik Menu Template, Sebelum Mengedit Terlebih Dahulu Untuk Membackup Template Anda, Lalu Klik Tombol Edit HTML.
  • Cari Kode ]]></b:skin> dengan menekan CTRL+F atau dengan F3.
  • Masukan Kode Berikut ini diatas kode ]]></b:skin> :
/*-----Efek Berputar Dan Bayangan by YBB (http://your-belajarblog.blogspot.com)----*/
#PopularPosts1 { max-width: 300px}
#PopularPosts1 dd { float: left; border-bottom: none; margin: 8px 8px 0 8px; background: none; display: block; padding: 0}
#PopularPosts1 img { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; padding: 4px; background: #eee; background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa)); background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7); -moz-box-shadow: 0 0 3px rgba(0,0,0,.7); box-shadow: 0 0 3px rgba(0,0,0,.7);}
#PopularPosts1 img:hover { -moz-transform: scale(1.2) rotate(-350deg); -webkit-transform: scale(1.2) rotate(-350deg); -o-transform: scale(1.2) rotate(-350deg); -ms-transform: scale(1.2) rotate(-350deg); transform: scale(1.2) rotate(-350deg); -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1); -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1); box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}

  • Setelah itu, Klik Tombol Simpan Template.

Selamat Mencoba,
Salam Sukses,



Your-BelajarBLOG

5 comments:

  1. makasih informasinya.. saya akan coba praktekan

    ReplyDelete
    Replies
    1. Iyah Sama-Sama,
      Silahkan Dicoba,

      Salam Sukses,
      Your-BelajarBLOG

      Delete
    2. mantap gan.. gan, mau request boleh ngga? saya au request cara buat icon "read more" berputar. kaya dipreview blog ini contohnya http://animenarutouniqx.blogspot.com/. plis bantu gan

      Delete
    3. Iyah,
      Nanti Lain Waktu Saya Tuliskan Tutorialnya.

      Salam Sukses,
      Your-BelajarBLOG

      Delete
    4. Sudah Kami Buatkan Tutorialnya,
      Silahkan Lihat Tutorialnya:
      http://your-belajarblog.blogspot.com/2013/04/cara-membuat-auto-read-more-berputar.html .

      Selamat Mencoba,
      Your-BelajarBLOG

      Delete

Catatan:

• Dilarang Menaruh Link Aktif
• Dilarang Nyepan/Promosi Di Komentar
• Dilarang Berkata Tidak Sopan
• Untuk Menyisipkan Kode, Gunakan Tag <i rel="code">... KODE ...</i>
• Untuk Menyisipkan Kode Panjang, Gunakan Tag <i rel="pre">... KODE ...</i>
• Untuk Menyisipkan Catatan, Gunakan [catatan].. TEKS ...[/catatan]
• Untuk Menyisipkan Gambar, Gunakan [img]URL GAMBAR[/img]

Sebelum Menyisipkan Kode Harap Konversi Kode Sebelum Menuliskan Di Komentar