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>
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/
/* 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/
#PopularPosts1 ul li a:hover{color:#444; /* Link color on mouseover */margin-left:3px;}. 3. Klik Save Templates.
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/
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/
Related Posts
- Cara Menambahkan/Embeda Comment Box Dibawah Posts Blogger Cara Menambahkan/Embeda Comment Box Dibawah Posts Blogger Membuat kotak komentar dibawah posting blogger yakni trik yang sangat cantik kenapa ? seb ...
- Membuat Form Kontak (Halaman Statis) Blog Cara Membuat Form Kontak (Halaman Statis) Blog Blog Anda belum menyiapkan widget "Formulir Kontak: untuk dipasang di sidebar Blog atau di halaman S ...
- Cara Menambahkan Warna Gambar Latar Belakang Posting GambarMenambahkan warna diatas gambar latar belakang blog atau postingan gambar. Hal ini kan menciptakan gambar lebih indah dan beberapa desainer blog mewr ...
- Membuat Ikon Media Umum Sederhana Di BlogspotSetiap link Daftar Widget dengan $ type=social_icons dan dalam judul akan menjadi daftar ikon sosial kalau template Anda terintegrasi Blogger sosial ...
- Cara Menghapus Atau Menghilangkan Judul & Gambar Thumbnail Di Halaman StatisCara menghapus atau menghilangkan, menyembunyikan Judul pages dan gambar feature Image Thumbnail di halaman statis. Biasanya muncul judul halaman la ...
- Menghilangkan Navbar Di Blogger Dengan MudahMenghilangkan Navbar di Blogger dengan Mudah, disini aku memiliki beberapa cara untuk menghilangkan atau menyeembuyikan dari halama atau dengan cara ...
