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:
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....
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.
19 komentarPosting Komentar
Good post kang... ke dicobaan di blog ane.
Eh, jadi teu ka Bandung teh?
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.
yup memang mantap pengembangan dari CSS 3, tapi sayang belum semua perambah mendukung.
@Rep Pasti:
Cobaan, alus geura.
@Rep Ivan K.:
Aduh... kasian atuh klo PLN-nya ngadat trus, hehe...
@Rep Choen:
Benar sekali sobat, ada beberapa browser yg gak mendukung text-shadow ini, seperti IE dan Flock.
Unik nich kayaknya. kapan-kapan dicoba ach shadow effect nya.
tks kang.
no valid dg validatornyah w3 nih, xixixixi...tp keren deh klo ngomongin CSS 3 (pake javascript ajah) LoL...ka mumet2...wkwkwkwk
Tak habis-habisnya kata "hatertengkyu" membanjiri posting2 SC Comm...
Anging Gusti nu tiasa ngabalesna!
masih bingunngg lebih jelasin please tutorialnya
trimakasih
wah bagus.. !!!! good..
sangat bagus kang...thank's
Aku sedot ilmunya kawan...
bagus
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 . .
mampir .... en mo xoba nieh keyakx oke thanks artikelnya
makasih atas artikelya mas... i'ts done..
thanks kang artikel'y menarik..
tukar link yuk kang , banner'y udh ane simpan di blog ane , cek aja lngsung k TKP...!
thanks y sharenya
MANTAP GAN
KUNJUNGI BALIK BLOG SAYA BOLEH? http://juandimontellan.blogspot.com/
Tambahkan Komentar
Terimakasih atas semua apresiasi yang sobat berikan.