Cara Membuat Popular Post di Blogspot Seperti VioMagz

Pada artikel ini, akan dijelaskan tentang cara membuat popular post di blogspot seperti Viomagz. Jika anda ingin menggunakannya, lihat cara dibawah ini. Untuk cara membuatnya tidak sulit, hanya saja anda harus mengganti CSS popular post anda dengan CSS popular posts dibawah ini. Simak cara menerapkannya dibawah ini.

  • Login di akun blogger anda
  • Cari menu “Tema”, dan piilih “Edit HTML”
  • Paste code CSS ini sebelum </style> atau </b:skin>

/* 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 10px;  counter-increment: num;  position: relative; } .PopularPosts ul li:last-child {  margin-bottom: 0px; } .PopularPosts ul li .item-title a, .PopularPosts ul li a {  font-weight: 500;  text-decoration: none;  color: #444; } .PopularPosts ul li .item-title a:hover, .PopularPosts ul li a:hover {  color: #49ACE1; } .PopularPosts ul li .item-thumbnail-only:before, .PopularPosts ul li .item-content:before, .PopularPosts ul li > a:before {  font-size: 30px;  font-weight: 500;  display: block;  position: absolute;  top: 0;  left: 0;  bottom: 0;  background: linear-gradient(#49ACE1, #fff);  width: 26px;  padding-top: 10px;  text-align: center;  content: counter(num);  color: #fff; } .PopularPosts ul li > a {  display: block;  padding-left: 32px;  min-height: 45px; } .PopularPosts .item-title, .PopularPosts .item-thumbnail, .PopularPosts .item-snippet {  margin-left: 32px; } .PopularPosts .item-title {     line-height: 1.6;  margin-right: 8px;  min-height: 40px; } .PopularPosts .item-thumbnail {  float: left;  margin-right: 8px; } .PopularPosts .item-snippet {     line-height: 1.6em;  font-size: 14px;  margin-top: 8px; }

 

Perlu diperhatikan, sebelum anda meletakan code ini, anda hapus dahulu code popular post yang lama, dan ganti yang baru, supaya bisa lebih rapi. Itulah cara singkat tentang cara membuat popular post di blogspot seperti Viomagz, semoga bermanfaat.

Baca Juga :  Tutorial Cara Membuat Blog di Blogger, Lengkap dan Terbaru 2021

Cek Tutorial Lengkap Disini :