earth

Guestbook

/* Iklan google ads */
Hampir setiap blogger tentu ingin menampilkan blognya lebih menawan dan menarik hati. Banyak cara yang dilakukan, baik dengan mendesain ulang template yang sudah ada atau dengan mambahkan berbagai atribut ke dalam blognya. Tentu hal itu sah-sah saja. Bahkan salah satu upaya untuk menaikkan traffics adalah dengan membuat blog kita tampil menarik, ciamik dan penuh daya tarik, sehingga membuat pengunjung merasa betah calik (duduk) sambil lurak-lirik pada artikel-artikel yang terpampang di bilik.

Salah satu untuk membuat tampilan blog kita lebih menarik adalah dengan memberikan efek bayangan (shadow effect) pada sebuah tulisan seperti pada SC Community yang full shadow, hehehe... Mau tahu caranya? Sebenarnya gampang saja untuk memberi efek bayangan pada tulisan ini. Kamu bisa mempelajarinya berikut ini:
Memberi efek bayangan pada posting
Untuk memberikan efek bayangan pada tulisan posting, kamu bisa menambahkan perintah berikut:
<span style="text-shadow:2px 2px 2px #333;">Tulisan berefek bayangan</span>
Atau bisa juga dengan menggunakan perintah div seperti ini:
<div style="text-shadow:2px 2px 2px #333;">Tulisan berefek bayangan</div>
Kamu dapat mengubah ukuran bayangan dan warna bayangan disesuaikan dengan background template blog kamu. Pada perintah di atas, ukurannya bayangannya adalah 2 pixel (horizontal=2px, vertical=2px, blur=2px) dan warna bayangannya adalah abu gelap (#333).
Memberi efek bayangan pada template
Untuk memberikan efek bayangan pada template, tergantung kamu mau menempatkannya dimana. Jika mau memberi efek bayangan pada judul blog, cari kode CSS untuk perintah header, biasanya ditambahkan h1 (judul blog) dan h2 (deskripsi blog). Misalnya seperti ini:
.header h1  {
font-size:40px;
padding:0;
margin:0 0 0 20px;
font-weight:bold;
text-align:left;
color:#eef2d5; 
text-shadow: 2px 2px 2px #333; (tambahan perintah efek bayangan)
}
Jika kamu mau memberi efek bayangan pada judul posting, cari kode CSS untuk post, biasanya ditambahkan h3. Misalnya seperti ini:
.post h3 {
margin:0;
padding: 5px 0px 5px 10px;
text-align: left;
font-size:20px;
font-weight:normal;
overflow:hidden;
text-shadow: 2px 2px 2px #333; (tambahan perintah efek bayangan)
}
Demikian juga jika kamu mau memberi efek bayangan pada judul sidebar, carilah kode CSS untuk sidebar.

Sayangnya, setiap template berbeda-beda dalam memberikan istilah untuk judul blog, deskripsi blog, judul posting, dan judul sidebar tersebut. Ada juga yang memberikan nama judul blog dengan blogname1, deskripsi blog dengan blogname2, judul posting dengan posttitle, dan sidebar dengan widget. Untuk itu kamu harus sedikit teliti dalam mencarinya.

Nah, segitu aja brow, selamat mencoba....
Catatan Tambahan:
Sayangnya tidak semua browser mendukung perintah text-shadow ini, seperti Flock dan IE (Internet Explorer). Tapi Firefox, Google Chrome, Opera, dan Apple Safari sudah dapat membaca text-shadow.

  • Artikel Terkait Dengan CSS dan Javascript

    Terimakasih sudah membaca artikel SC Community's Blog

    20 komentar

    Good post kang... ke dicobaan di blog ane.
    Eh, jadi teu ka Bandung teh?

    7 Oktober 2009 pukul 21.04  

    Saya selalu pengen coba nih tapi pemadaman bergilir dari PLN membuatnya selau tertunda. Akibatnya, ngeblog dan silaturahmi juga kena imbas he he..muantabb seperti biasa, kang.

    8 Oktober 2009 pukul 03.01  

    yup memang mantap pengembangan dari CSS 3, tapi sayang belum semua perambah mendukung.

    14 Oktober 2009 pukul 14.36  

    akhirnya menemukan juga tutorialnya

    15 Oktober 2009 pukul 22.38  

    Unik nich kayaknya. kapan-kapan dicoba ach shadow effect nya.
    tks kang.

    19 Oktober 2009 pukul 05.42  

    no valid dg validatornyah w3 nih, xixixixi...tp keren deh klo ngomongin CSS 3 (pake javascript ajah) LoL...ka mumet2...wkwkwkwk

    23 Oktober 2009 pukul 19.12  

    Tak habis-habisnya kata "hatertengkyu" membanjiri posting2 SC Comm...
    Anging Gusti nu tiasa ngabalesna!

    23 Oktober 2009 pukul 21.34  

    masih bingunngg lebih jelasin please tutorialnya

    31 Desember 2009 pukul 16.10  

    sangat bagus kang...thank's

    28 April 2010 pukul 08.40  

    Aku sedot ilmunya kawan...

    29 Mei 2010 pukul 07.29  

    hahaaaa . . .
    lucu yaaa komen buat bola dunia yang mutar mutar d atas, he..
    oke deh . . . Nuhun Mas Pengen Kopi, tapi pake gula, tapi buat gula biar ane de yang beli . . he

    Oya Tukar link yuk, . .
    Barner nya lgsg ane pasang . .
    oya thanks buat share nyaaa . .

    23 November 2010 pukul 09.00  

    mampir .... en mo xoba nieh keyakx oke thanks artikelnya

    20 Juni 2011 pukul 09.39  

    makasih atas artikelya mas... i'ts done..

    28 Juli 2012 pukul 03.14  

    thanks kang artikel'y menarik..
    tukar link yuk kang , banner'y udh ane simpan di blog ane , cek aja lngsung k TKP...!

    16 Desember 2012 pukul 00.45  

    thanks y sharenya

    14 Agustus 2013 pukul 22.33  

    MANTAP GAN
    KUNJUNGI BALIK BLOG SAYA BOLEH? http://juandimontellan.blogspot.com/

    13 November 2014 pukul 15.51  

    Tambahkan Komentar

    • Dimohon untuk tidak mencantumkan link aktif pada komentar sobat.
    • Gunakan Ruang Tanya pada TabView Menu, jika ingin menanyakan sesuatu yang tidak ada kaitannya dengan artikel di atas.
    Kang eNeS

    Terimakasih atas semua apresiasi yang sobat berikan.

    10 Artikel Terbaru

    10 Artikel Terpopuler