Banyak
sekali hal yang bisa kita lakukan untuk meningkatkan page view blog kita. Salah
satunya adalah mendesign template dan widgetnya seindah dan sekeren mungkin.
Dengan blog yang keren, maka visitor kita akan betah berlama – lama di blog
kita, dan itu tidak hanya berimbas pada page view kita saja, namun rank alexa
dan google kitapun akan semakin bagus jika visitor berlama – lama diblog kita.
Salah
satu hal yang perlu diperhatikan untuk memperindah tampilan blog ini adalah
bagaimana tampilan widget popular post kita. Banyak sekali style yang bisa anda
coba untuk widget popular post anda. Mulai dari yang default dari template
blogger, sampai yang
keren – keren. Dengan popular post kita yang keren, maka visitor akan tertuju
kepada postingan terpopuler di blog kita, dan tentunya page view kita akan
semakin bertambah.
Nah,
pada kesempatan kali ini saya akan membagikan style popular post yang keren sekali. Style popular post kali ini
adalah popular post warna – warni (pelangi) dengan gambar bulat dan berputar
ketika disorot mouse pointer. Lantas bagaimana cara membuatnya? Langsung saja
simak tutorial kali ini.
Cara membuat popular
post warna – warni gambar bulat berputar
1.
Pertama, silahkan masuk terlebih dahulu ke dashboard blogger anda masing-
masing.
2.
Masuk ke “Layout” atau “Tata letak”.
3.
Tambahkan widget popular post pada blog anda. Jangan lupa untuk memberi tanda check list pada tampilkan
gambar, kalau untuk tampilkan cuplikan terserah anda mau ditampilkan atau
tidak.
4.
Jika sudah simpan “Tata letak” anda.
5.
Sekarang anda masuk ke menu “Template”.
6.
Sebelumnya back up terlebih dahulu template anda, untuk berjaga – jaga jika
nanti terjadi kesalahan pada saat proses edit.
7.
Selanjutnya, masuk ke “Edit HTML”.
8.
Cari kode ]]></b:skin> pada template anda. Gunakan Ctrl + F atau tekan
F3 untuk mempermudah pencarian. Jika sudah ketemu, letakkan kode berikut ini
tepat diatasnya.
|
#PopularPosts1 ul{margin:0;padding:5px
0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:5px
0;border:0;padding:10px} #PopularPosts1 ul
li:first-child{background:#ff4c54;width:97%} #PopularPosts1 ul
li:first-child:after{content:"1"} #PopularPosts1 ul li:first-child
+ li{background:#ff764c;width:87%} #PopularPosts1 ul li:first-child +
li:after{content:"2"} #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 + li +
li{background:#c7f25f;width:81%} #PopularPosts1 ul li:first-child + li + li +
li:after{content:"4"} #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 + 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 + li + li
+li{background:#f59095;width:69%} #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:#c7f25f;width:66%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +
li:after{content:"9"} #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{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li
.item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none} #PopularPosts1
img{ -moz-border-radius: 130px; -webkit-border-radius: 130px; border-radius:
130px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease;
transition: all 0.3s ease; padding:4px; border:1px solid #fff !important; }
#PopularPosts1 img:hover { border-radius: 0 0 0 0; -moz-transform: scale(1.2)
rotate(-711deg) ; -webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ; -ms-transform: scale(1.2)
rotate(-711deg) ; transform: scale(1.2) rotate(-711deg) ; }
|
9.
Tekan “Save” atau “Simpan” untuk menyimpan template anda.
Nah,
sekarang coba anda lihat widget popular post anda. Sudah keren bewarna – warni
bukan? Bagaimana mudah sekalikan tutorialnya? Nah itulah tutorial cara membuat popular post bewarna – warni gambar bulat di blog
anda, semoga tutorial ini bermanfaat bagi anda.
0 komentar:
Posting Komentar