Modifikasi Tampilan Widget Popular Post di Sidebar

Oleh Unknown

Sabtu, 17 Oktober 2015

Bagikan :

Tweet

Cara memperindah atau mempercantik Tampilan Desain Widget popolar post di Sideabr blog.
Widget popolar posts meruapakan salah satu navigasi menu internal link. Berisi daftar tulisan yang banyak dibaca (dikunjungi).

Banyak sekali beberapa gaya model widget poplularpost, mulai yang sederhana , hingga yag warna warni. Atau kalau ingin membuat kode warna warni lainnya silahkan googling Kw "Popular Post Widget Style".. maka akan muncul tutorialnya.

Dalam atikel ini akan saya share cara modifiaksi widget popular post. Sebagaimana yang diterapkan di Blog Kang Romel.

Bagaimana Memepercantik Desain Widget Popular Post

1. Template > Edit HTML
2. Copy paste kode berikut diatas kode  ]]></b:skin> atau </style>

/* Simple Stylish Popular Post Widget */
#PopularPosts1 h2{position:relative;padding:8px 10px 6px 10px;width:100%;margin-bottom: 5px;font-size:17px;color:#757575; text-align:left;}
#PopularPosts1 ul{list-style:none;counter-reset:li;padding:10px;left:-8px;width:90%;margin:0 15px}
#PopularPosts1 li{ width:100%;position:relative;left:0;margin:0 0 1px 12px;padding:4px 5px;}
#PopularPosts1 ul li:before{content: counter(li);counter-increment: li;position: absolute; left: -30px;top: 50%;margin-top: -13px;background: #777; height: 1.9em;width: 2em;line-height: 2em;text-align: center;font-weight: bold;color: #fff;font-size: 14px;}
#PopularPosts1 ul li:after{position: absolute;content: '';left: -2px;margin-top: -.7em; top: 50%;width: 0;height: 0;border-top: 8px solid transparent;border-bottom: 8px solid transparent;border-left:10px solid #777;
/* background color of the right arrow*/}
#PopularPosts1 ul li a{color:#282b2b;text-decoration:none;font-size:14px;font-weight: 400;}
#PopularPosts1 ul li {position: relative;display: block;padding: .4em .1em .4em .8em;*padding: .4em;margin: .5em 0 .5em 0.4em;background: #fafafc;transition: all .3s ease-out;text-decoration:none;transition: all .1s ease-in-out;}
#PopularPosts1 ul li:hover{background: #eee; /* Background color on mouseover */}  
#PopularPosts1 ul li a:hover{color:#444; /* Link color on mouseover */margin-left:3px;}.

3. Klik Save Templates.

Setting.. Setelah semua kode terpasang, Jika widget popular post Anda belum ada, Maka pasang dulu, dengan cara
"Layout">Add a Gadget> pilih popular Post.
Lakukan setting seperti gambar ini, ingat dibagian "show" jangan centang apapun.

Sumber

Tag : Desain, Desain Blogspot