Modifikasi Cantik Widget Populer Posts Menjadi Animasi Colorful - Hallo sahabat Rumah Musafir Ilmu, Pada Artikel yang anda baca kali ini dengan judul Modifikasi Cantik Widget Populer Posts Menjadi Animasi Colorful, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogspot, Artikel Widget, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Modifikasi Cantik Widget Populer Posts Menjadi Animasi Colorful
link : Modifikasi Cantik Widget Populer Posts Menjadi Animasi Colorful

Modifikasi Cantik Widget Populer Posts Menjadi Animasi Colorful

Bosan dengan tampilan Populer Posts anda yang sekarang? atau mungkin anda ingin widget Populer Posts milik anda kelihatan berbeda dari yang lain. Kebanyakan blogger menggunakan widget populer posts mengikuti widget defult blogger karena takut menambah berat loading blog tersebut. Namun tidak semua widget yang dimodifikasi menjadi berat. Justru ada widget yang terlihat elegan, namun tidak memberatkan loading blog kita.

Salah satunya Widget Populer Posts Animasi Colorful yang digunakan oleh Tutorial Jitu Akhbar Islam. Artikel ini sebenarnya kembali terinspirasi dari sahabat blogger yang bertanya tentang widget populer post di Tutorial Jitu Akhbar Islam ini. Tidak ada salahnya jika saya mencoba memberikan tutorial simple membuat widget populer post ini buat sahabat semua, agar sekiranya bisa bermanfaat untuk design template sobat semua.

Tidak ingin berbicara lama, langsung saja sobat ikuti tutorial step by step berikut ini:

Modifikasi Cantik Widget Populer Posts Menjadi Animasi Colorful

1. Silahkan anda klik menu Template>>Edit Html
2. Tekan Ctrl+f pada keyboard anda, dan cari kode ]]></b:skin>
3. Letakkan atau copy paste kode CSS berikut tepat di atas kode ]]></b:skin>:

/* Custom CSS for Blogger Popular Post Widget */

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts3 img{
    -moz-border-radius: 130px;
    -webkit-border-radius: 130px;
    border-radius: 130px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
padding:4px;
    border:1px solid #fff !important;
    background: #F2F2F2;}#PopularPosts1 img:hover {
    -moz-transform: scale(1.2) rotate(-560deg) ;
    -webkit-transform: scale(1.2) rotate(-560deg) ;
    -o-transform: scale(1.2) rotate(-560deg) ;
    -ms-transform: scale(1.2) rotate(-560deg) ;
    transform: scale(1.2) rotate(-560deg) ;
}

4. Simpan template anda dengan menekan tombol Save template
5. Kemudian pilih menu Layout>>Add a Gadget>>Popular Posts

6. Kemudian Save.

Selesai... Sekarang lihat blog anda apakah sudah berhasil. Jika berhasil ucapkan al-hamdulillah. Jika gagal, silahkan tinggalkan komentar anda di bawah artikel ini. Happy blogging...


Jika anda ingin widget Populer Post anda tanpa judul, silahkan anda baca tutorialnya Judul Widget / Gadget Yang Tidak Boleh Kosong, semoga bermanfaat.

Keyword: Modifikasi Cantik Widget Populer Posts Menjadi Animasi Colorful

Demikianlah Artikel Modifikasi Cantik Widget Populer Posts Menjadi Animasi Colorful

Sekianlah artikel Modifikasi Cantik Widget Populer Posts Menjadi Animasi Colorful kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Modifikasi Cantik Widget Populer Posts Menjadi Animasi Colorful dengan alamat link http://bismillah-go.blogspot.com/2013/05/modifikasi-cantik-widget-populer-posts.html