Home
Cara Membuat Widget Recent Posts Bergerak di Blog
Pasti agan sudah pernah liat Gambar pada Widget Popular Posts mempunyai efek berputar, akan mempercantik tampilan Blog. Ketika cursor disentuhkan pada gambar di widget popular posts, gambar tersebut akan berputar.
Cara membuatnya ga ribet ko gan.. asal agan ada kemauan pasti agan bisa..
Silahkan disimak langkah-langkahnya gan..
1. Login ke akun Blogger.
2. Pastikan widget popular posts telah terpasang di Blog sobat. Jika belum pasanglah terlebih dahulu. Saya yakin hal tersebut gampang dan tidak perlu panduan khusus.
3. Jika telah terpasang, sobat masuk pada bagian template.
4. Klik Edit Template.
5. Cari kode ]]></b:skin> , agar lebih mudah gunakan tombol ctrl+F.
6. Masukan kode berikut diatas kode ]]></b:skin>.
<style type='text/css'>
.PopularPosts .item-title{display:none}
.PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;margin: 5px !important;padding: 0 !important;}
.PopularPosts ul li img {padding:0;-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;height: 80px;width: 80px;}
.PopularPosts ul li img:hover {border:2px solid #BBB;-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) ;}
</style>
.PopularPosts .item-title{display:none}
.PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;margin: 5px !important;padding: 0 !important;}
.PopularPosts ul li img {padding:0;-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;height: 80px;width: 80px;}
.PopularPosts ul li img:hover {border:2px solid #BBB;-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) ;}
</style>
7. Klik Simpan.
Nah sekarang lihat gan hasilnya keren kan..
**************************************************************
Selamat Mencoba Semoga Sukses.
Selamat Mencoba Semoga Sukses.
Kegagalan Bukan Akhir Dari Segalanya.
**************************************************************
Ditulis Oleh : Unknown ~ Software, Blogging, Tips dan Trik
Sobat sedang membaca artikel tentang Cara Membuat Widget Recent Posts Bergerak di Blog. Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Saling menghargai kreatifitas sobat Blogger. Jika Kalian Menemukan Link Download yang Expaired/Mati Segera Hubungi Admin Dengan Cara Memberikan Komentar Dan Menyertakan Alamat Link Postingan Yang Expaired/Mati Agar Link Segera di Perbaiki.
Tidak ada komentar :
Posting Komentar
Rules Berkomentar di dvayshare :
1.No SPAM
2.No SARA
3.Dilarang Menaruh Link Hidup & Link Porno
4.Gunakan Bahasa Yang Sopan