Membuat Widget Popular Posts Keren Dengan CSS

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.......

SHARE

Unknown

• 
• 
• 
• 
•