Meta Moz - Untuk saat ini memasang widget pupular post sangatlah penting dan memiliki banyak fungsi untuk sebuah situs/web/blog. Selain menambah kualitas SEO suatu blog popular post juga memungkinkan visitor lebih betah berlama-lama di blog yang anda kelola karena memberikan informasi berbagai kemudahan dalam berselancar pada dunia blogging anda.
ketika kita melakukan searching di google dengan kata kunci atau keyword "Cara widget pupular post" itu banyak sekali tutorial mengenai cara membuat popular post di mesin pencari manapun. Namun pada tutorial kali ini Meta Moz akan memberikan tutorial yang cukup berbeda dari biasanya.
Kali ini Meta Moz menciptakan sebuah popular post untuk blogger dengan tampilan yang ramah, simpel, serta responsive dan sangat mirip dengan sebuah unit iklan teks/link adsesne. Ide ini tercetus saat saya sedang melakukan editing pada komponen template blog Metaltailaco.
Popular post buatan Meta Moz ini sangat simpel dan tidak banyak memakan ruang karena menonaktifkan beberapa elemen seperti thumbnail dan snippet hal ini sengaja saya rancang sedemikian rupa agar tidak memakan ruang yang banyak serta tidak memberatkan loading blog kita. Walaupun saya menonaktifkan beberapa bagian tertentu namun saya berusaha membuat tampilan popular post tetap elegan meskipun hanya menggunakan title post saja.
Disini saya tidak menyertakan demo karena popular yang dimaksud pada postingan kali ini juga telah saya terapkan pada blog Tanveerdownloads, anda bisa melihatnya Disini.
Sebelum mempraktekkannya, saya harap anda sudah membackup template yang akan dimodifikasi. Mengapa demikian? Sebab, jika nanti terdapat hal-hal yang tidak anda inginkan seperti kode tidak cocok, salah menempatkan kode, lupa menempatkan kode, template error, atau bahkan template rusak maka anda masih memiliki cadangannya.
Cara Membuat Popular Post Simpel Mirip Iklan Teks/Link Versi Meta Moz
- Masuk ke dashboard blog
- Lalu masuk ke menu tema blog
- Kemudian klik edit HTML
- Cari kode seperti dibawah ini /* Popular Posts */
- Dibawah kode tersebut terdapat kode CSS popular post
- Silahkan hapus seluruh kode CSS popular post tersebut
- Lalu ganti CSS popular post versi Meta Moz dibawah ini
/* POPULAR POST BY META MOZ */
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-thumbnail img,.PopularPosts .item-thumbnail{display:none}
.PopularPosts .item-thumbnail img{display:none}
#HTML3 h2{display:none}
#PopularPosts1 a:hover{color:#ffffff}
#PopularPosts1 li{position:relative;min-height:25px;line-height:25px;padding:5px 15px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin:0 auto 3px;transition:all .3s;background:#0081ff;cursor:pointer;border-radius:50px}
#PopularPosts1 .item-thumbnail,#PopularPosts1 .item-thumbnail img{border-radius:4px;padding:0;margin:0}
#PopularPosts1 .item-thumbnail{margin:5px 10px 5px 0}
#PopularPosts1 a{position:relative;color:#fff;z-index:2}
.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{padding:5px;list-style:none;font-size:15px;background:#fff;margin:0;width:100%;font-weight:400;border-radius:0 0 5px 5px}
.PopularPosts ul li img{display:block;transition:all 400ms ease-in-out;width:60px;height:60px;float:left;margin:0 15px 0 0;border:4px solid rgba(0,0,0,0.2)}
.PopularPosts .item-title{text-overflow:ellipsis;overflow:hidden;}
.PopularPosts ul li .item-title a{font-size:15px;color:inherit;text-decoration:none}
#PopularPosts1:hover li{opacity:.7;transform:scale(0.95)}
#PopularPosts1 li:hover{opacity:1;transform:scale(1.0)}- Selanjutnya silahkan simpan template
- Terakhir silahkan lihat blog yang sudah anda modifikasi
1 comment