==Iklan Dipate Disini===
Nah, pada tutorial ini saya akan membuat widget popular post kalian agar lebih keren dan lebih menarik, tentunya akan membuat pembaca lebih betah berlama di blog kalian. Popular post ini sangat responsive sekali di berbagai macam template, dan popular post ini tidak memberatkan loading blog kalian karena popular post ini tidak menggunakan thumbnail. Buat kalian yang mau membuat widget popular post menjadi lebih keren dan menarik bisa ikuti langkahnya di bawah ini.
Cara Membuat Widget Popular Post Keren Dan Responsive Di blog ( Modifikasi Widget Popular Post )
1. Buka Blog kalian.
2. Pilih Tema lalu pilih Edit HTML.
3. Salin kode di bawah ini dan letakan di atas kode ]]></b:skin>
/*POPULAR POST By Lapakinfo.net*/
.popular-posts {background: linear-gradient(127deg, #1589E3, #1589E3);}
.PopularPosts ul li:hover{background: #3333330f;}
.popular-posts ul li a {color:#fff;}
.popular-posts ul li a:hover {color:#000;}
.PopularPosts h2 {text-indent: 20px;border-top: 2px solid #1a73e8;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: '';}
Jika kalian menggunakan template Viomagz dan ingin menghapus nomer yang di popular post silahkan kalian cari kode Numberedpopularposts, jika sudah ketemu silahkan hapus kode tersebut ( Hapus semua kode CSS yang ada di dalamnya ).
Atau
Kalian menggunakan template lain selain template Viomagz dan ingin menghapus nomor yang ada di popular post tersebut, silahkan arahkan cursor kalian ke arah nomor popular post tersebut > klik kanan > inspect element > cari kode CSSnya, jika sudah ketemu silahkan kalian cari kode tersebut di dalam template dan jika sudah ketemu silahkan kalian hapus kode CSS tersebut.4. Sekarang kalian lompat ke widget popular post.
5. Dan buka seluruh kode popular post tersebut dengan klik tanda titik 3 (...), disini kalian akan menambahkan TAG Icon menggunakan Icon SVG.
6. Jika sudah silahkan kalian tambahkan kode Tag Icon di bawah ini setelah kode <data:title/>,
<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>
Untuk lebih jelasnya silahkan kalian simak kode berikut
Sebelum di tambahkan kode icon :</h2><data:title/></h2>Sesudah di tambahkan kode icon :
</h2><data:title/><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></h2>Untuk lebih singkatnya saat kalian meletakan kode tersebut perhatikan kode di bawah ini.
</h2><data:title/>MASUKAN KODE DISINI</h2>7. Untuk penempatan widgetnya kalian bisa lihat gambar di bawah ini.
8.. Jika sudah silahkan sinpan template kalian dan selesai.
Jika kalian ingin mengganti warna iconnya silahkan ganti kode warna ini fill="#FFD15C", ganti FFD15C denga warna pilihan kalian.Begitulah tutorial Cara Membuat Widget Popular Post Keren Dan Responsive Di blog ( Modifikasi Widget Popular Post ) sangat mudah dan gampang untuk di fahami. Jika kalian memiliki seputar pertanyaan pada postingan di atas silahkan untuk berkomentar pada kolom komentar di bawah ini. Terimakasih dan semoga bermabfaat buat kalian semua.
==Iklan Dipate Disini===