×

search by faronesia.com

Faronesia
Profesional and Specialist ReDesign Template blogger

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

    ReplyDelete
    Replies
    1. Terimakasih sudah perkunjung hehe

      Delete
  2. Anonymous12:01 AM

    Wah boleh dicoba nih

    ReplyDelete

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

Notifikasi pengguna

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

Tutup
×

Faronesia

Kami senantiasa membantu memecahkan masalah seputar desain blog melalui request tutorial

Request tutorial