Cara membuat popular post seperti Evo Magz

Pengertian popular post

Cara membuat popular post seperti Evo Magz - Popular post merupakan sebuah widget sidebar yang pada umumnya terletak di sebelah kanan maupun disebelah kiri halaman body.

Popular post adalah sebuah widget sidebar yang menampilkan beberapa daftar judul postingan yang ada pada situs blog atau website anda, sesuai dengan namanya, yaitu popular pos.

Pada sidebar popular post ini secara otomatis akan menampilkan postingan anda yang paling populer atau yang paling sering dibaca maupun dikunjungi oleh para pengunjung situs blog atau webside anda.

Pada kesempatan ini saya akan berbagi tentang cara membuat sidebar popular post seperti Evo Magz V4.7 sebuah template handal buatan Raden Mas Sugeng.

Pada tampilan populer postnya dihiasi dengan beberapa warna yang sangat menarik, Template  Evo magz v4.7 ini merupakan template blogger yang di design oleh Mas Sugeng, template tersebut di design dengan bagus, dan memiliki score SEO yang bagus pula.

Cara membuat popular post seperti Evo magz

Silahkan anda lihat gambar disamping, setelah anda berhasil membuatnya maka hasilnya akan seperti itu, Untuk membuat  popular post yang keren seperti Evo Magz V.4.7 langkah-langkahnya adalah sebagai berikut;

1. Langkah yang pertama silahkan anda log in terlebih dahulu ke akun blogger anda, atau bisa masuk Disini

2. Langkah yang kedua silahkan menuju Dashboard blog anda

3. Silahkan anda cari kode ]]></b:skin> , untuk mempercepat pencarian gunakan Ctrl+F lalu ketik kode tersebut dan tekan enter.

4. Setelah kodenya anda temukan, lalu copy kode di bawah ini dan silahkan anda pastekan di atas kode ]]></b:skin>;

/* Custom CSS for Blogger Popular Post Widget */
.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
margin:0 0;
padding:0 0;
list-style:none;
border:none;
background:none;
outline:none;
}
.PopularPosts ul {
margin:.5em 0;
list-style:none;
color:black;
counter-reset:num;
}
.PopularPosts ul li img {
display:block;
margin:0 .5em 0 0;
width:50px;
height:50px;
float:left;
}
.PopularPosts ul li {
background-color: #eee;
  margin: 0 0 0 0 !important;
  padding: 10px 20px 10px 10px !important;
  counter-increment: num;
  position: relative;
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a, .PopularPosts ul li a {
font-weight:bold;
color:#000 !important;
text-decoration:none;
}
.PopularPosts ul li:before {
content: counter(num) !important;
  font-family: arial, sans-serif !important;
  font-size: 12px;
  font-weight: bold !important;
  display: block;
  position: absolute;
  top: -5px;
  right: -5px;
  border-radius: 16px;
  background-color: #333;
  color: #fff !important;
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  padding-right: 0px !important;
  border: 2px solid #fff;
}
/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#A51A5D;
}
.PopularPosts ul li:nth-child(2) {background-color:#F53477;
}
.PopularPosts ul li:nth-child(3) {background-color:#FD7FAA;
}
.PopularPosts ul li:nth-child(4) {background-color:#FF9201;
}
.PopularPosts ul li:nth-child(5) {background-color:#FDCB01;
}
.PopularPosts ul li:nth-child(6) {background-color:#DEDB00;
}
.PopularPosts ul li:nth-child(7) {background-color:#89C237;
}
.PopularPosts ul li:nth-child(8) {background-color:#44CCF2;
}
.PopularPosts ul li:nth-child(9) {background-color:#01ACE2;
}
.PopularPosts ul li:nth-child(10) {background-color:#94368E;
}
.PopularPosts .item-thumbnail {
margin:0 0 0 0;
}
.PopularPosts .item-snippet {
font-size:11px;
}
.profile-img{
display:inline;
opaciry:10;
margin:0 6px 3px 0;
}

5. Silahkan anda tekan save atau simpan dan lihatlah hasilnya.

6. Selamat popular post keren seperti Evo magz telah berhasil dibuat diblog anda.

Cara Editing Popular Post Evo magz 4.7

Untuk melakukan editing pada tampilan popular post Evo mag 4.7 dapat anda lakukan dengan cara yang mudah, misalkan anda ingin merubah warna-warna pada tampilan popular post tersebut anda dapat melakukan dengan cara meng-edit pada bagian "Set color and level" agar lebih jelas anda dapat melihat kode tersebut dibawah ini;

/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#A51A5D;
}
.PopularPosts ul li:nth-child(2) {background-color:#F53477;
}
.PopularPosts ul li:nth-child(3) {background-color:#FD7FAA;
}
.PopularPosts ul li:nth-child(4) {background-color:#FF9201;
}
.PopularPosts ul li:nth-child(5) {background-color:#FDCB01;
}
.PopularPosts ul li:nth-child(6) {background-color:#DEDB00;
}
.PopularPosts ul li:nth-child(7) {background-color:#89C237;
}
.PopularPosts ul li:nth-child(8) {background-color:#44CCF2;
}
.PopularPosts ul li:nth-child(9) {background-color:#01ACE2;
}
.PopularPosts ul li:nth-child(10) {background-color:#94368E;
}
.PopularPosts .item-thumbnail {
margin:0 0 0 0;
}
.PopularPosts .item-snippet {
font-size:11px;
}
.profile-img{
display:inline;
opaciry:10;
margin:0 6px 3px 0;
}

Jika anda ingin merubah warna pada tampilan popular post tersebut, silahkan anda ganti kode warnanya (yang saya tulis dengan warna merah), ganti dengan warna yang sesuai dengan keinginan anda.

silahkan dicoba dan jangan lupa setelah selesai melakukan editing simpan kembali template anda.

Apabila anda menginginkan tampilan popular post Evo magz V4.7 tanpa nomor urut, anda juga dapat meng-editnya dengan cara menghapus kode "before {
content: counter(num) !important;" agar lebih jelas dimana posisi kode tersebut berada, mari kita lihat kode dibawah ini;

.PopularPosts ul li:before {
content: counter(num) !important;
  font-family: arial, sans-serif !important;
  font-size: 12px;
  font-weight: bold !important;
  display: block;
  position: absolute;
  top: -5px;
  right: -5px;
  border-radius: 16px;
  background-color: #333;
  color: #fff !important;
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  padding-right: 0px !important;
  border: 2px solid #fff;
}

Lihat kode diatas yang telah saya kasih tanda warna merah, silahkan anda hapus kode " before {
content: counter(num) !important;"

Setelah selesai menghapus kode tersebut jangan lupa anda simpan kembali templatnya, agar perubahan yang anda lakukan tidak hilang.

Manfaat Popular Post untuk blog 

Begitu pentingkah sidebar popular post di blog anda? sidebar popular post memiliki peran yang sangat penting untuk blog anda, sidebar popular post merupakan tempat yang menampilkan post anda paling populer, selain itu sidebar popular post juga memiliki manfaat yang tidak terduga oleh anda.

Contohnya; jika sidebar popular post anda didesign secara menarik maka pengunjung blog anda pasti akan bergerak disekitar situ saja, pada akhirnya pun mereka akan penasaran dan mencoba untuk membuka daftar link yang berada di sidebar popular post anda.
Perlu anda ketahui bahwa sidebar popular post juga memiliki peran yang sangat penting dalam hal optimisasi SEO.

Demikian artikel tentang Cara membuat popular post seperti Evo Magz, semoga bermanfaat.

Bagikan Artikel ini