Cara Membuat Widget Profile UI Design dengan Efek Hover Image di Blogger

Pilihan Editor :

Cara Membuat Widget Profile UI Design dengan Efek Hover Image di Blogger
Tags AAA


KURAZONE ~ Halo sahabat Kurazer, pada kesempatan kali ini saya bagikan kembali informasi mengenai dunia Blogger yaitu tentang Cara Membuat Widget Profile UI Design dengan Efek Hover Image di Blogger. Hasil jadi atau demo dari tutorial kali ini bisa kalian lihat pada bagian akhir di artikel ini. Untuk previewnya bisa melihat gambar dibawah ini :


Berikut adalah Cara Membuat Widget Profile UI Design dengan Efek Hover Image di Blogger

1. Masuk ke akun Blogger >> Pilih Tema >> Pilih Edit HTML
2. Copy kode CSS dibawah ini, lalu letakkan (paste) diatas kode ]]> < / b:skin > :
.kur-kura-ku-ra-kurabox604 {position:relative;width:300px;height:380px;background:#000;border-radius:10px;overflow:hidden;box-shadow:0 5px 20px rgba(0,0,0,.3)}
.kur-kura-ku-ra-kuraimgBx604{position:absolute;top:0;left:0;width:100%;height:100%;transition:0.5s;z-index:2;background:#000}
.kur-kura-ku-ra-kurabox604:hover .kur-kura-ku-ra-kuraimgBx604{transform:translateY(-100px)}
.kur-kura-ku-ra-kuraimgBx604 img{transition:0.5s;width:100%}
.kur-kura-ku-ra-kurabox604:hover .kur-kura-ku-ra-kuraimgBx604 img {opacity:0.5}
.kur-kura-ku-ra-kurasosial604{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;display:flex;margin:0;padding:0;}
.kur-kura-ku-ra-kurasosial604 li {list-style:none}
.kur-kura-ku-ra-kurasosial604 li a{position:relative;display:block;width:50px;height:50px;text-align:center;background:#fff;color:#333;margin: 0 5px;border-radius:50%;transition:0.5s;transform:translateY(200px);opacity:0}
.kur-kura-ku-ra-kurabox604:hover .kur-kura-ku-ra-kurasosial604 li a{transform:translateY(0px);opacity:1}
.kur-kura-ku-ra-kurabox604 .kur-kura-ku-ra-kurasosial604 li a .fa{transition:0.5s;font-size:24px;}
.kur-kura-ku-ra-kurabox604 .kur-kura-ku-ra-kurasosial604 li a:hover .fa{transform:rotateY(360deg)}
.kur-kura-ku-ra-kurabox604:hover .kur-kura-ku-ra-kurasosial604 li:nth-child(1) a{transition-delay:0s}
.kur-kura-ku-ra-kurabox604:hover .kur-kura-ku-ra-kurasosial604 li:nth-child(2) a{transition-delay:0.1s}
.kur-kura-ku-ra-kurabox604:hover .kur-kura-ku-ra-kurasosial604 li:nth-child(3) a{transition-delay:0.2s}
.kur-kura-ku-ra-kurabox604:hover .kur-kura-ku-ra-kurasosial604 li:nth-child(4) a{transition-delay:0.3s}
.kur-kura-ku-ra-kuradetails604{text-align:center;position:absolute;bottom:0;left:0;background:#fff;width:100%;height:100px;box-sizing:border-box;padding:10px;z-index:1}
.kur-kura-ku-ra-kuradetails604 h6{font-size:24px;text-align:center;padding:0;}
.kur-kura-ku-ra-kuradetails604 span{color:#ccc;font-size:16px;text-align:center;}
.fa{line-height:50px !important;}
.post-body ul li:before{display:none}
3. Simpan Template
4. Pindah ke Menu Tata Letak
5. Tambahkan Gadget baru >> Pilih HTML/Javascript
6. Tempatkan kode dibawah ini kebagian isi widget :
<div class="kur-kura-ku-ra-kurabox604">
<div class="kur-kura-ku-ra-kuraimgBx604">
<img src="https://i.pinimg.com/originals/d2/41/76/d24176d6f964a63d1470e00231b9aafb.jpg" /></div>
<ul class="kur-kura-ku-ra-kurasosial604">
<li><a href="https://www.kurazone.net/"><i class="fa fa-facebook"></i></a></li>
<li><a href="https://www.kurazone.net/"><i class="fa fa-twitter"></i></a></li>
<li><a href="https://www.kurazone.net/"><i class="fa fa-linkedin"></i></a></li>
<li><a href="https://www.kurazone.net/"><i class="fa fa-instagram"></i></a></li>
</ul>
<div class="kur-kura-ku-ra-kuradetails604"><h6>
Kamen Rider Kabuto</h6><br/>
Pembasmi Alien Worms</div>
</div>
7. Simpan gadget
8. Selesai

NOTE :
  1. Silakan kalian ganti url "https://www.kurazone.net/", menjadi url sosial media kalian (FB,Twitter,Linkedin,Instagram)
  2. Ganti url gambar ini : https://i.pinimg.com/originals/d2/41/76/d24176d6f964a63d1470e00231b9aafb.jpg , menjadi url gambar profil kalian
  3. Untuk pewarnaan dan tinggi/lebar widget bisa kalian kembangkan sendiri sesuai kebutuhan
  4. Apabila hasil jadi tidak sesuai dengan demo, kemungkinan ada kode css yang bentrok dengan css bawaan template blog kalian
Untuk melihat demo dibawah ini, cukup arahkan mouse pada gambar. Atau tap/sentuh gambar apabila kalian menggunakan smartphone

DEMO - DEFAULT

Kamen Rider Kabuto
Pembasmi Alien Worms

DEMO - WARNA SOLID

Kamen Rider Faiz
Pembasmi Spesies Orphnoch

DEMO - WARNA GRADASI

Kamen Rider W
Pengguna Gaia Memory

DEMO - WARNA GRADASI ANIMASI

Kamen Rider Build
Tukang Experiment Botol Bekas


Gimana? Bagus ya...

Itulah informasi mengenai "Cara Membuat Widget Profile UI Design dengan Efek Hover Image di Blogger", selamat mencoba dan semoga bermanfaat. Goodluck!

============================================

Bingung cara bikin background gradasi atau gradasi animasi? Baca triknya di artikel berikut ini :
  1. Cara Membuat Background Gradasi Linear CSS3 di Blog
  2. Cara Membuat Animasi Background Gradasi Linear CSS3 pada Blog




4 komentar :

  1. Keren banget widget profil ui nya, pingin aku terapin di blog tapi link diubah ke mode sharing serta ditambahi tombol subscribe via email.

    BalasHapus
  2. Mantap terimakasih caranya ya

    BalasHapus
  3. Wah jadi rame ya widget profile UI nya... keren sih, tapi lagi pengin nyoba tampilan yang clean dulu.

    BalasHapus
  4. Apakah ini cocok digunakan pada segala tema?

    BalasHapus

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.