Disini aku akan menuliskan tutorial hover shadow keliling blog atau .content-outer { seperti yg ada di blog ini.
Caranya sebagai berikut:
1. Masuk ke Dashboard > Template > edit HTML
2. Cari kode ".content-outer {"
3. Pergunakan Ctrl + F untuk memudahkan pencarian
4. Jika ketemu hasilnya seperti di bawah ini.
5. Kemudian ganti kode tersebut dengan kode dibawah ini.
Caranya sebagai berikut:
1. Masuk ke Dashboard > Template > edit HTML
2. Cari kode ".content-outer {"
3. Pergunakan Ctrl + F untuk memudahkan pencarian
4. Jika ketemu hasilnya seperti di bawah ini.
.content-outer {
-moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
-webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
-goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
margin-bottom: 1px;
}
5. Kemudian ganti kode tersebut dengan kode dibawah ini.
.content-outer {
background :black;
-moz-box-shadow: 0 0 20px 20px green;
-webkit-box-shadow: 0 0 20px 20px green;
box-shadow: 0 0 20px 20px green;
border-radius: 50px;border: 2px ridge white;
}
Code
di atas gambarnya adalah persis seperi gambar diatas kalau diterapkan,
anda bisa mengubahnya seperti yang aku tandai dengan warna:
20px 20px : jenis ketebalan border shadow hover/px bisa diubah sesuai keinginan.
green: adalah warna border hover shadow nya juga bisa diubah sesuai keinginan kode warna.
Biru : adalah ketebalan 50px radius
border yang melengkung itu juga bisa diubah sesuai keinginan, dan
apabila tidak mau menaruh lengkungan/radius, anda tinggal menghilangkan
kode border-radius: 10px;
6.Tekan pratinjau dulu/preview, dan kalau jadi tekan simpan template.
"Terima kasih sudah membaca artikel
Tutorial
:
. Anda bisa bookmark halaman ini dengan URL
https://henry-dunanz.blogspot.com/2013/11/membuat-border-shadow-hover-keliling.html. Jangan lupa klik salah satu tombol dibawah ini."
Tidak ada komentar:
Posting Komentar