Sebetulnya widget ini sudah tersedia di blogger, kita hanya tinggal menambahkannya lewat menu tataletak. Di sini kita hanya akan memodifikasinya saja agar tampilannya seperti screenshot gambar di atas. Langsung saja, berikut ini cara memasang dan memodifikasi tampilan widget popular post simpel keren di blog.
Memasang Widget Popular Post di Blogger
1. Buka akun blogger anda.
2. Pilih menu tataletak (layout) dan klik tambahkan gadget.
3. Pilih widget Entri Populer atau Popular Post, kemudian silahkan atur seperti berikut ini:
- Title: silahkan anda isikan dengan Artikel Populer, Popular Post, atau semacamnya.
- Most Viewed: silahkan pilih sesuai jangka waktu yang anda inginkan.
- Show: kedua kotak dikosongkan saja, untuk display pilih sesuai jumlah judul artikel yang anda kehendaki.
4. Silahkan simpan.
Modifikasi Tampilan Widget Popular Post
1. Pada dashboard blogger, pilih menu tema dan klik edit html.
2. Pastikan kode font awesome terpasang di template blog anda. Jika belum, letakkan kode berikut ini di atas kode </head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"/>
3. Selanjutnya cari kode ]]></b:skin> atau kode </style> dan letakkan kode berikut ini di atasnya.
/* Popular Posts Simpel */.PopularPosts .item-title{font-weight:500;font-size:15px;padding-bottom:0.5em}.PopularPosts .widget-content{font-family:'Open Sans';font-size:14px;padding:0;border-radius:5px}.PopularPosts .widget-content ul li{padding:0;background:none}.PopularPosts .item-title a{color:#333}.PopularPosts .item-title a:hover{color:#E2E7F5}.PopularPosts .item-snippet{height:40px;overflow:hidden;color:#555;line-height:1.4}#PopularPosts1{display:block;position:relative;overflow:hidden;font-size:15px}#PopularPosts1 ul{margin:0;padding:0;list-style-type:none}#PopularPosts1 ul li{background:#E2E7F5;position:relative;padding:0;color:#fff;border-bottom:1px solid rgba(0,0,0,0.08);border-top:1px solid rgba(255,255,255,0.12)}#PopularPosts1 ul li:after{content:'\f105';font-family:fontawesome;position:absolute;top:14px;right:15px;line-height:1em;text-align:center;color:#000;font-size:27px;font-weight:bold;transition:all.3s}#PopularPosts1 ul li:first-child{border-top:0}#PopularPosts1 ul li:last-child{border-bottom:0}#PopularPosts1 ul li:hover:after{color:#fff}#PopularPosts1 ul li a{background:#E2E7F5;color:#000;display:inline-block;padding:14px 50px 14px 15px;width:100%}#PopularPosts1 ul li a:hover{background:#051F41;color:#fff}
4. Simpan template.
Silahkan lihat hasilnya. Anda juga bisa ubah warna background, font, dsb dengan mengedit pengaturan CSS di atas. Demikianlah tutorial ngeblog dari Santos Blog untuk kali ini. Semoga bermanfaat.
