Cara Membuat Widget Popular Post 2015, Popular post yang akan saya bagikan kali ini sedikit berbeda dengan popular post pada umumnya, dimana tampilannya hampir sama dengan Recent Post yang digunakan oleh Mas Sugeng pada template Evo Magz.
Recent Post yang digunakan oleh Mas Sugeng pada salah satu templatenya tersebut menggunakan 1 Thumbnail yang besar dan diikuti oleh item artikel dengan thumbnail lainnya yang kecil. Sama halnya dengan Widget Popular Post kali ini namun widget yang satu ini hanya bersetuhan dengan CSS tidak menggunakan kode lainnya seperti JavaScript.
Jika sobat ingin memasangnya pada Blog, silahkan ikuti Tutorial berikut :
1. Terlebih dahulu, tambahkan widget Popular Post di Blog Sobat
2. Kemudian simpan CSS berikut sebelum
]]></b:skin> atau
</style>
.PopularPosts .item-thumbnail{margin:0}
.PopularPosts .widget-content ul{margin:0}
.PopularPosts .item-title a{text-decoration:none;font-size:14px;color:#777}
.PopularPosts .item-title{padding-bottom:.4em}
.PopularPosts .item-title a:hover{color:#f88c00}
.PopularPosts .item-snippet{font-size:12px;line-height:1.6em;color:#777;padding-top:10px}
.PopularPosts img{width:100%;height:100%}
.PopularPosts .widget-content ul li{padding:.4em 0}
.PopularPosts li .item-snippet{display:none}
.PopularPosts li .item-thumbnail{float:right;margin:0;padding:0;border:none;display:inline;width:120px;height:62px;overflow:hidden}
.PopularPosts li:first-child .item-thumbnail{width:100%;height:190px;overflow:hidden;margin-bottom:20px}
.PopularPosts li:first-child .item-content{position:relative}
.PopularPosts li:first-child .item-thumbnail,.PopularPosts li:first-child .item-snippet{display:block}
.PopularPosts li:first-child .item-title a{font-size:20px;line-height:1.3;position:absolute;top:50px;width:75%;left:20px;color:#fff;background-color:rgba(248,140,0,0.82);padding:15px}
.PopularPosts li:first-child .item-snippet{display:none}
3. Save
Demikian
Cara Membuat Widget Popular Post 2015, semoga bermanfaat.
ADS HERE !!!