Apa kabar teman-teman.....
Kali ini saya akan membagi tutorial blog mengenai bagaimana kita bisa membuat yang namanya " TEXT SHADOW". Trik ini adalah oleh-oleh, yang saya dapat ketika saya mampir di Gubuk Reyot. (Sukses selalu Gubug Reyot..!!!).
OK...!!!, Ada dua cara dalam pembuatan text-shasow :
1. Menggunakan kode html (xhtml)
Kita bisa secara langsung membuat Text Shadow pada area posting, dengan cara menambah kode html pada area html. Berikut adalah cara penulisan kode dan contoh hasilnya :
<h3 style="color: #01022c; font-family: staccato222 BT; font-size: 2em; font-weight: 700; line-height: 1.2em; padding: 3px 10px; text-shadow: 0.1em 0.1em 0.2em rgb(119, 119, 119);"> Tuliskan Teks di sini !! </h3> Tuliskan Teks di sini !! |
<div style="background: url("images/h.gif") no-repeat scroll left center rgb(22, 22, 43); border-top: 1px solid rgb(92, 93, 130); color: #0308e6; font-family: staccato222 BT; font-size: 2em; font-weight: 900; line-height: 1.2em; margin-top: 20px; padding: 3px 10px; text-align: center; text-shadow: 0.1em 0.1em 0.2em white;"> <span style="border-bottom: 1px solid rgb(85, 85, 85);">Text-Shadow</span> Tuliskan teks di sini !</div> Text-Shadow Tuliskan teks di sini ! |
<h2 style="background: none repeat scroll 0% 0% rgb(136, 136, 136); border-top: 1px solid rgb(238, 238, 238); color: black; float: left; font-family: Verdana; font-size: 22px; padding: 4px 10px; text-align: center; text-shadow: 0.1em 0.1em 0.2em rgb(252, 217, 219);"> Tuliskan Teks di sini !!! </h2> Tuliskan Teks di sini !!! |
Kode di atas hanya beberapa contoh penulisan dalam bentuk KODE HTML dan anda masih dapat mengembangkanya lagi sesuai selera anda.
2. Menggunakan kode CSS.
Untuk cara yang ini anda harus menyisipkan kode Css pada Template, dan untuk
menampilkan text shadow kita juga harus menambah kode html pada widget atau area posting.
menampilkan text shadow kita juga harus menambah kode html pada widget atau area posting.
Langsung saja ya....cara pemasangan kode css pada template seperti ini :
1. Login
2. Klik Rancangan dan pilih edit html
3. Sebagai pengaman silahkan download dulu template dan simpan dikomputer anda.
4. Cari Syntax .post{.....}
Ingat.... setiap template bentuk penulisannya berbeda-beda, tapi jangan khawatir...
anda cari saja yang kira-kira seperti ini :
| /* Posts-----------------------------------------------*/ h2.date-header{margin:1.5em 0 .5em} .post{margin: 5px 0 25px 0;border-bottom: 0px solid #dddddd;padding-right:10px;} .post h3{margin:0 0 8px 0;padding:0;color:#111111;font:bold 22px Arial, Verdana;line-height: 26px;} .post h3 a,.post h3 a:visited,.post h3 strong{display:block;text-decoration:none;color:#111111;font:bold 22px Arial, Verdana;} .post h3 strong,.post h3 a:hover{color:#611f06;font:bold 22px Arial, Verdana;text-decoration:underline;} |
5. Dan letakkan kode berikut tepat dibawahnya :
| .post h1.sdbg {color:#000115;background:#666;text-shadow:#ebebfd 0.05em 0.05em 0.2em;border-top: 1px solid #eee;padding:2px 12px;} .post h2.sdbg {font-size:130%;font-family:trebuchet ms;line-height:1.2em;color:#000117; border-top:1px solid #888;background:#777;text-shadow: white 0.1em 0.1em 0.2em;padding:0 10px;} .post h3.sd {color:#000;text-shadow: gray 0.1em 0.1em 0.2em;padding:0 6px;} |
6. Simpan template, dan selanjutnya kita mulai memasang kode html pada area widget atau posting.
Berikut adalah cara penulisan kode dan contoh hasilnya :
<h1 class="sdbg"> Tuliskan Teks di sini !!! </h1> Tuliskan Teks di sini !!! |
<h2 class="sdbg"> Tuliskan Teks di sini !!! </h2> Tuliskan Teks di sini !!! |
<h3 class="sd"> Tuliskan Teks di sini !!! </h3> Tuliskan Teks di sini !!! |
Naah...., jadi deh......
Silahkan mencoba,
Semoga bermanfaat ya......
Jangan lupa tinggalin komentarmu lho.....Terima kasih
Mohon bantuannya untuk memperbaiki blog ini.
|
Tidak ada komentar:
Posting Komentar