Widget Popular Post Yang Menakjubkan Terbaru

Widget Popular Post merupakan widget bawaan blogger. Widget ini menampilkan list posting yang paling sering di baca oleh pengunjung per minggu, bulan atau sepanjang waktu. Bentuk dasar widget ini menampilkan thumbnail posting, ringkasan posting dan judul posting. Untuk membuat widget Default blogger ini terlihat lebih stylish, kita akan menambahkan sedikit kode CSS. Kenapa kita harus tambahkan kode CSS? Untuk membuat widget ini berwarna-warni (Seperti widget popular post sebelumnya), supaya daftar posting di atur menggunakan nomor dan supaya terbentuk efek hover pada gambar atau thumbnail.

Cara membuat widget popular post lebih stylish

• Pasang terlebih dahulu widget popular post
• Setelah itu pilih template dan Edit HTML
• Cari kode ]]></b:skin> dan letakkan kode berikut di atas kode ]]></b:skin>

<!-- Popular posts multi colored tutorialblogspot.com -->
#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:97%}
#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;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:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 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;
}
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}
<!-- popular posts multicolored tutorialblogspot.com -->

• Save Template.

Jika posting ini bermamfaat buat sobat blogger, jangan lupa untuk membagikan posting ini ke lingkaran sobat di situs jejaring sosial Google+

Description: Widget Popular Post Yang Menakjubkan Terbaru Rating: 4.5 Reviewer: Unknown - ItemReviewed: Widget Popular Post Yang Menakjubkan Terbaru

Ditulis Oleh : Unknown ~ Berbagi Itu Indah

Terima kasih telah membaca artikel tentang Widget Popular Post Yang Menakjubkan Terbaru. Kata Mas Dewa, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya yah.. <a href="http://lastyhandayani.blogspot.com/2014/08/widget-popular-post-yang-menakjubkan.html" target="_blank">Widget Popular Post Yang Menakjubkan Terbaru</a>