×

faronesia.com support search by voice

Faronesia Design

Profesional blogger design by Azza

Fullscreen mode
Normal mode
Kemungkinan terdapat beberapa tutorial desain dan modifikasi yang hanya bekerja pada template tertentu. Silahkan cermati setiap perintah yang tertera didalam artikel.

Cara Membuat Popular Post Mirip Iklan Teks/Link By Faronesia.com

Faronesia.com - Halo sobat faronesia, memasang widget pupular post memang sangatlah penting dan memiliki banyak sekali fungsi yang bisa kita dapatkan selain menambah kualitas SEO suatu blog popular post juga memungkinkan para visitor lebih betah di blog yang anda kelola karena memberikan informasi berbagai kemudahan dalam berselancar pada blog anda.

Sudah banyak sekali tutorial mengenai popular post di mesin pencari manapun. Namun kali ini saya akan memberikan hasil yang cukup berbeda dari biasanya. Kali ini faronesia.com menciptakan sebuah popular post untuk blogger dengan tampilan yang ramah, simpel, serta responsive dan mirip sebuah unit iklan teks/link adsesne. Ide ini tercetus saat saya sedang melakukan editing pada komponen template blog faronesia.com.

Popular post buatan faronesia.com 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 pula. Walaupun saya menonaktifkan beberapa bagian tertentu namun saya berusaha membuat tampilan popular post tetap elegan walaupun hanya menggunakan title post saja.

Disini saya tidak menyertakan demo karena popular yang dimaksud pada postingan kali ini juga telah saya terapkan pada blog faronesia.com, anda bisa melihatnya dengan cara menscroll ke bagian bawah blog ini.

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 Faronesia.com
  • 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 Faronesia.com dibawah ini
/* POPULAR POST BY FARONESIA.COM */
.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
INGIN MEREPOST KODE/ISI YANG ADA PADA POSTINGAN INI? WAJIB SERTAKAN SUMBER FARONESIA.COM

Demikianlah mengenai Cara Membuat Popular Post Simpel Mirip Iklan Teks/Link Versi Faronesia.com semoga bermanfaat untuk para pembaca dimanapun anda berada. Jika menurut anda artikel ini bermanfaat jangan lupa share karena dengan share artikel ini sama halnya anda berpartisipasi dalam mengembangkan website faronesia.
Buka komentar
Tutup komentar

1 Response to "Cara Membuat Popular Post Mirip Iklan Teks/Link By Faronesia.com"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel