Cara Membuat Widget Populer Post Berwarna

Sesuai dengan judul artikel yang disebutkan kali, yaitu tentang cara bagaimana membuat widget populer psot yang unik serta menarik supaya para pengunjung blog enak serta senang dalam berselancar didalam blog kamu itu.

Pada kebanyak blog yang berkembang banyak sekali widget post populer atau artikel terbaru pada sebuah blog dengan dsain yang sangat unik serta dengan loading yang sangat cepat akan membuat sebuah blog terkesan penuh dengan warna dengan kata lain akan membuat pengunjung sangat senang.

Bagaimana cara membuat widget populer post berwarna warni pada blog ?
Untuk teman-teman semua yang ingin membuat postingan populer dibagian sidebar blog berwarna warni serta unik, berikut merupakan cara membuatnya :

Baca Juga

1. Silahkan login ke blogger kamu
2. Pilih Menu Tata Letak
3. Pilih Tambahkan Gadget / Widget
4. Pilih Postingan Populer, lihat gambar :

Baca juga : Cara Menaikan Sekor SEO Di Chkme

5. Dan silahkan simpan.

Jika kamu membuka blog kamu, maka kamu akan melihat widget post populer dengan biasa saja, nah disini selanjutnya untuk membuat / edit supaya populer post tersebut menjadi berwarna.

6. Silahkan copy code script berikut ini :

/*----- TAB POPULER -----*/ #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:51px;height:51px} #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}

7. Buka Tema / Template blog dan edit HTML kemudian cari kode ]]></b:skin> atau </style>
8. Jika sudah ketemu silahkan paste code diatas tadi tepat sebelum kode atau diatas kode ]]></b:skin> atau </style>
9. Selanjutnya pilih simpan.
Silahkan refresh blog yang tadi kamu pasang script diatas tadi, maka tampilannya akan menjadi berwarna warni indah seperti pelangi yang membuat pengunjung semakin betah berselancar di blog.

Baca jaga : Cara Download Video Di Youtube Tanpa Aplikasi

Demikianlah artikel tentang cara membuat widget post populer berwarna warni dengan mudah. Semoga artikel ini bermnafaat bagi temanteman semua yang sedang mencari panduan seperti tadi.