earth
/* 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

Terima kasih sudah membaca artikel SC Community's Blog

19 comments

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  

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

Pesan Formulir Komentar:
  • Bijaklah dalam berkomentar agar tidak menyinggung masalah SARA dan menyakiti perasaan orang lain.
  • Link aktif dalam komentar secara otomatis akan dihapus/disembunyikan.
Terima kasih atas perhatiannya

10 Artikel Terbaru

10 Artikel Terpopuler