Assalamualaikum Wr.Wb. Kali ini saya akan share Cara Membuat Efek Hover Pada Pada Suatu Bagian Template. Ok langsung Ke-TKP aja sob..
1. Loggin ke blogger
2. Klik Template > Edit Template
3. Tekan Ctrl+f , cari kode yang ingin di buat efek hover, misalnya
.postright
hover {border:5px solid #f03;background: #181818;-moz-transition: all 0.2s ease-in-out;-webkit-transition: all 0.2s ease-in-out;
4. Masukkan kode diatas di bagian template yg ingin di buat efek hover misalnya
.postright {
overflow: hidden;
background: #000;
display: block;
float: left;
width: 678px;
padding: 12px;
border: 1px solid #222;
margin: 7px;
border-radius: 8px;
height: 200px;
position: relative;
5. Selanjutnya tinggal kamu masukkan kode
hover {border:5px solid #f03;background: #181818;-moz-transition: all
0.2s ease-in-out;-webkit-transition: all 0.2s ease-in-out;
di bagian
.postright tapi sebelum tutup kurung
}
6. Jadinya akan seperti ini
.postright {
overflow: hidden;
background: #000;
display: block;
float: left;
width: 678px;
padding: 12px;
border: 1px solid #222;
margin: 7px;
border-radius: 8px;
height: 200px;
position: relative;hover {border:5px solid #f03;background: #181818;-moz-transition: all
0.2s ease-in-out;-webkit-transition: all 0.2s ease-in-out;}
Nb:
Kode yang
Hijau, anda Bisa ganti dengan bagian yg ingin di Hoverkan
-Atau anda juga bisa menambahkan background,-webkit,border-radius:dan sebagainya.
-Kalo yang lain anda bisa edit sendiri.
Ok sekian dari saya. Semoga bermanfaat sob. Jika tutorial tidak berhasil silahkan berkomentar di artikel ini atau chat saya di sini
Muh. Afnur Sandy Lamakarate
Sumber :
Pink-result
Penulis :
Blogger Indonesia
Judul : Cara Membuat Efek Hover Pada Pada Suatu Bagian Template
Deskripsi : Assalamualaikum Wr.Wb. Kali ini saya akan share Cara Membuat Efek Hover Pada Pada Suatu Bagian Template. Ok langsung Ke-TKP aja sob.. ...