Trick n Tips Blogger | Widget Blogger | Template Blogger

Ciptakan Widget Popular Post Dengan CSS3

by Irsyad Aslam , at 2/13/2013 , has 0 komentar
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
Irsyad Aslam
About
Ciptakan Widget Popular Post Dengan CSS3 - written by Irsyad Aslam , published at 2/13/2013, categorized as Efek , Widget . And has 0 komentar
0 komentar Add a comment

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