Cara Membuat Widget Popular Posts Simpel Keren Sederhana

Entah kenapa saya rasa semakin kesini semakin berkurang semangat untuk ngeblog. Meski begitu, saya paksakan untuk bertahan semampunya karena saya yakin aktivitas ngeblog ini akan ada manfaatnya, baik untuk diri saya pribadi dan semoga juga bermanfaat bagi para pembaca blog ini. Kali ini, saya akan berbagi cara untuk membuat widget Popular Posts atau Artikel Populer dengan tampilan simpel tapi lumayan keren. 

Tak perlu berulang kali saya jelaskan, semua pasti sudah tahu bahwa widget popular post ini intinya berfungsi untuk menampilkan beberapa postingan yang populer dibaca oleh pengunjung. Widget popular post yang hendak saya bagikan kali ini memang tanpa gambar (thumbnail), tapi tampilannya cukup keren. Bisa dikatakan tampilannya hampir mirip dengan tampilan jenis iklan tautan (link) disertai penunjuk tanda panah di sampingnya. 

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:&#39;Open Sans&#39;;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:&#39;\f105&#39;;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.

Lokasi:

Berbagi :