Sponsor adsense

Cara mudah membuat box shadow di blogger

Faronesia.com - Halo blogger, apa kabar anda semua?  di kesempatan kali ini admin akan memberikan trutorial blogger yang mungkin berguna untuk anda. Seperti yang telah disebutkan di judul yaitu cara membuat box shadow dipostingan blogger. Dari namanya saja, Box shadow berarti kotak yang memiliki bayangan, arti atau maksud dari bayang  tersebut nantinya untuk mempercantik atau bisa juga untuk memperjelas suatu maksud yang tertera diblogger. Sebelum melanjutkan ke tutorialnya, ada beberapa hal yang harus anda ketahui tentang kegunaan box shadow, diantaranya:

1. Membedakan kata
Box shadow kemungkinan dipakai untuk membedakan kata yang mengandung unsur atau kalimat penting didalamnya menurut pemilik blog.

2. Pembungkus kalimat perintah
Box shadow juga bisa digunakan untuk kalimat perintah misalnya, larangan, himbauan, tata cara, dan lain sebagainya. Hal ini memungkinkan agar pembaca bisa membedakan antara teks postingan dan teks perintah di suatu blog.

3. Percantik blog
Mungkin ada beberapa blogger menganggap bahwa box shadow bisa digunakan untuk mempercantik blog. Seperti contoh blog faronesia.com pada halaman utamanya ada beberapa bagian yang menggunakan box shadow.

Admin rasa penjelasan tadi sudah cukup jelas untuk anda walaupun terkesan sangat singkat. Selanjutnya mari ke tutorial cara pembuatannya atau penerapan box shadow di blog.

Cara mudah membuat box shadow di blogger

Pertama, buat kotak/boxnya terlebih dahulu, seperti dibawah ini.
<div style="background: #5c97bf; color: #ffffff;">Hanya contoh faronesia.com</div>
Hasilnya:
Hanya contoh faronesia.com

Kedua, untuk menambahkan efek shadow, silahkan selipkan kode dibawah ini.
box-shadow: 5px 5px 5px rgba(0 , 0 , 0 , 0.12) , 0 5px 5px 5px rgba(0 , 0 , 0 , 0.12);
Menjadi seperti dibawah ini
<div style="background: #5c97bf; color: #ffffff; box-shadow: 5px 5px 5px rgba(0 , 0 , 0 , 0.12) , 0 5px 5px 5px rgba(0 , 0 , 0 , 0.12);">Hanya contoh faronesia.com</div>
Hasilnya:
Hanya contoh faronesia.com

Sebenarnya sampai disini sudah selesai, anda bisa menempelkan kode tersebut dimana saja seperti di widget maupun dalam postingan. Namun, jika anda ingin box atau kotak terlihat lebih cantik anda bisa menambahkan kode border dibawah ini.
Border/garis tepi, kodenya: Border: 2px #94e0ee solid;
Border radius/sumbu lengkung, kodenya: border-radius: 20px;
Jika digabungkan menjadi seperti dibawah ini
<div style="background: #5c97bf; color: #ffffff; Border: solid 2px #94e0ee; border-radius: 20px; box-shadow: 5px 5px 5px rgba(0 , 0 , 0 , 0.12) , 0 5px 5px 5px rgba(0 , 0 , 0 , 0.12);">Hanya contoh faronesia.com</div>
Hasilnya:
Hanya contoh faronesia.com

Anda bisa memodifikasi kode diatas sesuai kebutuhan anda dengan penambahan kode-kode tertentu seperti align, padding, dan lainnya sesuai kebutuhan.

Bagaimana, Mudah sekali bukan? Jika masih merasa bingung mungkin anda kurang cermat atau membaca tidak secara keseluruhan. Masih bingung lagi? Silahkan hubungi kontak yang tersedia di website ini.

NOTE: Jika anda ingin memasukkan ke dalam template usahakan anda sudah membackup templatenya terlebih dahulu, gunanya untuk menghindari hal yang tidak di inginkan seperti salah penempatan kode yang mengakibatkan template error

Demikianlah mengenai cara mudah membuat box shadow di blogger semoga bermanfaat untuk para pembaca dimanapun anda berada. jangan lupa share dan jika ingin tanggapan serta masukan silahkan di kolom komentar yang telah tersedia dibawah postingan ini.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel