Artikel menarikCara Membuat Widget Popular Post Warna Warni Keren di Blog - Black Exotic - Hallo friend Black Exotic, Pada kesempatan ini, friend akan membaca Artikel yang dengan judul Artikel menarikCara Membuat Widget Popular Post Warna Warni Keren di Blog - Black Exotic, tim kami telah mengemas artikel ini dengan baik untuk anda simak dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogging, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Artikel menarikCara Membuat Widget Popular Post Warna Warni Keren di Blog - Black Exotic
link : Artikel menarikCara Membuat Widget Popular Post Warna Warni Keren di Blog - Black Exotic

Artikel menarikCara Membuat Widget Popular Post Warna Warni Keren di Blog - Black Exotic

Memasang widget Popular Post merupakan salah satu cara agar pengunjung tertarik untuk membaca artikel-artikel pilihan yang ada di blog kita. Artikel-artikel tersebut merupakan artikel yang sering dibaca oleh pengunjung sehingga harapannya juga dapat menarik perhatian pengunjung lainnya untuk membaca artikel tersebut. Selain itu, widget ini juga berfungsi untuk memudahkan pengunjung dalam menjelajahi setiap postingan yang ada di blog kita. 

Secara default, widget popular post memang telah disediakan oleh blogspot dengan tampilan simpel dan sederhana. Meski begitu, kita dapat memodifikasi tampilan postingan populer tersebut agar menjadi lebih menarik. Salah satunya yaitu dengan memberikan sentuhan warna-warni unik agar tampilan blog menjadi lebih cantik. Tampilan yang unik tentu akan terlihat sangat menarik di mata pengunjung sehingga peluang artikel untuk dibaca juga lebih besar ketimbang saat tampilan standar. 

Pada postingan kali ini, saya akan berbagi cara untuk membuat widget popular post dengan tampilan warna-warni keren dan cantik untuk menghiasi tampilan blog anda. Ada dua style yang bisa anda pilih. Untuk tampilannya kurang lebih seperti berikut ini:

Anda tertarik untuk membuatnya?, silahkan ikuti langkah-langkah pembuatannya di bawah ini.

Cara Membuat Widget Artikel Populer Warna Warni Keren

1. Buka akun blogger anda.

2. Pilih menu layout (tata letak) dan klik pada add gadget (Tambahkan Gadget) di bagian sidebar. 

3. Selanjutnya pilih Entri Populer atau Postingan Populer. Jika sudah, lihat gambar berikut ini:

Keterangan: 

• silahkan beri judul widget dan atur sesuai pilihan anda. 
• jika ingin disertai gambar silahkan centang pada pengaturan thumbnail, kalau tidak ingin ada gambar maka jangan dicentang. 

3. Klik simpan. 

Postingan populer sudah muncul di blog anda. Sekarang tinggal langkah untuk memodifikasi tampilannya. 

4. Kembali pada menu dashboard blogger, pilih tema dan klik edit html. 

5. Kemudian cari kode ]]></b:skin> atau </style>. 

6. Jika sudah ketemu, silahkan anda copy salah satu script kode dari pilihan dua style di bawah ini dan letakkan di atasnya. 

Popular Post style 1

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:63px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

Popular Post style 2

.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
margin:0 0;
padding:0 0;
list-style:none;
border:none;
background:none;
outline:none;
}
.PopularPosts ul {
margin:.5em 0;
list-style:none;
color:black;
counter-reset:num;
}
.PopularPosts ul li img {
display:block;
margin:0 .5em 0 0;
width:50px;
height:50px;
float:left;
}
.PopularPosts ul li {
background-color:#eee;
margin:0 10% .4em 0 !important;
padding:.5em 1.5em .5em .5em !important;
counter-increment:num;
position:relative;
}
.PopularPosts ul li:before,
.PopularPosts ul li .item-title a, .PopularPosts ul li a {
font-weight:normal;
color:#000 !important;
text-decoration:none;
}
.PopularPosts ul li:before {
content:counter(num) !important;
display:block;
position:absolute;
background-color:#333;
color:#fff !important;
width:22px;
height:22px;
line-height:22px;
text-align:center;
top:0px;
right:0px;
padding-right:0px !important;
}
/* Set color and level */
.PopularPosts ul li:nth-child(1) {background-color:#A51A5D;margin-right:1% !important}
.PopularPosts ul li:nth-child(2) {background-color:#F53477;margin-right:2% !important}
.PopularPosts ul li:nth-child(3) {background-color:#FD7FAA;margin-right:3% !important}
.PopularPosts ul li:nth-child(4) {background-color:#FF9201;margin-right:4% !important}
.PopularPosts ul li:nth-child(5) {background-color:#FDCB01;margin-right:5% !important}
.PopularPosts ul li:nth-child(6) {background-color:#DEDB00;margin-right:6% !important}
.PopularPosts ul li:nth-child(7) {background-color:#89C237;margin-right:7% !important}
.PopularPosts ul li:nth-child(8) {background-color:#44CCF2;margin-right:8% !important}
.PopularPosts ul li:nth-child(9) {background-color:#01ACE2;margin-right:9% !important}
.PopularPosts ul li:nth-child(10) {background-color:#94368E;margin-right:10% !important}
.PopularPosts .item-thumbnail {
margin:0 0 0 0;
}
.PopularPosts .item-snippet {
font-size:11px;
}
.widget-content ul li{margin:0;padding:6px 0px;border-bottom:1px solid #ededed
}
.widget-content ul li:last-child{border-bottom:medium none !important
}
.widget-content ul li a{color:#333
}
.widget-content ul li a:hover{color:#C80441
}
.item-date {font-size:11px;font-style:italic;font-weight:bold;color:#FFCC00
}

7. Simpan kembali template anda dan lihat hasilnya. 

Demikianlah Cara Membuat Widget Popular Post Warna Warni Keren di Blog. Semoga bermanfaat. Sumber

 

Demikianlah Artikel Artikel menarikCara Membuat Widget Popular Post Warna Warni Keren di Blog - Black Exotic

Cukup sampai disini artikel Artikel menarikCara Membuat Widget Popular Post Warna Warni Keren di Blog - Black Exotic kali ini, semoga dapat memberi manfaat untuk friend semua. baiklah, jangan lupa membaca artikel lainnya.

Artikel yang sedang anda baca Artikel menarikCara Membuat Widget Popular Post Warna Warni Keren di Blog - Black Exotic dengan alamat link https://blackexotic.blogspot.com/2020/07/artikel-menarikcara-membuat-widget.html

Share this post