Cara Membuat Widget Popular Posts Seperti Viomagz

KURAZONE ~ Pada kesempatan kali ini kami bagikan informasi mengenai Cara Membuat Popular Posts Seperti Viomagz. Penampakan dari Popular Posts ini akan nampak seperti dibawah ini :
Untuk memiliki tampilan Popular Posts seperti Viomagz tentunya kita harus merelakan atau menghapus model Popular Posts bawaan template yang kita pakai saat ini. 
Nah, buat sahabat Kurazer yang ingin menggunakan model Popular Posts seperti Viomagz tersebut bisa menggunakan langkah dibawah ini :

Cara Membuat Popular Posts Seperti Viomagz

1. Buka Akun Blogger >> Pilih Tema >> Pilih Edit HTML
2. Cari kode .PopularPosts
Pada langkah ini, kita akan menghapus kode .PopularPosts bawaan template
3. Hapus semua property yang berkaitan dengan .PopularPosts
Cara menghapusnya adalah dimulai dari kode .PopularPosts hingga tanda penutup kurung }
.PopularPosts { property:bla bla bla; }

Jumlah .PopularPosts ini biasanya gerombolan dalam 1 baris atau saling berdekatan, seperti pada gambar ini :


Abaikan kode .PopularPosts yang berada pada lingkup @media only screen and, karena .PopularPosts yang berada pada lingkup tersebut sudah tersetting responsive. Tanda kode .PopularPosts yang berada pada lingkup @media only screen and, adalah dia nongkrong nya sendirian (alias gak gerombolan sama .PopularPosts yang lain)

Jika gerombolan .PopularPosts bawaan template sudah kalian hapus, selanjutnya copy kode dibawah ini dan letakkan di tempat kalian menghapus .PopularPosts yang lama.

Kesimpulannya : Hapus .PopularPosts yang lama lalu tindih dengan .PopularPosts yang baru
.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;
 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: $(link.hover.color);
}
.PopularPosts ul li .item-title a:hover, .PopularPosts ul li a:hover {
 color: $(link.color);
}
.PopularPosts ul li .item-thumbnail-only:before, .PopularPosts ul li .item-content:before {
 content: counter(num) !important;
 font-size: 25px;
 font-weight: 500;
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 background: linear-gradient(to top,blue,black);
 color: #fff !important;
 width: 30px;
 padding-top: 10px;
 text-align: center;
}
.PopularPosts .item-title, .PopularPosts .item-thumbnail, .PopularPosts .item-snippet {
 margin-left: 34px;
}
.PopularPosts .item-title {
    line-height: 1.6;
 margin-right: 8px;
}
.PopularPosts .item-thumbnail {
 float: left;margin-bottom: 0px;
 margin-right: 8px;
}
.PopularPosts .item-snippet {
    line-height: 1.6em;
 font-size: 14px;
 margin-top: 8px;
}
.PopularPosts li:before {
    display:none;
}
4. Simpan Template
5. Pindah ke Menu Tata Letak
6. Setting Widget Popular Posts nya dengan mengaktifkan centang pada thumbnail gambar, Sedangkan untuk bagian Cuplikan tidak perlu dicentang agar terkesan rapi. Kemudian simpan

NOTE :
1. Cari kode blue,black untuk mengubah warna background numbering.
2. Sedangkan kode to top adalah untuk menentukan direction warna (kemana warna tersebut mengarah), kalian bisa mengubahnya menjadi to bottom dan sebagainya. Untuk lebih jelasnya mengenai direction ini bisa dilihat pada artikel dibawah ini :

Cara Membuat Background Gradasi Linear CSS3 di Blog

Contoh : perbedaan to top dan to bottom


3. Ganti kode color:$(link.hover.color); untuk mengganti warna link,
misal : color:red;
4. Ganti kode color:$(link.color); untuk mengganti warna link ketika tersentuh kursor,
misal : color:red;
5. Sisanya bisa kalian explore sendiri

Itulah informasi mengenai "Cara Membuat Widget Popular Posts Seperti Viomagz", selamat mencoba dan semoga bermanfaat. Goodluck !





Lebih baru Lebih lama