Translate This Page Here

By Kanwara

Saturday, August 8, 2009

Cara Buat Tulisan Berbayang (Shadow)

Pada tanggal 01 Agustus 2009 yang lalu sobat Sbagyo menanyakan bagaimana cara buat title post double (berbayang maksudnya mungkin) lewat kotak komentar. Sekarang saya ingin bahas caranya disini.
Pasti sobat sudah tahu kan maksud saya tulisan berbayang?, ya simpelnya saya ingin bahas cara buat tulisan/teks berbayang (shadow). Trik ini hanya menggunakan kode CSS dan sedikit HTML, disini saya tidak hanya membahas pada title post saja, saya juga akan perluas dengan membuatnya di postingan juga. Bagaimana sudah siap memulai? mualai apa ya? hehe...

ini dia caranya:

Membuat teks berbayang pada setiap posting:

1. Sign In ke blog anda.

2. Tuju tab Layout/Tata LetakEdit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. TIDAK PERLU mencentang kotak yang bertuliskan Expand Widget Template.

5. Cari kode ini ►
]]</b:skin>

6. Setelah ketemu, Pasang kode dibawah ini persis di ATAS kode tadi:
.tshadow {
color: #000;
background: transparant;
height: 35px;
width: auto;
padding-left: 20px;
line-height: 32px;
font-size: 1.8em;
margin-bottom: 5px;
margin-left: 5px;
text-shadow: 2px 2px 3px #000; /* IMPORTANT */
}


7. Simpan Template

8. Setelah itu kode untuk posting. Sobat hanya menambah kode dibawah ini untuk membuat tulisan berbayang:
<div class="tshadow">Tulisan Yang Ingin Dibuat Berbayang</div>


> Silahkan lihat hasilnya.
___________________________________________

Membuat judul posting/title post berbayang:

1. Sign In ke blog anda.

2. Tuju tab Layout/Tata LetakEdit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. TIDAK PERLU mencentang kotak yang bertuliskan Expand Widget Template.

5. Cari kode ini ►
.post h3

6. Setelah ketemu, tambah kode dibawah ini persis di DALAM tag kode tadi:
text-shadow: 2px 2px 3px #333; /* JANGAN DIRUBAH */

7. Simpan Template selesai dan lihat hasilnya...

PENTING:

Kode ini/Trik ini hanya support dan berfungsi pada beberapa browser.


Lebih lengkap lihat daftar berikut ini:



Moga manfaat!

Jangan lupa baca juga disini

3 comments:

yahaya on December 4, 2010 at 4:48 PM said...

mantap...

KUMPULAN APLIKASI GRATIS on December 17, 2012 at 5:32 PM said...

waah infonya bermanfaat sob

pulsa gratis on May 12, 2013 at 4:09 PM said...

thanks info nya.

Post a Comment

 

Tutorial Blogspot

Recent Comments

About Us

my logo

TEBE is "Tutorial Blogger". This blog serves as showcase for my project and others blogger. Wanna learn more about web/blog design, css, html, graphic design, photography, programming, etc.
[View my complete profil!]

Connect ith Me


Follow Kanwara on Twitter!Connect with Kanwara on Facebook!Visit my wordpress blog!Join at aRawna Blog Tutorial!

Copyright © 2009 All Rights Reserved TeBe Tutorial Blogger | Designed:Kanwara Dotcom