Membuat Widget Popular Posts Keren Dengan CSS -
Ghiyats Blogs | Pada kesempatan kali ini akan saya bagikan sebuah artikel yang berhubungan dengan
Widget Popular Posts, Widget ini Berbeda sama Widget Populer posts lainnya Karena Widget ini dengan Nomor dan Nomor Urut dari yang Paling di Kunjungi.
Widget ini juga memiliki tampilan yang pastinya keren dan elegan, Dan Tidak menambah berat dan Loading blog kita, Kalau begitu, Langsung saja kita Coba Cara Membuatnya Dan Tutorianya seperti ini.
Membuat Widget Popular Posts Keren Dengan CSS
--------------------------------------------------------------------------------------
- Masuk Ke Blogger.com, Dengan Akun anda
- Setelah Berada di Dasbor Blogger, Sekarang menuju ke ''Template''
- Klik ''Edit HTML''
- Cari kode ]]></b:skin ,Setelah ketemu Masukan kode dibawah ini di atas/sebelum kode Tersebut
.popular-posts ul li a {
background: none repeat scroll 0 0 #222222;
color: #FFFFFF;
display: block;
margin: 10px 0;
padding: 25px 15px 30px;
position: relative;
text-decoration: none;
transition: all 0.3s ease-out 0s;
width: 85%;
}
.popular-posts ul li a:before {
background: none repeat scroll 0 0 #2DB3E9;
color: #FFFFFF;
font-weight: 700;
height: 2em;
line-height: 2em;
margin-left: 88%;
padding: 4px;
position: absolute;
text-align: center;
width: 2em;
transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
}
.popular-posts ul li a:hover {
opacity: 0.8;
}
.popular-posts ul li a:hover:before {
border-left-color: #CCCCCC;
left: -1px;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before {
content: "10";
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before {
content: "9";
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before {
content: "8";
}
.popular-posts ul li:first-child + li + li + li + li + li + li a:before {
content: "7";
}
.popular-posts ul li:first-child + li + li + li + li + li a:before {
content: "6";
}
.popular-posts ul li:first-child + li + li + li + li a:before {
content: "5";
}
.popular-posts ul li:first-child + li + li + li a:before {
content: "4";
}
.popular-posts ul li:first-child + li + li a:before {
content: "3";
}
.popular-posts ul li:first-child + li a:before {
content: "2";
}
.popular-posts ul li:first-child a:before {
content: "1";
}
.item-snippet {
display: none;
}
.PopularPosts .item-thumbnail {
display: none;
}
- Setalah Itu, Klik ''Simpan Template''
Begitulah Artikel ini Gimana Mudah kan ? Kalau Sobat Masih Binggung atau sobat Punya Pendapat Tentang Artikel ini , Silakan Bertanya di Kolom Komentar di Bawah ini, Semoga artikel ini Bermanfaat dan mudah untuk di Pratekkan,
Terima Kasih.......
Via : All Blogger Tricks
Keep Blogging
