Cara Membuat Popular Post Responsive Seperti Arlina Design

Cara Membuat Popular Post Responsive Seperti Arlina Design - pada kesempatan kali ini, saya akan memberikan sebuah tutorial popular post yang digunakan pada template arlina design.

Arlina design merupakan seorang blogger yang bergelut pada dunia tutorial dan template yang terkenal di Indonesia selain bang adhy suryadi, igniel dan mas sugeng.

Arlina design sudah membuat berbagai macam template yang cukup terkenal yaitu simply, viral go, dan lain sebagainya. 

Template arlina design juga merupakan template yang responsive dan SEO friendly, yang bisa dipakai oleh blogger di Indonesia maupun diluar.

Yang membuat saya tertarik adalah widget popular post yang digunakan pada template arlina design, membuat saya tertarik untuk membuatnya, untuk itulah saya ingin membuatkan tutorialnya, supaya sobat semua bisa menerapkannya pada blog anda.

Namun sebelum kita masuk ke tutorial cara membuat popular post responsive seperti arlina design, saya ingin menjelaskan terlebih dahulu dari kegunaan popular post responsive tersebut.

Popular post merupakan widget yang terdapat pada bagian widget sidebar, widget popular post ini juga bertugas untuk memberi tau artikel yang sedang dibaca banyak pengunjung di dalam sebuah blog tersebut, untuk itulah popular post ini sangat berguna untuk blog anda.

Jika sobat sudah paham tentang kegunaan dari popular post responsive tersebut, maka kita akan masuk ke bagian topik nya yaitu cara membuat popular post responsive seperti arlina design, simak dibawah ini.

Cara Membuat Popular Post Responsive Seperti Arlina Design Di Blog

Langkah 1 : masuk ke akun blogger anda.

Langkah 2 : masuk ke menu Tema >> Edit HTML.

Langkah 3 : kemudian cari kode /* Popular Posts */, untuk mempercepat pencarian gunakan CTRL+F.

Langkah 4 : jika sudah ketemu, hapus kode tersebut lalu ganti kode tersebut dengan kode dibawah ini.

/* POPULAR POST */
.popular-posts {background: linear-gradient(127deg, #de0985, #f18241);}
.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;}

PENTING : Jika kamu pengguna template viomagz, dan ingin menghapus Number Count widget popular post. Silakan kalian cari code. Numberedpopularposts silakan kamu hapus semua CSS style yang terdapat di dalammnya.

- ATAU -

PENTING : Jika kalian pengguna template lain, dan ingin menghapus Number Count widget popular post, silakan kalian cari lewat inspect element paskan cursor di salah satu Nomor count widget popular post, lalu cari code CSS countnya (biasanya terletak di ::before atau ::after). Jika sudah silakan cari code tersebut di dalam template kalian, jika sudah ketemu silakan kalian hapus CSS tersebut, atau hapus keterkaitan code CSS tersebut.

Langkah 5 : Simpan.

Untuk penerapan widget nya sebagai berikut.

Cara Menambahkan Icon Popular Post Responsive Di Blog

Langkah 1 : masuk ke menu Tema >> Edit HTML.

Langkah 2 : copy kode dibawah ini, lalu pastekan kode tersebut tepat DIATAS kode ]]></b:skin>.

.PopularPosts h2 svg {margin-right: 15px;float: right;display: inline-block;width: 20px;height: 20px;vertical-align: -5px;background-repeat: no-repeat!important;content: '';}

Langkah 3 : selanjutnya, cari kode <data:title/></h2></b:if>, jika sudah ketemu pastekan kode dibawah ini, tepat di kode <data:title/>DISINI</h2></b:if>.

<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>

Langkah 4 : Simpan.


Baca juga

• Cara Memasang Tombol Buka dan Tutup Komentar di Blogger
• Cara Memasang Tag Label Di Bawah Postingan Blogger
• Cara Mengganti Favicon Blogger 100% Work

PENTING : Jika kalian ingin mengganti warna icon silakan ganti Fill nya, Contoh fill="#FFD15C", silakan ganti #FFD15C sesuai dengan warna keinginan kalian, harus berupa warna HEX