×

search by faronesia.com

FARONESIA
Profesional and Specialist WebDesign by Faronesia

Selain tutorial, kami juga menyediakan layanan penambah follower untuk akun Instagram dan Tiktok anda dengan harga terjangkau. Ayo buruan order sekarang juga!!!

Layanan Media

Cara Membuat Widget Popular Post Seperti blog Faronesia

Faronesia.com - Hai sobat faronesia, apa kabar? Semoga sehat selalu ya. Kali ini saya akan membagikan tutorial desain blog mengenai cara membuat popular post atau postingan populer seperti milik faronesia.com. pada tampilan postingan populer di web faronesia ini tergolong menawan dan elegan untuk dipandang dan cocok sekali dipasang pada template kesayangan anda.

Tutorial ini saya buat karena banyaknya para sahabat blogger yang merequest tutorial tersebut lewat email atau halaman tanggapan. Dan tutorial widget postingan popular ini TIDAK COCOK jika dipasang pada menu sidebar yang berada disamping, anda hanya bisa memasangnya dibawah postingan. Hal ini dikarenakan widget popular post versi faronesia membutuhkan ruangan yang lebar saat dalam mode desktop.

Sebelum masuk ke tahap tutorialnya, 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.
Demo silahkan lihat dihalaman website faronesia bagian bawah
Cara membuat widget postingan populer seperti faronesia.com


  • Masuk ke dashboard blog 
  • Lalu masuk ke menu tema blog
  • Kemudian klik edit HTML
  • Cari kode /* popular post */
  • Lalu hapus kode tersebut dan seluruh kode css popular post sampai tuntas
  • Tempelkan CSS popular post by faronesia dibawah ini tepat dimana anda menghapus tadi
/* Popular Posts by Faronesia */
.PopularPosts .widget-content ul, .PopularPosts .widget-content ul li, .PopularPosts .widget-content ul li img, .PopularPosts .widget-content ul li a, .PopularPosts .widget-content ul li a img {
margin:0 0;
padding:0 0;
list-style:none;
border:none;
outline:none;
}
.PopularPosts .widget-content ul {
margin: 0;
list-style:none;
counter-reset:num;
}
.PopularPosts .widget-content ul li img {
display: block;
width: 70px;
height: 70px;
border-radius: 50px;
float: left;
}
.PopularPosts .widget-content ul li {
overflow:hidden;
margin:auto 5px 20px;
counter-increment: num;
width:calc((100% / 2) - 30px);
    display: block;
    padding:10px;
    float:left;
    border-radius: 5px;
    height: 70px;
    background:#26a65b;
    box-shadow: 4px 4px 4px rgba(0 , 0 , 0 , 0.12) , 0 4px 4px 4px rgba(0 , 0 , 0 , 0.12);
}
.PopularPosts ul li:last-child {
margin-bottom: 0px;
}
.PopularPosts ul li .item-title a, .PopularPosts ul li a {
font-weight: bold;
    font-size: 15px;
text-decoration: none;
color: #fff;
}
.PopularPosts ul li .item-title a:hover, .PopularPosts ul li a:hover {
color: #fff;
}
.PopularPosts .item-title {
    line-height: 1.6;
margin-right: 8px;
}
.PopularPosts .item-thumbnail {
float: left;
margin-right: 8px;
border-radius: 50px;
border: 2px solid #fff;
}
.PopularPosts .item-snippet {
font-size: 12px;
margin-top: 9px;
    color: #fff;
}
@media only screen and (max-width:450px){
.PopularPosts .widget-content ul li {
    width:calc((100% / 1) - 30px);
}
}
  • Untuk bagian width:calc silahkan sesuaikan sendiri
  • Lalu simpan tema/terapkan
  • Selanjutnya, masuk ke menu tata letak dan buatlah widget popular post
  • Ingat !!! Letakkan widget popular post dibagian bawah bukan di sidebar samping

Demikianlah mengenai Cara Membuat Widget Popular Post Seperti blog Faronesia 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. Informasinya menarik nihh....kayanya harus belajanr banyak dari faronesia.com

    BalasHapus
    Balasan
    1. Terimakasih sudah perkunjung hehe

      Hapus
  2. Anonim00.01

    Wah boleh dicoba nih

    BalasHapus
  3. Semangat mimin :)

    BalasHapus

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Modifikasi Tampilan Website Anda

Gunakan jasa kami, berikan kesan bahwa website anda professional.

Pesan Sekarang
Notifikasi pengguna

Aktifkan javascript dibrowser anda agar mendapatkan fitur jelajah yang lebih baik di situs kami.

Tetap selalu terhubung dengan kami untuk menjadi bagian dari Faronesia, caranya cukup dengan menekan tombol dibawah ini.

Tutup