Cara membuat popular post bertingkat dan berwarna

Membuat Popular Post Bertingkat Dan Berwarna

Popular post merupakan salah satu widget yang paling gemar dipakai oleh ramai blogger . Widget ini berfungsi untuk memberitahu tentang artikel paling banyak dibaca . Ia juga bakal menarik pengunjung untuk membaca artikel tersebut . Tema popular post yang diberi oleh google tidak sebegitu menarik menyebabkan para pegunjung tidak perasan akan kewujudan post paling popular tersebut .

Untuk itu saya membuat artikel tentang memperindahkan popular post agar lebih ramai orang akan perasan tentang kewujudan widget ini. Tutorial ini diberi nama Cara membuat popular post bertingkat dan berwarna

Gambar diatas menunjukkan sebuah widget Popular post berwarna dan bertingkat . Menarik bukan ?? Untuk membuatnya sila ikuti tutorial dibawah . Sebelum itu , kita ketahui apa kelebihan Popular Post Berwarna ini

-Mempunyai pelbagai warna
-Valid HTML5
-Mudah dipasang dan digunakan.
-Ringan hanya menggunakan CSS saja.

Cara memasang popular post berwarna dan bertingkat

1. Seperti biasa masuk kedalam blog masing-masing dan ambik template , edit html

2. Salin semua code dibawah ini

#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{position:absolute;top:10px;right:-5px;order-radius:50%;background:#353535;width:40x;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:75%} #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:72%} #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:78%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:81%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:84%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#ff764c; width:87%} #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:10px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px} .PopularPosts .item-title a{font: normal bold 36px Segoe UI;font-size:16px; color: #706f5c;} .PopularPosts .item-title a:hover{color:#c22400;text-decoration:none} .widget-content.popular-posts li{font: normal normal 16px Segoe UI} .item-snippet {height:2.5em; overflow:hidden}

3. Pastekan semua code tersebut diatas ]]>

4. Pasang widget popular post yang diberikan oleh google .

5. Selesai

Peringatan : Untuk nampak menarik dan tersusun sila pasang hanya 5 popular post sahaja . Jika tidak widget anda nampak sedikit serabut dan tidak tersusun