Home / Blogger Corner / Membuat Box Shadow Pada Kotak Komentar

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 😀

About admin

Check Also

Membuat Background Header Berganti Otomatis

Pada kali ini aku akan sedikit berbagi trik mempercantik atau bisa juga trik untuk memodifikasi …

9 comments

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

  2. Terima kasih , ini yang saya cari-cari

  3. Nah,,mantap mun kayak ini,,

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

    makasih infonya,,, kn handak mancubai nah 🙂

    salam blogger

  4. 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 🙂

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *