Cara Membuat Efek Shadow pada Outer/Tepi Blog

Cara Membuat Efek Shadow pada Outer/Tepi Blog - Mungkin outer atau yang disebut dengan tepi blog sudah seringkali kita lihat pada blog-blog rekan seperjuangan yang memakai garis tepi blog.

Efek shadow adalah efek yang akan meberi bayangan pada outer atau tepi blog tanpa diberi border maupun garis tepi blog. Sebenarnya penggunaan feature ini tak lain dan tak bukan hanyalah untuk membatasi antara luar dan dalam outer blog dan mungkin juga dapat mempercantik blog kita dalam faktor berpenampilan, dan juga dapat menjadikan blog kita terlihat rapi.

Selain itu, ternyata pemasangan feature ini juga sangat mudah dan praktis sekali, anda hanya perlu menambahkan beberapa kode script pada Edit HTML, tanpa menggunakan JavaScript. Well, bagi anda yang berminat untuk memasang efek shadow di blog anda, silahkan disimak yang berikut ini.

1. Login ke Blogger.

2. Cari salah satu kode di bawah ini (gunakan CTRL+F), karena pada umumnya kode setiap template sedikit berbeda.
"outer-wrapper" atau "wrapper"
Keterangan: jika kedua kode diatas tidak ada, carilah kode yang menunjukan outer wrapper atau tepi pada blog anda.

3. Lalu, letakkan kode di bawah ini tepat dibawah salah satu kode pada langkah ke-2 tadi.
border:2px solid #d50303;
border-color:#9ecaed;
box-shadow:0 0 10px #666}
Contoh :
#wrapper{
background:#ebebeb; font-size:13px; margin:0px auto 30px; width:950px; overflow:hidden;
border:2px solid #d50303;
border-color:#9ecaed;
box-shadow:0 0 10px #666;}
Keterangan:
  • 2px = ketebalan border outer (jika tidak perlu, berikan saja 0px)
  • #d50303= warna border outer
  • 10px = ketebalan efek shadow outer blog
  • #666 = warna shadow outer blog
Demikian informasi tentang cara membuat efek shadow pada outer/tepi blog, semoga bermanfaat, dan selamat mencoba.
sumber kode:tuliskan.com

10 komentar untuk "Cara Membuat Efek Shadow pada Outer/Tepi Blog"

  1. border:2px solid #d50303;
    border-color:#9ecaed;
    box-shadow:0 0 10px #666;

    itu buat ap border color? ._. kan sudah ada #d50303? ._.

    BalasHapus
    Balasan
    1. o iya 1 lagi, cara itu hanya berfungsi untuk browser google chrome,untuk browser lain ndk bisa :v
      kl mau sih bisa di tambah kode lg,,
      - mozila: -moz-box-shadow:0 0 10px #666
      - safari : -webkit-box-shadow:0 0 10px #666

      *biar di katain mastah xD http://ah-shared.blogspot.com*

      Hapus
    2. iya sob :v, trimakasih infonya :D

      Hapus
  2. Tengkyu tutor nya bang,
    gak tau dah ini blog bagus apa engga kalo dikasih shadow :D

    http://melancong94.blogspot.com/

    BalasHapus
  3. makasih gan infonya
    http://arif-net.blogspot.com/

    BalasHapus
  4. makasih gan.. artikelnya berkualitas

    BalasHapus
  5. makasih gan, ijin nyoba
    http://lukiluck11.blogspot.com
    http://malangshopaphoria.blogspot.com

    BalasHapus
  6. Ijin praktekkan.... thanks infonya !

    BalasHapus

Untuk menyisipkan kode, gunakan tag <i rel="code">Kode disini...</i> atau <i rel="pre">Kode disini...</i>
Untuk menyisipkan gambar, gunakan <i rel="image">URL gambar disini...</i>
Untuk menyisipkan catatan, gunakan <b rel="quote">Tulis catatan disini...</b>
Untuk menciptakan efek tebal, gunakan tag <b>Teks anda disini...</b>
Konversi Kode Back to Top

Back to Top