Cara memperindah atau mempercantik Tampilan Desain Widget popolar post di Sideabr blog.Widget popolar posts meruapakan salah satu navigasi sajian internal link. Berisi daftar goresan pena yang banyak dibaca (dikunjungi).
Banyak sekali beberapa gaya model widget poplularpost, mulai yang sederhana , sampai yag warna warni. Atau bila ingin menciptakan instruksi 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 instruksi berikut diatas instruksi ]]></b:skin> atau </style>
/* Simple Stylish Popular Post Widget */3. Klik Save Templates.
#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;}.
Setting.. Setelah semua instruksi terpasang, Jika widget popular post Anda belum ada, Maka pasang dulu, dengan cara
"Layout">Add a Gadget> pilih popular Post.
Lakukan setting menyerupai gambar ini, ingat dibagian "show" jangan centang apapun.
Sumber
Sumber http://contohblogspotnih.blogspot.com/