21.11.12

Cara membuat Populair Post bisa berputar


MasbertNews-Fitur popular post  pada blogger yang menampilkan beberapa post yang paling populer dapat  kita edit lagi sesuka hati kita,sehingga tampailan pada populair post kita akan lebih terlihat unik dan menarik karena jika mouse diarahkan pada gambar maka gambar tersebut dapat ber putar putar.

Untuk bisa menjadikan halaman populair post kita bisa beputar,kita akan memggunakan populairs post bawaan blogger dengan kita tambahkan kode css ke dalamnya.
apakah populair post seperti ini nantinya akan memberatkan loading pada bog kita?
Jawabanya: tidak,di karenakan kode yang kita tambahkan bukanlah kode javascript jadi gak usah kuatir.

Adapun jika anda berminat untuk menjadikan halaman populair post anda berputar maka cobalah ikuti petunjuk di bawah ini :

1. Masuk ke akun blogger 
2. Masuk ke tataletak dan edit menu populair post
3. Centang image thumbnail,kemudian tentukan jumlah populair post sesuai selera masing masing,setelah itu save setelan.
4. Masuk ke Template,kemudian edit HTML,centang expand widget template
5. Cari kode berikut ]]></b:skin> dan kemudian letakan kode di bawah ini tepat diatas kode ]]></b:skin>.

.popular-posts .item-thumbnail{float:left;} .popular-posts ul{padding-left:30px;} .popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;} .popular-posts ul li img {padding:0px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;} .popular-posts ul li img:hover {border:2px solid #ccc;-moz-transform: scale(1.3) rotate(-360deg) ;-webkit-transform: scale(1.3) rotate(-360deg) ;-o-transform: scale(1.3) rotate(-360deg) ;-ms-transform: scale(1.2) rotate(-360deg) ;transform: scale(1.3) rotate(-360deg);}

6. Setelah itu save setelan dan coba lihat hasilnya.

Semoga bermanfaat bagi anda dan dapat menjadikan blog anda lebih menarik.



Artikel Terkait:

0 komentar:

Posting Komentar