Membuat Box Shadow Pada Kotak Komentar


Salam semuanya, Sedikit cara dan tutorial dari Pengalaman Ku jua nih Sobat. Aku akan sedikit berbagi Tutorial mengenai Pembuatan Box Shadow (Bayangan Pada Kotak), Kita di sini akan Menggunakan Sebuah CSS terbaru yaitu CSS3 , Mengapa? Di karenakan CSS3 Sangat mudah di gunakan pada CSS Blog Sobat.

Pada kali ini Aku akan membahas, bagaimana sih membuat sebuah kotak komentar yang di bawahnya memiliki bayangan yang warnanya bisa kita atur sendiri sesuai kehendak kita. Untuk itu silahkan lihat Sedikit penampakan kotak komentar yang menggunakan Box Shadow yang ada di Blog ku.



Pada gambar di atas silahkan sobat lihat pada bagian bawah kotak komentarnya di sana ada sebuah bayangan berwarna abu - abu yang agak transparant, dan bayangan itu membuat sebuah kotak komentar kita pun menjadi hidup.

Untuk itu kita tidak akan berpanjang lebar, Silahkan sobat lihat tutorialnya di bawah ini :

  1. Silahkan Login ke Blogger
  2. Kemudian Rancangan > Edit HTML
  3. Cari kode #comment-header pada bagian CSS /* Comments
  4. Kemudian Masukan kode berikut tepat di paling bawah bagian CSS #comment-header

  box-shadow:1px 1px 2px #666666; }

Contohnya seperti pada CSS di bawah ini

#comment-header{
  float:left;
  padding:5px 0 40px 10px;
  margin:5px 0px 15px 0px;
  position:relative;
  background-color:#f3f3f3;
  border:1px solid #efefef;
  box-shadow:1px 1px 2px #666666; }

*Keterangan
Pada Kode yang berwana Merah : Apabila ukuran px nya lebih besar maka bayangan suatu kotak akan besar juga.
Pada Kode Berwarna Biru : Warna bayangannya pada Kotak komentar yang sobat buat menggunakan Box Shadow.


Untuk tipe bayangan yang lainnya silahkan sobat lihat di bawah ini :


#Contoh_A {
-moz-box-shadow: -5px -5px #222;
-webkit-box-shadow: -5px -5px #222;
box-shadow: -5px -5px #222;
}

#Contoh_B {
-moz-box-shadow: -5px -5px 5px #222;
-webkit-box-shadow: -5px -5px 5px #222;
box-shadow: -5px -5px 5px #222;
}

#Contoh_C {
-moz-box-shadow: -5px -5px 0 5px #222;
-webkit-box-shadow: -5px -5px 0 5px #222;
box-shadow: -5px -5px 0 5px #222;
}

#Contoh_D {
-moz-box-shadow: -5px -5px 5px 5px #222;
-webkit-box-shadow: -5px -5px 5px 5px #222;
box-shadow: -5px -5px 5px 5px #222;
}

#Contoh_E {
-moz-box-shadow: 0 0 5px #222;
-webkit-box-shadow: 0 0 5px #222;
box-shadow: 0 0 5px #222;
}

#Contoh_F {
-moz-box-shadow: 0 0 5px 5px #222;
-webkit-box-shadow: 0 0 5px 5px #222;
box-shadow: 0 0 5px 5px #222;
}

Jika selesai, silahkan Klik SAVE TEMPLATE

Selesailah sudah tutorial di atas, jika sobat berminat silahkan di coba sendiri. Selamat Mencoba :D

9 Responses to "Membuat Box Shadow Pada Kotak Komentar"

  1. terima kasih atas infonya, ini sangat bermanfaat sekali bagi saya

    ReplyDelete
  2. Nah,,mantap mun kayak ini,,

    ampun ku polos haja,, maklum kada tapi bisa CSS punk,,,hhehe

    makasih infonya,,, kn handak mancubai nah :)

    salam blogger

    ReplyDelete
  3. thanks gan :) entah kenapa ane liat ini kok kyknya semakin susah hehehe maklum ane pentium 1 :) hehehehe semoga ane bisa...

    css3 css ndiri aja ane bingung hehehehe , terima kasih yah gan. mampir yah sob klo sempat :)

    ReplyDelete