Ciptakan Widget Popular Post Dengan CSS3

Membuat Widget Popular Post Dengan CSS3 adalah salah satu cara untuk memodifikasikan Widget Pupolar Post Menjadi Styliz. Dengan Membuat Widget Popular Post bergaya Widget Anda menjadi bergaya. Keunikan Efek dari CSS3 ini ialah Widget ini beranimasi. bagaimana cara kerja dari animasi ini?, Widget ini Dilengkapi Efek Animasi dan Efek Bayangan jika Post di klik. Memasang Efek dengan CSS3 ini juga bisa untuk mempercantik tampilan blog anda dan Pengunjung juga tertarik dengan Tampilan Blog Anda.  Untuk Mempercantik Widget Popular Post salah satunya adalah Memasang Efek ini Pada Widget Pupolar Post. Untuk itu lah dibuat Efek ini, Dan Widget ini Diciptakan oleh salah satu Autor dari BloggingEhow . Jika
Anda Berminat membuatnya Anda Perlu memBack Up Template Anda. Jika sudah, ikutilah cara berikut ini:

• Silahkan Login Ke Blogger Anda.
• Sebelum mengedit HTML anda, Silahkan Anda Tambahkan Widget Popular Post, Jika Sudah, Lewati Langkah ini.
• Setelah itu, Klik Menu Template --> Klik Tombol Edit HTML.
• Lalu, Cari Kode ]]</b:skin> dengan menekan CTRL+F atau dengan F3.
• Masukan Kode Berikut ini Diatas kode ]]</b:skin> :

/*--- YBB Popular Posts Widget Customized--- */
    
.popular-posts .item-thumbnail img:hover {
   opacity: 1;
   /*Reflection*/
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,0.4)));
   /*Glow*/
  -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
-webkit-transform: rotate(-7deg);
    -moz-transform: rotate(-7deg);
    -o-transform: rotate(-7deg);
}
.popular-posts .item-thumbnail img {
  
    border-radius: 100px 100px 100px 100px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    border: 5px solid #eee;
    /*Transition*/
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
 }
.popular-posts ul li {
margin: 12px;
    opacity: 0.8;
    border: 5px solid #eee;
 border-radius: 100px 100px 100px 100px;
    /*Transition*/
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    /*Reflection*/
}
.popular-posts a{
font-size: 13px solid;
}

• Jika Sudah, Klik Tombol Simpan Template.

Selamat Mencoba,

Salam Sukses.

Your-BelajarBLOG