Trick n Tips Blogger | Widget Blogger | Template Blogger

Cara Menambahkan Efek Berputar Dengan Efek Bayangan Pada Popular Post

by Irsyad Aslam , at 3/21/2013 , has 5 komentar
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
Irsyad Aslam
About
Cara Menambahkan Efek Berputar Dengan Efek Bayangan Pada Popular Post - written by Irsyad Aslam , published at 3/21/2013, categorized as Efek , Widget . And has 5 komentar
5 komentar Add a comment
makasih informasinya.. saya akan coba praktekan
Iyah Sama-Sama,
Silahkan Dicoba,

Salam Sukses,
Your-BelajarBLOG
Delete
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
Iyah,
Nanti Lain Waktu Saya Tuliskan Tutorialnya.

Salam Sukses,
Your-BelajarBLOG
Delete
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
Reply 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

Bck
Cancel Reply

Followers

Komentar Terbaru

Copyright ©2013 Your-BelajarBLOG by
Theme designed by Damzaky - Published by Proyek-Template
Powered by Blogger