Tutorial Membuat Disclaimer #3

Hai semuaa! Tak terasa sudah mau bulan November saja (bentar lagi aku ulangan semester dong :( ) . Hari ini, aku mau ngepos tutorial . Sebenarnya, tutorial ini seringnya disebut Hover Image Got Something. Tapi kupikir, nama seperti itu terlalu rumit :v , yah jadinya aku namai saja disclaimer :v . Lagipula, widget ini mirip sama disclaimer kok. Ya kan? iya iya lah. Oke, bagi yang penasaran bagaimana bentuk widget ini, langsunga aja simak pos ini!
credit: Aera dan Kak Ezah
Caranya antara lain:
1. Buka blogger
2. Pilih menu Tata Letak
3. Klik Tambahkan Gadget
4. Pilih HTML/Javascript
5. Copas kode di bawah:

<style type="text/css"> .navs {
width:100%;
height:100%;
margin-top:10px;
text-align:center;
border-radius:50%;opacity:0;
 -webkit-transform: scale(0) rotate(-360deg);
 -moz-transform: scale(0) rotate(-360deg);
 -o-transform: scale(0) rotate(-360deg);
 -ms-transform: scale(0) rotate(-360deg);
 transform: scale(0) rotate(-360deg);
background-color:white;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-tG-EqdV7QZrGEQ93hwOi5bvRYKdxmqcw3pH6XinCsWtx9bY-ek2sgzP5i-v3eeDl31FKM23XCoN8mJDcSfatvbxb7UBD7U5R_J7iCGQKxc9Qo6s3EwjFJQ0lu4dGwVfv6LuJ5_NRtW8/s1600/spotty-pink-background-seamless.jpg);
 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;}
.navs a {
color:white;
}
.outside:hover .navs {
opacity:1;
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -o-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
}
.outside {
height:250px;
width:250px;
border-radius:50%;
 box-shadow:
  inset 0 0 0 15px rgba(255,255,255,0.6),
  0 1px 2px rgba(0,0,0,0.1);
-webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;
}
#outside1 {
background-image: url(http://wallpapers.avantzone.com/data/media/102/Forever_Friends_14.jpg);
background-position:50% 50%;
background-size:330px;
background-color:#FFFFFF;
}
#outside1:hover {
box-shadow:
  inset 0 0 0 0px rgba(255,255,255,0.6),
  0 1px 2px rgba(0,0,0,0.1);
}
</style>
<center><div class="outside" id="outside1"><div class="navs">
ANYTHING HERE
</div></div></center>

keterangan:

Biru: URL Background

Merah: Tinggi dan lebar widget

Oranye: Kode Warna

Kuning: Taruh widget/tulisan apa pun yang kalian mau

6. Simpan!
Bagi yang penasaran bagaimana bentuk widgetnya, lihat aja live previewnya di bawah! oke, terima kasih sudah membaca posku kali ini.

ANYTHING HERE