Cara Membuat Efek Hover Pada Pada Suatu Bagian Template

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

(/‾▿‾)/ Back Link Please \(‾▿‾\)

URL

Code For Forum

HTML Code

Anda sedang membaca artikel tentang Cara Membuat Efek Hover Pada Pada Suatu Bagian Template dan anda bisa menemukan artikel Cara Membuat Efek Hover Pada Pada Suatu Bagian Template ini dengan url http://www.sandy-shared.com/2013/08/cara-membuat-efek-hover-pada-pada-suatu.html. Anda boleh menyebarluaskan atau mengcopy artikel Cara Membuat Efek Hover Pada Pada Suatu Bagian Template ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.

- See more at: http://www.sandy-shared.com/2013/08/cara-membuat-efek-hover-pada-pada-suatu.html#sthash.ALa0WAFL.dpuf