Skip to content Skip to sidebar Skip to footer

Cara Membuat Widget Popular Posts Simpel Dan Keren

Pada artikel ini saya akan berbagi cara membuat widget Popular Posts atau Artikel Populer dengan tampilan simpel dan keren. 

cara membuat widget popular post
Tidak perlu 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:

setting popular posts

  • 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 galaxyxploiter untuk kali ini. Semoga bermanfaat.

Thanks for reading Cara Membuat Widget Popular Posts Simpel Dan Keren. Please share...!

Post a Comment for "Cara Membuat Widget Popular Posts Simpel Dan Keren"