Cara Mengganti Nomor Urut pada Widget Populer Post Menjadi Ikon di Template VioMagz

Disini saya akan memberi tutorian mengganti semua yang berkaitan dengan nomor urut widget popular post menjadi ikon, lebih jelasnya lihat gambar. Jika anda ingin menggunakan ikon di nomer urut pada widget popular post ini bisa di praktekkan.

Backup Terlebih Dahulu Template Anda

1. Masuk/Login keblogger kalian
2. Masuk kemenu Tema
3. Lalu Edit HTML
4. Cari kode ini (INGAT YANG SAYA BLOK MERAH YANG DIHAPUS) khusus langkah ke-4
.PopularPosts ul li .item-thumbnail-only:before, .PopularPosts ul li .item-content:before, .PopularPosts ul li > a:before {
   content: counter(num) !important;
   font-size: 30px;
   font-weight: 500;
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   background: linear-gradient($(link.color), #fff);
   color: #fff !important;
   width: 26px;
   padding-top: 10px;
   text-align: center;
}


5. Ganti dan tambahkan kode, maka akan menjadi :
.PopularPosts ul li .item-thumbnail-only:before, .PopularPosts ul li .item-content:before, .PopularPosts ul li > a:before {
   content: "\f101";
   font-family: FontAwesome;
   font-size: 30px;
   font-weight: 500;
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   background: linear-gradient($(link.color), #fff);
   color: #fff !important;
   width: 26px;
   padding-top: 10px;
   text-align: center;
}


Keterangan :

1. "\f101" ,adalah gambar ikon yang akan ditampilkan. belom tahu cara mendapatkannya klik disini.
2. font-family: FontAwesome; , kode ini harus ada ketika menggunakan ikon font awesome.


6. Kalau sudah disimpan

By Admin

Similiar tagsBloggerTutorial