×

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 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

3 komentar dari postingan "Cara Membuat Widget Popular Post Seperti blog Faronesia"

  1. Informasinya menarik nihh....kayanya harus belajanr banyak dari faronesia.com

    ReplyDelete
  2. Wah boleh dicoba nih

    ReplyDelete

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel