Membuat Widget Popular Post Responsive, Ramping Dan Keren Di Blogger

input learn - Popular Post atau biasa di sebut Postingan Populer merupakan widget yang biasa muncul di bawah homepage, nah widget ini sendiri adalah menu artikel yang sering di kunjungi orang dan yang sangat populer di blog tersebut.

Membuat Widget Popular Post Responsive, Ramping Dan Keren Di Blogger

Dan pada kesempatan kali ini, admin akan memberikan tutorial membuat widget popular post yang responsive, ramping dan tentunya keren dong. Bisa anda lihat contohnya di bawah ini:

Populat post.png

Nah widget ini lah yang nanti admin berikan cara memasangnya pada blogger kalian, tertarik memasangnya?

Oh iya sekedar info saja, awal mula widget popular post tersebut merupakan buatan dari mbak Arlina Design yang sangat populer di kalangan para blogger, beliau membuat template - template blog yang sangat bagus keren. Namun template tersebut juga ada yang premium atau berbayar jika ingin memilikinya, Tenang admin ada nih beberapa template yang gak kalah keren dan sudah di Redesign agar elegan dan tampil moderen, kalian bisa deh baca di bawah ini.

[ Kumpulan Template Premium Keren Dan Seo Friendly Re-Design ]

Langsung ke pembahasan yang tadi, cara membuat widget popular post. Simak berikut ini:

Cara Membuat Widget Popular Post Responsive, Ramping Dan Keren

1. Masuk di blogger kalian masing - masing menggunkan akun gmail kalian,

2. Selanjutnya seperti biasah masuk ke Tema > dan klik Edit HTML

3. Cari kode > ]]></b:skin> atau </Style> dengan menggunakan fungsi CTRL + F, dan copas kode CSS di bawah ini tepat di atas kode tersebut.

  /* Popular Posts */
.PopularPosts .widget-content ul, .PopularPosts .widget-content ul li {
  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;
  float: left;
}
.PopularPosts .widget-content ul li {
  margin: 0 0 15px;
  counter-increment: num;
  position: relative;
}
.PopularPosts ul li:last-child {
  margin-bottom: 0px;
}
.PopularPosts ul li .item-thumbnail-only::before, .PopularPosts ul li .item-content::before, .PopularPosts ul li > a::before {
  color: $(body.link.color) !important;
}
.PopularPosts ul li .item-thumbnail-only::after, .PopularPosts ul li .item-content::after, .PopularPosts ul li > a::after {
  background: $(label.border.color);
}
.PopularPosts .item-title {
    line-height: 1.6;
  margin-right: 8px;
  min-height: 40px;
  font-weight: bold;
}
.PopularPosts .item-thumbnail {
  float: left;
  margin-right: 8px;
}
.PopularPosts .item-snippet {
    line-height: 1.6em;
  font-size: 14px;
  margin-top: 8px;
  opacity: 0.925;
}
.PopularPosts ul li > a {
  font-weight: bold;
}

/*POPULAR POST By inputlearn.net*/
.popular-posts {background: linear-gradient(127deg, #c04848, #480048);}
.PopularPosts ul li:hover{background: #3333330f;}
.popular-posts ul li a {color:#fff;}
.popular-posts ul li a:hover {color:#fff;}
.PopularPosts h2 {text-indent: 20px;border-top: 2px solid #df0d83;margin-bottom: 0px;border-bottom: none;width: 100%;padding-bottom: 15px;background: #fff;padding-top: 15px;}
.PopularPosts h2 span {margin-left:20px}
.PopularPosts .widget-content ul, .PopularPosts .widget-content ul li {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;float: left;}
.PopularPosts .widget-content ul li {margin: 0;counter-increment: num;position: relative;border-bottom: 1px solid rgba(0,0,0,0.08);border-top: 1px solid rgba(255,255,255,0.12);}
.PopularPosts ul li:last-child {margin-bottom: 0px;}
.PopularPosts ul li .item-thumbnail-only::after, .PopularPosts ul li .item-content::after, .PopularPosts ul li > a::after {background: #efefef;}
.PopularPosts .item-title {line-height: 1.6;margin-right: 8px;min-height: 40px;font-weight: bold;}
.PopularPosts .item-thumbnail {float: left;margin-right: 8px;}
.PopularPosts .item-snippet {line-height: 1.6em;margin-top: 8px;opacity: 0.925;}
.PopularPosts ul li > a {font-weight: bold;    font-size: 14px;}
.PopularPosts .item-title, .PopularPosts .item-thumbnail, .PopularPosts .item-snippet {margin-left: 28px;}
.PopularPosts ul li > a {display: block;padding: 8px 20px;font-size: 15px;font-weight: 400;min-height: 45px;}
.PopularPosts h2 svg {margin-right: 15px;float: right;display: inline-block;width: 20px;height: 20px;vertical-align: -5px;background-repeat: no-repeat!important;content: '';}

4. Masih di edit HTML, untuk selanjutnya memasangkan icon Bintang pada widget popular post. Yaitu mudah sekali cukup kalian lompat ke menu widget popular post, seperti gambar dibawah ini.

Popular post1.png

5. Dan cari kode seperti ini <data:title/> lalu pastekan kode SVG nya dibawah ini setelah kode tersebut.


 <svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="#FFD15C" d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z" />
</svg>

Perhatikan contoh pemasangan kode nya, setelah <data:title/> [ 
<data:title/>paste kode disini</h2> ]
Dan untuk yang saya beri warna HIJAU merupkan warna dari icon tersebut, jika ingin mengganti silahkan ganti kode fill #FFD15C tersebut.
Simpan Tema.

6. Terakhir masuk di blogger kalian, dan setting untuk popular post, [untuk tumbnail gambar dan cuplikan jangan di ceklis semuanya]. Agar kode diatas berjalan dengan semestinya.

7. Selesai simpan setelan dan lihat blog kalian, berhasil atau tidak.

Terimakasih cukup sekian untuk pembahasan mengenai Membuat Widget Popular Post Responsive, Ramping Dan Keren di Blogger. semoga bermanfaat.

1 Response to "Membuat Widget Popular Post Responsive, Ramping Dan Keren Di Blogger"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel