Memberi Efek Bayangan (Shadow Effect) Pada Sebuah Tulisan
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: Atau bisa juga dengan menggunakan perintah div seperti ini:
<span style="text-shadow:2px 2px 2px #333;">Tulisan berefek bayangan</span>
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).
<div style="text-shadow:2px 2px 2px #333;">Tulisan berefek bayangan</div>
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: Jika kamu mau memberi efek bayangan pada judul posting, cari kode CSS untuk post, biasanya ditambahkan h3. 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)
}
Demikian juga jika kamu mau memberi efek bayangan pada judul sidebar, carilah kode CSS untuk sidebar.
.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)
}
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.