Bloggerism.web.id - Cara Menambahkan Widget Popular Post Cantik Di Blog. Pada kesempatan kali ini kami akan berbagi kepada pengunjung blog bloggerism web sebuah tutorial yang berhubungan dengan Widget blog, yaitu memasang atau memodifikasi tampilan Widget Popular Post, yang menariknya widget ini mempunyai fitur penomoran secara otomatis artinya anda tidak perlu repot-repot membuat nomor secara manual, dan juga akan secara otomotis menyesuaikan bentuk dan sususanannya sehingga tampilannya akan lebih menarik. Sebelumnya kami pernah membuat tulisan tentang cara menambahkan Widget Print dan Widget Sosial Share Cantik, silahkan dilihat untuk mengetahuinya lebih lanjut.
Kelebihan dari widget yang satu ini selain yang kami sebutkan diatas juga mempunyai fitur auto hide snippet pada tampilannya yang hanya akan muncul ketika pengunkung menyorot pada bagian judul dari widget ini, yang kebanyakan pada widget popular post sebelumnya snippet akan tampil secara langsung.
Widget ini seratus persen menggunakan CSS yang artinya tidak akan menambah beban loading pada blog atau situs web anda.
Sebagai pengetahuan bersama bahwa Widget Popular Post ini adalah bagian yang juga sangat penting dari blog milik kita, karena dapat membantu pengunjung dalam menemukan artikel yang paling sering dilihat atau dibahas didalm blog milik kita.
Secara umum widget ini akan menampilkan postingan berdasarkan frekuensi jumlah tampilan pada suatu blog dengan demikian widget ini akan menampilkan postingan yang paling merik perhatian pengunjung sepanjang masa.
Cara memsang widget popular post dengan penomoran otomatis diblog bisa anda lakukan dengan mudah, dan untuk bahan petunjuknya kami akan tuliskan langkah-langkahnya dibawah ini;
Simpan template dan selesai.
Original Konten: ditulis oleh Admin www.bloggerism.web.id Jumat,04 Desember 2015 ( Do Not Copy ! )
Kelebihan dari widget yang satu ini selain yang kami sebutkan diatas juga mempunyai fitur auto hide snippet pada tampilannya yang hanya akan muncul ketika pengunkung menyorot pada bagian judul dari widget ini, yang kebanyakan pada widget popular post sebelumnya snippet akan tampil secara langsung.
Widget ini seratus persen menggunakan CSS yang artinya tidak akan menambah beban loading pada blog atau situs web anda.
Sebagai pengetahuan bersama bahwa Widget Popular Post ini adalah bagian yang juga sangat penting dari blog milik kita, karena dapat membantu pengunjung dalam menemukan artikel yang paling sering dilihat atau dibahas didalm blog milik kita.
Secara umum widget ini akan menampilkan postingan berdasarkan frekuensi jumlah tampilan pada suatu blog dengan demikian widget ini akan menampilkan postingan yang paling merik perhatian pengunjung sepanjang masa.
Cara memsang widget popular post dengan penomoran otomatis diblog bisa anda lakukan dengan mudah, dan untuk bahan petunjuknya kami akan tuliskan langkah-langkahnya dibawah ini;
Cara memasang widget Popular Post dengan penomoran otomatis di blog.
Masuk ke panel dasbor blogger kemudian letakan css dibawah ini atau ganti semua css Popular Post yang sudah ada di blog anda..PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{list-style:none;border:none;background:none;outline:none;margin:0;padding:0}
.PopularPosts ul{list-style:none;font-family:'Roboto',Sans-Serif;font-size:13px;color:#919392;margin:.5em 0}
.PopularPosts ul li img{display:block;width:50px;height:auto;float:left;margin:0 15px 0 0; border: 1px solid silver;padding: 2px;}
.PopularPosts ul li{background-color:#eee;counter-increment:num;position:relative;margin:0 10% 0 0;padding:10px}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a{font-weight:700;font-size:13px;color:#919392;text-decoration:none;transition:.5s linear; font-family: Open Sans;}
.PopularPosts ul li:before{content:counter(num);display:block;position:absolute;background-color:rgb(246, 110, 25);color:#fff;width:20px;height:20px;line-height:18px;text-align:center;bottom:0;right:0;margin-top:15px;transition:.5s linear; border-radius: 10%;font-size: 14px;}
.PopularPosts ul li:nth-child(1),.PopularPosts ul li:nth-child(2),.PopularPosts ul li:nth-child(3),.PopularPosts ul li:nth-child(4),.PopularPosts ul li:nth-child(5),.PopularPosts ul li:nth-child(6),.PopularPosts ul li:nth-child(7),.PopularPosts ul li:nth-child(8),.PopularPosts ul li:nth-child(9),.PopularPosts ul li:nth-child(10){background:#fff;color:#B1B2B1; border-bottom:1px solid #eee;transition:all .5s linear;}
PopularPosts ul li:last-child{border-bottom:none;}
.PopularPosts ul li:hover:nth-child(1),.PopularPosts ul li:hover:nth-child(2),.PopularPosts ul li:hover:nth-child(3),.PopularPosts ul li:hover:nth-child(4),.PopularPosts ul li:hover:nth-child(5),.PopularPosts ul li:hover:nth-child(6),.PopularPosts ul li:hover:nth-child(7),.PopularPosts ul li:hover:nth-child(8),.PopularPosts ul li:hover:nth-child(9),.PopularPosts ul li:hover:nth-child(10){background-color:#fafafa;transition:all .5s linear;}
.PopularPosts ul li:hover .item-title a{color:#A80707;transition:all .5s linear;}
.PopularPosts ul li:hover:before{background-color:#A80707;color:#fff;transition:all .5s linear;}
.PopularPosts .item-thumbnail{float:left;margin:0 0 0 0;}
.PopularPosts ul li .item-snippet {display:none;visibility:hidden;opacity:0;font-size:11px;color:#363535;transition:all .5s linear; font-family: Open Sans;}
.PopularPosts ul li:hover .item-snippet {display:block;visibility:visible;opacity:1;transition:all .5s linear;} Simpan template dan selesai.
Penutup
Semoga Trik cara memasang widget popular post dengan penomoran otomatis ini dapat bermanfaat bagi anda, selamat mencoba dan semoga sukses, "Salam Bloggerism".Original Konten: ditulis oleh Admin www.bloggerism.web.id Jumat,04 Desember 2015 ( Do Not Copy ! )
Disqus Comment