Bagi blogger yang ingin loading blognya terasa ringan dan cepat, ada banyak cara yang bisa dicoba. Salah satunya yaitu mendesain templatenya seminimalis mungkin sehingga beban loading blog lebih ringan dan lebih cepat saat diakses. Selain itu, mengurangi jumlah gambar juga dinilai cukup ampuh untuk membuat blog anda semakin ringan. Oleh karenanya, tidak heran jika kini banyak dijumpai template blog yang tidak menyertakan gambar pada tampilan muka beranda (home) nya.
Jika desain template blog anda kebetulan seperti itu, maka tampilan widget yang hendak anda tambahkan juga mesti disesuaikan agar tetap sesuai pakem yang ingin anda anut. Salah satu widget yang sering dipasang di blog yaitu widget artikel populer, bagaimana membuat widget popular post simpel tanpa gambar tapi tetap keren dan menarik?. Pada postingan kali ini, saya akan coba berbagi cara membuat/ memodifikasi widget popular post agar tetap keren meski tanpa gambar. Tampilan widgetnya akan seperti di bawah ini:
Widget artikel populer memang cukup penting keberadaannya. Selain mempercantik tampilan blog, widget ini juga berfungsi untuk kelengkapan navigasi blog dan memberi tahu pengunjung akan postingan-postingan favorit pembaca di blog tersebut. Widget ini biasanya diletakkan di bagian sidebar blog agar lebih mudah terlihat oleh pengunjung. Langsung saja, berikut ini kita akan coba belajar memodifikasi tampilan widget popular post simpel keren di blog.
- Title: silahkan anda isikan dengan Artikel Populer, Popular Post, atau semacamnya.
- Most Viewed: silahkan pilih sesuai jangka waktu yang anda inginkan.
- Show: kotak dikosongkan saja, untuk display pilih sesuai jumlah judul artikel yang anda kehendaki.
/* Popular Post */ #PopularPosts1 ul{list-style-type:none;margin:0;padding: 0} #PopularPosts1 img{float:left;margin-right:10px;width:72px;height:75px;display: block;transition:all .3s ease-in-out} #PopularPosts1 ul li {padding:8px 0 11px !important;margin:0; list-style: none; border-bottom: 1px solid #e9e9e9;font-size:11px;line-height: normal;} #PopularPosts1 ul li:first-child { border-top:none; } #PopularPosts1 ul li:last-child { border-bottom:none; } #PopularPosts1 a:link, #PopularPosts1 a:visited, #PopularPosts1 a:active {font-size:13px; color: #016FBA !important; display: block;font-weight:bold;padding:0 !important;margin:0 !important;line-height:1.4em} #PopularPosts1 a:hover {color:#c00 !important; text-decoration: none;} .PopularPosts h2 {padding:10px;margin:-15px 0 0 0;background:#222;color:#ff9;} .popular-posts ul{padding-left:0;counter-reset:trackit} .popular-posts ul li{border-bottom:1px solid #f0f0f0;list-style:none outside none!important;margin-left:0!important;overflow:hidden;padding:10px 0!important;transition:all .25s linear 0;counter-increment:trackit} .PopularPosts ul li:before{content:counters(trackit, ".");padding:0 .1em 0 10px;font-size:20px;font-weight:700;color:#F66;float:left;margin-right:10px} .PopularPosts li:first-child{border-top:1px solid #f0f0f0} .PopularPosts li:nth-child(odd){background:#f5f5f5} .PopularPosts .item-thumbnail,.PopularPosts .item-snippet{display:none!important} .PopularPosts a,.PopularPosts a:hover{color:#959595;font-size:.9rem} #PopularPosts1 li{padding-right:1em!important;padding-left:1em!important} .widget.PopularPosts{padding:1.2em 0 0!important;background:#fafafc}
Thanks for reading Cara Membuat Widget Popular Post Simpel Keren Tanpa Gambar. Please share...!
0 Komentar untuk "Cara Membuat Widget Popular Post Simpel Keren Tanpa Gambar"
Terima kasih telah berkunjung ke blog saya, silahkan berkomentar dengan sopan. Maaf, Komentar berisi Link Aktif, Promosi Produk Tertentu, J*di, P*rn*, Komentar berbau SARA dan Permusuhan, tidak akan dipublish.