> > Transform Effect Popular Post
Anonymous

Transform Effect Popular Post

Unknown

: 08.53 14 comments

WIDGET
Dengan meletakkan sedikit tambahan kode tranform:rotate(360deg) pada bagian kode css PopularPosts akan memberikan effect berputar pada bagian gambar ,sudah banyak yang menyajikan tutorial ini ,tetapi yang saya lihat gambar hanya akan berputar jika cursor tepat berada di atas gambar/thumbnail Popular post, di luar area itu gambar tidak akan berputar.Nah pada pertemuan kali ini kang mahfid akan memberikan sebuah cara / trick bagaimana cara supaya gambar bisa berputar jika cursor berada di area widget popular post,untuk demonya silahkan letakkan cursor pada area popular post (bukan hanya di atas gambar/thumbnail).
Berikut cara membuat Transform Effect pada bagian thumbnail Popular Post :
  1. saya anggap sobat sudah berada pada area Edit Html 
  2. cari kode ]]></b:skin> letakkan Css kode berikut tepat di atas kode ]]></:bskin> berikut kodenya
    .item-thumbnail img {
        width: 50px;
        height: 50px;
        float: left;
        padding: 0;
        margin: 15px 0 0px 3px;
        border-radius: 50px;
        transition: all 0.5s ease-in-out;
    }

    .PopularPosts li:hover:hover .item-thumbnail img {
        transform: rotate(360deg);
    }

    .PopularPosts li {
        border-bottom: 1px dotted#222;
        padding: 2px 0;
    }
  3. Preview dulu lalu Save template

Judul Artikel :Transform Effect Popular Post
photo-avatar
Terima Kasih Sobat sudah membaca Artikel saya Tentang Transform Effect Popular Post Silahkan tinggalkan jejak lewat form komentar untuk mempermudah Admin berkunjung balik ke blog sobat. Mau share ulang Article saya ini..? silahkan ..!! tentunya dengan Judul dan narasi yang berbeda dan jangan lupa untuk mencantumkan link sumber..Terima Kasih
Label:

14 komentar

avatar
Balas
Unknown delete 17 September 2013 pukul 11.29

oke ijin simpan scrif nya :)

avatar
Balas
Unknown delete 17 September 2013 pukul 15.36

Silahkan mbak Vina

avatar
Balas
Imron Fhatoni delete 17 September 2013 pukul 16.08

jiahhhh makin keren saja mas mahfid

avatar
Balas
Rohis Facebook delete 18 September 2013 pukul 19.11

muter2 kayak komedi puter *smile

avatar
Balas
Panjz mackenzie delete 18 September 2013 pukul 21.27

wah kang :-bd makin ajib aja... :D

avatar
Balas
Anonim delete 19 September 2013 pukul 15.49

keren kang mahfid, blognya juga tambah bagus :D

avatar
Balas
Anonim delete 29 November 2013 pukul 21.45

pak ma'af, saya mau tanya " TRANSFORM EFFECT POPULAR POST " kalu di google chroom ko ga pada muter, kenapa ya......?, apa emang begituh. mohon penjelasan pak

avatar
Balas
Unknown delete 29 November 2013 pukul 22.32

kalau ingin berfungsi di chroom pada bagian css gunakan kode ini 

.item-thumbnail img {
    width: 50px;
    height: 50px;
    float: left;
    padding: 0;
    margin: 15px 0 0px 3px;
    border-radius: 50px;
-webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.PopularPosts li:hover:hover .item-thumbnail img {
    -webkit-transform: rotate(360deg);transform: rotate(360deg);
}

.PopularPosts li {
    border-bottom: 1px dotted#222;
    padding: 2px 0;
}


disitu ada penambahan syntax -webkit- pada bagian transisi dan transform sengaja saya tidak menggunakan karena tidak valid css 3 kalau sobat ingin menggunakan silahkan gunakan kode ini pasti berputar di chroom

avatar
Balas
Alpha Dian Tamalanrea delete 5 Desember 2013 pukul 18.12

mas mau tanya. maaf ya OOT

kenapa ya setiap kali buat artikel / widget / dll yang mengarah ke link blog lain selalu tembusnya diblog sendiri

avatar
Balas
Unknown delete 5 Desember 2013 pukul 21.50

ada contohnya gak..?

avatar
Balas
Alpha Dian Tamalanrea delete 5 Desember 2013 pukul 22.09



apa ada yang salah pak dalam penulisan?

avatar
Balas
Unknown delete 5 Desember 2013 pukul 22.50

?

avatar
Balas
Alpha Dian Tamalanrea delete 6 Desember 2013 pukul 14.20

maaf pak mau tanya lagi

mau tanya gimana caranya biar postingan bisa nyatu sama label readmore :|

contohnya :

avatar
Balas
Admin delete 19 Januari 2014 pukul 07.22

wah mantap mas..ijin copas kode scriptnya.www.merabah.pw

Posting Komentar


Terima Kasih Sobat Sudah:
1. Berkomentar Dengan Sopan
2. Tidak Memasukkan Link Aktif Dalam Form Komentar
3. Berkomentar Sesuai Artikel/Postingan
4. Berilah Informasi Kepada Admin Jika ada script yang Sudah tidak berfungsi
5. komentar Jorok/kasar /berbau Sara/Porno /saya anggap sebagai SPAM
6.untuk memasukkan gambar gunakan <i rel="image">URL Gambar</i>

Konversi

Loading...