Cara Letak Widget Popular Post Bernombor Efek Pusingan 360 Darjah

Ramai blogger baru suka hias blog, maka saya nak kongsikan kepada anda semua variasi widget popular post yang menarik untuk menambah keceriaan, dan berikan sedikit keunikan untuk blog anda. Saya nak kongsikan cara nak letakkan widget popular post bernombor dengan efek pusingan 360 darjah.

Widget ini saya fikir menarik sebab ia berikan sedikit efek pada turutan nombor post popular. Saya juga akan berikan sedikit tips untuk anda buat beberapa perubahan mengikut citarasa anda; yang membenarkan anda customize widget popular post bernombor ini.

Widget Popular Post Bernombor Efek Pusingan 360 Darjah

Widget ini akan kelihatan seperti di bawah ini:

Sebelum anda boleh buat ubahsuai, pastikan anda telah memasukkan widget ini di dalam blog anda. Widget popular post merupakan widget standard yang disediakan di dashboard widget blogspot anda. Hanya perlu add widget tersebut ke bahagian sidebar. Jika dah letak, maka bolehlah anda salin tampal kod HTML/CSS di bawah ini dan diletakkan di bahagian b:skin blogspot anda.

.PopularPosts ul{ list-style:none; counter-reset:li; padding:8px 0px 1px; left:-7px; width:auto; } .PopularPosts li{ position:relative; margin:0 0 10px 0; padding: 3px 2px 0 17px; } .PopularPosts ul li{ position: relative; display: block; margin: 1 0 0 40px; background: #ddd; text-decoration: none; transition: all .3s ease-out; } .PopularPosts ul li:before{ content: counter(li); counter-increment: li; position: absolute; top: 50%; margin: -1.0em; height: 2em; width: 2em; line-height: 2em; font-size: 15px; color: #fff; /* Warna nombor */ background: #FB8835; /* warna background nombor */ border: .2em solid #fff; /* warna border pada nombor */ -webkit-box-shadow: 0 8px 5px -7px #888; -moz-box-shadow: 0 8px 5px -7px #888; box-shadow: 0 8px 5px -7px #888; text-align: center; font-weight: bold; border-radius: 2em; position: absolute; left: 22px; transition: all .3s ease-out; } .PopularPosts ul li:hover{ background: #eee; } .PopularPosts ul li:hover:before{ transform: rotate(360deg); } .PopularPosts ul li a{ font: 14px Georgia, serif; /* Saiz font */ margin: 8px 0 0 12px; color: #444; display:block; min-height:30px; text-decoration:none; } .PopularPosts ul li a:hover{ color: #444; } .PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin: 1px 0 0 40px;padding: 0 10px 0 35px; 0;list-style:none;border:none;background:none;outline:none}

Widget popular post bernombor dengan efek pusingan 360 darjah ini boleh menjadi ciri menarik untuk blogspot anda.

Oh ya, sebelum saya terlupa; jika blogspot anda menggunakan template custom lain, pastikan dulu CSS berkaitan popularpost yang lama dipadamkan dahulu; takut nanti konflik berlaku.

Anda boleh ubah warna nombor kiraan 1-10; dan boleh ubah latar warna nombor. Selain daripada efek nombor turutan berpusing atau berputar, widget ini juga ada efek timbul pada nombor turutan popular post. 

Cubalah, dan berikan kelainan untuk popular post blog anda.