Cara Membuat Widget Popular Post Keren Mirip Arlina Design di Blogger

Cara Membuat Widget Popular Post Keren Mirip Arlina Design di Blogger


Pada sebuah blog widget populer post menurut saya sangatlah penting, karena dengan adanya widget tersebut pengunjung blog kita dapat mengetahu artikel apa saja yang sedang populer atau sering di kunjungi orang.

Ada banyak desain widget populer post yang tersebar di google, namun mingkin ada beberapa orang yang sudah bosen karen hanya itu itu saja. Untuk itu pada kesempatan kali ini saya akan memberikan yang baru yaitu Cara Membuat Widget Popular Post Keren Mirip Arlina Design.

Ok langsung saja kita masuk kepambahasannya, widget ini mirip dengan blog Arline Design. Untuk kamu yang ingin mencobanya pada blog masing-masing kamu bisa mengikuti panduan yang telah saya tulis pada postingan kali ini. Berikut tutorialnya :


Cara Membuat Widget Popular Post Keren

1. Pertama kita login ke blogger.com dan pilih blog yang ingin menerapkan cara ini.

2. Klik pada menu Tema lalu klik Edit HTML

3. Cari kode ]]></b:skin> atau </stye> untuk lebih cepat mencarinya kita gunakan CTRL+F.

4. Kemudian copy pastekan kode dibawah ini tepat diatasnya kode No. 3


/*POPULAR POST By Mediaachmad.com*/
.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;}

5. Jika tema blogger kamu tidak memiliki Number Count pada Widget Popular Post, maka hanya memasang kode CSS pada cara No. 4 saja.

6. Jika sudah klik Simpan


Demikianlah artikel Cara Membuat Widget Popular Post Keren Mirip Arlina Design di Blogger yang dapat saya sampaikan semoga bermanfaat dan menambah pengetahuan kita seputer coding blogger. Sekian dari saya terima kasih.

Tidak ada komentar untuk "Cara Membuat Widget Popular Post Keren Mirip Arlina Design di Blogger"