Cara membuat Widget Popular Post Warna-Warni Flat ui

Cara Membuat Widget Popular Post Warna -Warni Flat UI- membuat Widget Popular Post, itulah tutorial kali ini, membuat popular post berwarna agar design tampilan blog menjadi indah dan menarik,

terkadang melihat widget yang begitu-begitu aja kurang menarik ya tanpa kesan warna-warni yang membuat enak dipandang, jadi agar tampilan widget anda keren terutama pada widget popular posting maka tidak ada salahnya membuat atau memodifikasi widget popular post tersebut menjadi warna-warni. berikut bisa anda simak.

kita bahas terlebih dahulu tentang Widget Popular Post, popular posting atau yang dikenal dengan artikel terpopuler didalam suatu blog atau website ,merupakan hal utama bagi pengunjung untuk mengetahui apa yang paling populer di blog tersebut, maka tak jarang para blogger banyak memasang widget ini termasuk saya sendiri.
Cara Membuat Widget Popular Post Berwarna-Warni diblog dengan mudah
Cara membuat modifikasi Widget Popular Post Warna-Warni

widget ini sendiri dapat anda modifikasi sebagaimana code CSS lainnya. agar tampak lebih menarik Widget Popular Post anda, modifikasi dengan warna-warna yang menarik pula sehingga begitu pengunjung datang keblog anda dapat memikat ketertarikan akan isi posting maupun widget blog anda.

disini saya membagikan sebuah code CSS yang dapat anda terapkan pada tata letak widget blog anda.

Langkah - langkah Membuat Widget Popular Post Berwarna-Warni

untuk cara atau langkah-langkah pemasangan Widget Popular Post Berwarna-Warni dapat anda simak berikut ini :
  • yang pertama anda lakukan untuk memasang Widget Popular Posting. buka terlebih dahulu TATA LETAK blog anda - kemudian klik TAMBAHKAN GADGET - Pilih Gadget Entri Populer
Cara Membuat Widget Popular Post Berwarna-Warni diblog dengan mudah
Cara Membuat Widget Popular Post Berwarna-Warni di blog dengan mudah
  • disana anda dapat mengatur berapa jumlah posting yang akan tampil diwidget, thumbnail, maupun keterangan posting. jika sudah klik simpan. 
untuk selanjutnya menerapkan code CSS berwarna warninya. pada dasarnya disini kita mengedit element - element widgetnya. nah untuk menerapkan code CSSnya, simak berikut ini :
  • buka terlebih dahulu TEMPLATE - kemudian EDIT HTML.Cara Membuat Widget Popular Post Berwarna-Warni diblog dengan mudah
  • setelah itu temukan code berikut : </style>
  • letakkan code dibawah ini tepat di atas </style> . 
/*----------CSS Widget Popular Post Berwarna-Warni---------*/
.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:rgb(229, 242, 252);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-size: 13px; font-weight:bold;color:#000!important;text-decoration:none}
.PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:rgb(62, 150, 182);color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;top:0;right:0;padding-right:0!important}
/* ubah warna widget disini*/
.PopularPosts ul li:nth-child(1){background-color:#AA1515;margin-right:1%!important}
.PopularPosts ul li:nth-child(2){background-color:#FF7500;margin-right:2%!important}
.PopularPosts ul li:nth-child(3){background-color:#24F24B;margin-right:3%!important}
.PopularPosts ul li:nth-child(4){background-color:#159AAA;margin-right:4%!important}
.PopularPosts ul li:nth-child(5){background-color:#AEE8EF;margin-right:5%!important}
.PopularPosts ul li:nth-child(6){background-color:#E8ED90;margin-right:6%!important}
.PopularPosts ul li:nth-child(7){background-color:#F1FF00;margin-right:7%!important}
.PopularPosts ul li:nth-child(8){background-color:#868686;margin-right:8%!important}
.PopularPosts ul li:nth-child(9){background-color:#30B9A5;margin-right:9%!important}
.PopularPosts ul li:nth-child(10){background-color:#E5F2FC;margin-right:10%!important}
.PopularPosts .item-thumbnail{margin:0 0 0 0}
.PopularPosts .item-snippet{font-size:11px}
  • setelah itu simpan template anda atau klik save template.
  • anda dapat mengubah warna-warnanya dengan mengganti nilai code warna pada background-color:#AA1515 . klik ini KODE WARNA untuk mempermudah menentukan warna-warna kesukaan anda.
  • sampai disini anda dapat melihat widget Popular Post baru anda dengan warna-warna yang menarik, sehingga membuat para pengunjung dapat nyaman dan menyukai tampilan blog anda.

saya rasa membuat Widget Popular Post Berwarna-Warni diblog tidak sesulit yang dibayangkan, hanya meletakkan sebuah code CSS di HTML TEMPLATE blog anda dengan begitu element CSS baru akan muncul dan mewarnai template blog anda.

mungkin demikian posting atau artikel tentang Cara membuat Widget Popular Post Warna-Warni di blog ala Blog IT jenius, semoga dapat bermanfaat bagi anda yang sedang mendesign sebuah blog ataupun website. sekian dan terimakasih ^_^.

2 komentar

Pak kalau bikin Popular post tiga bagian gimana ya.. All Time - This Mont - This week

Maksudnya yang widget 3 Tab ya gan, lihat diartikel atas lagi, saya udah camtumkan

- Berkomentarlah dengan sopan.
- No Link Aktif, SPAM, SARA P#RN.
- Jangan membalas yang tidak sesuai tema.
- Untuk "PM/tanya hal penting" bisa lewat Social Media yang saya miliki, sekalian Kenalan dengan Admin ^_^.
EmoticonEmoticon