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


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