Horas: Membuat border shadow hover keliling blog
Berita Terbaru :

Membuat border shadow hover keliling blog

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.



.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 : Membuat border shadow hover keliling blog. 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