Mempercantik Tampilan Blog dengan CSS Box Shadow

 CSS Tutorial

css box shadow mempercantik tampilan blogSetelah sebelumnya telah saya berikan cara mempercantik tampilan blog dengan CSS Text Gradient, kini saatnya saya akan membahas cara mempercantik tampilan blog dengan CSS Box Shadow. Caranya cukup gampang, namun hasilnya maksimal.

Sebenarnya banyak theme blog yang tampilannya bagus namun sayang penggunaan image-nya terlalu banyak. Telah kita ketahui bahwa penggunaan image yang terlalu banyak di dalam sebuah theme blog akan menambah jumlah http request ketika blog tersebut di buka, tentunya ini akan memperberat loading blog saat di buka.  Lambatnya loading blog saat di buka akan mempengaruhi SEO blog tersebut, karena search engine lebih senang mengindeks blog yang loadingnya cepat.

Lalu bagaimana cara mempercantik tampilan blog tanpa menggunakan image?

Salah satu cara alternative agar blog tetap terlihat menarik tanpa menggunakan image adalah dengan cara menggunakan CSS. Banyak variasi tampilan yang dapat dilakukan dengan CSS, salah satunya adalah membuat Box Shadow. Untuk lebih jelasnya lihat hasil kreasi saya di bawah ini,

box shadow 1
box shadow 2
box shadow 3
box shadow 4
box shadow 5

Contoh kode script mempercantik tampilan blog dengan CSS Box Shadow:

.shadow1 {background:#E6EDF4;color:#444;font-weight:bold;text-align:center;width:300px;border:1px solid #1097e1; -moz-box-shadow: -5px 5px 2px #041031; -webkit-box-shadow: -5px 5px 2px #041031;padding: 5px 0 5px 0;margin:5px 5px 5px 5px;}
.shadow2 {background:#D4E0EC;color:#444;font-weight:bold;text-align:center;width:300px;border:1px solid #1097e1; -moz-box-shadow: 5px 5px 2px #041031; -webkit-box-shadow: 5px 5px 2px #041031;padding: 5px 0 5px 0;margin:5px 5px 5px 5px;}
.shadow3 {background:#C3D4E5;color:#444;font-weight:bold;text-align:center;width:300px;border:1px solid #1097e1; -moz-box-shadow: -5px -5px 2px #041031; -webkit-box-shadow: -5px -5px 2px #041031;padding: 5px 0 5px 0;margin:5px 5px 5px 5px;}
.shadow4 {background:#B0C7DD;color:#444;font-weight:bold;text-align:center;width:300px;border:1px solid #1097e1; -moz-box-shadow: 5px -5px 2px #041031; -webkit-box-shadow: 5px -5px 2px #041031;padding: 5px 0 5px 0;margin:5px 5px 5px 5px;}
.shadow5 {background:#9FBBD6;color:#444;font-weight:bold;text-align:center;width:300px;border:1px solid #1097e1; -moz-box-shadow: 0px 0px 10px #041031; -webkit-box-shadow: 0px 0px 10px #041031;padding: 5px 0 5px 0;margin:5px 5px 5px 5px;}

Untuk warna silahkan di kombinasi, namun yang perlu diperhatikan dari pemilihan warna, jangan menggunakan warna yang silau atau terlalu cerah sehingga dapat mengganggu penglihatan dari pengunjung. pilihlah warna yang sesuai/match dengan warna latar blog anda.

Script kode diatas hanya membuat box shadow, untuk menambahkan tulisan dan link di dalam box shadow anda bisa menambahkan kode berikut ini.

cara menampilkan tulisan di dalam box shadow (no link)

<div class="shadow1">box shadow 1</div>
<div class="shadow2">box shadow 2</div>
<div class="shadow3">box shadow 3</div>
<div class="shadow4">box shadow 4</div>
<div class="shadow5">box shadow 5</div>

cara membuat sebuah link didalam box shadow

<div class="shadow1"><a href="http://linkanda.com">teksnya letakkan disini</a></div>
<div class="shadow2"><a href="http://linkanda.com">teksnya letakkan disini</a></div>
<div class="shadow3"><a href="http://linkanda.com">teksnya letakkan disini</a></div>
<div class="shadow4"><a href="http://linkanda.com">teksnya letakkan disini</a></div>
<div class="shadow5"><a href="http://linkanda.com">teksnya letakkan disini</a></div>

Untuk penempatan yang cocok biasanya diletakkan di sidebar dengan tulisan berisi kan link, atau anda juga bisa memodifikasi sebagai tampilan menu vertical bar atau horizontal bar. Tergantung selera anda, dan kecokcokannya terhadap blog.

Saya rasa cukup sekian dulu cara mempercantik tampilan blog dengan CSS box shadow, teruslah berkreasi untuk blog anda. Buat pengunjung senyaman mungkin di blog anda.

Author: 

Saya adalah pemilik Kaplik.Com, Tujuan saya menulis adalah untuk berbagi pengetahuan maupun pengalaman kepada semua pembaca. Buat yang ingin tanya-tanya bisa langsung Contact ke Google +1, atau bisa melalui facebook. Thanks...

5 Responses

Leave a Reply