Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Membuat Text-Shadow Ciptakan Efek 3 Dimensi: Panduan BloGGeR Kode CSS

Text-Shadow
Teks dengan Efek Bayangan

Panduan cara membuat efek bayangan pada teks atau text-shadow merupakan satu Panduan BloGGeR dan Tutorial BloGGeR tentang Kode CSS yang sangat  diperlukan untuk membangun berbagai kreatifitas cantik dengan sedikit kode tetapi mampu memberi penampilan terkini. Pemanfaatan efek bayangan pada teks kode css text-shadow sungguh memberi gaya tersendiri yang hingga saat ini amat jarang di manfaatkan para blogger. Ide untuk memposting teknik membuat text-shadow ini hanya disebabkan "Parmin si gigi tongos" teman blogger ku yang minta supaya dibuatkan "epek" bayangan di blognya.

Ya ..., semua ini gara-gara si Parmin yang kemarin nyerocos minta tolong supaya dibuatkan cara membuat teks yang ada bayangannya. Bagus, katanya! "Wah...., seandainya aku mau nikah, undangannya mau aku buat epek bayang-bayang", kata si Parmin sambil matanya menerawang ke arah rembulan yang terbungkus segumpal mega, "biar pada tahu kalau Parmin nggak kampung amat", mulutnya merenges sambil di sorongkan ke muka ku hingga gigi tongosnya tepat di depan mata. "Kurang Asem...!!!", umpat ku sambil melempar muka ke samping. "Baunya itu, lho! Ampun !" Dan ... Si Parmin hanya tertawa he ... ha .... he ... he ... kaya' kalian sekarang! Ha ......

Contoh text-shadow atau efek bayangan pada teks :

Happy Blogging - This is Tex-shadow

Happy Blogging - This is Tex-shadow

» Happy Blogging «

Happy Blogging - This is Text-Shadow

Cara membuat Text-Shadow :


Ada dua kemungkinan dalam pembuatan text-shasow. Menggunakan kode html (xhtml) secara langsung, dan yang kedua dengan menggunakan paduan kode css dan html. Kode css disimpan di template di atas KODE ]]></b:skin>. kemudian untuk menampilkan text-shadow di posting atau widget kita gunakan xhtml.

Cara menggunakan KODE HTML (posting dan widget) :

<h3 style="font-family:staccato222 BT;line-height:1.2em;color:#01022c;font-weight: 700;text-shadow:#777 0.1em 0.1em 0.2em;padding:3px 10px; font-size:2em;">
Tuliskan Teks di sini !!
</h3>
<p style="text-align:center;font-family:staccato222 BT;line-height:1.2em;color:#0308e6;font-weight: 900;border-top: 1px solid #5c5d82;text-shadow:white 0.1em 0.1em 0.2em;padding:3px 10px; font-size:2em;margin-top: 20px;background: #16162b url(images/h.gif) no-repeat left 10px;background-position:left center;"><span style="border-bottom:1px solid #555;">Text-Shadow</span><br/> 
Tuliskan teks di sini !
</p>
<h2 style="float:left;text-align:center;background: #888;text-shadow:#fcd9db 0.1em 0.1em 0.2em; border-top:1px solid #eee;padding:4px 10px;font-family:Verdana;font-size:22px;color:black;">Tuliskan Teks di sini !!!
</h2>
Kode di atas hanya beberapa contoh penulisan dalam bentuk KODE HTML dan masih dapat dikembangkan lagi.

Cara Menggunakan Kode CSS:


Untuk menggunakan kode css sebagai pembentuk text-shadow, sampeyan harus menyimpannya di template :
  1. Login dan pengamanan template : Caranya lihat

  2. Syntax .post{ .... } : Cari syntax tersebut di template sampeyan. Bentuk syntaxnya kira-kira seperti ini (ku ambil dari Template Minima).

  3. .post {
    margin:.5em 0 1.5em;
    border-bottom:1px dotted $bordercolor;
    padding-bottom:1.5em;
    }
    .post h3 {
    margin:.25em 0 0;
    padding:0 0 4px;
    font-size:140%;
    font-weight:normal;
    line-height:1.4em;
    color:$titlecolor;
    }
    .post h3 a, .post h3 a:visited, .post h3 strong {
    display:block;
    text-decoration:none;
    color:$titlecolor;
    font-weight:bold;
    }

    Letakkan KODE yang baru (di bawah ini) di sebelah bawahnya :
    .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;}

    Cara Menuliskan di ruang posting :


    <h1 class="sdbg">
    Tuliskan Teks di sini !!!
    </h1>
    <h2 class="sdbg">
    Tuliskan Teks di sini !!!
    </h2>
    <h3 class="sd">
    Tuliskan Teks di sini !!!
    </h3>

  4. Jangan lupa KLIK Simpan Template

  5. Kode HTML text-shadow di atas (yang digunakan untuk posting dan di widget) juga bisa di manfaatkan kode css-nya.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :


» Happy Blogging - gubhugreyot «

6 komentar:

  1. mas,mana tutorialnya yg mz janjikan buat cursor jam animasi spt py mas itu....aq tunggu loh...dan pingin masang juga...

    www.liacantik-alea.co.cc

    BalasHapus
  2. thnks bget ya....kunjgi aku di http://ridmix.blogspot.com ya....di follow jg ya...hehehe

    BalasHapus
  3. berkunjung....
    salam kenal..
    mas tanya...aq uda pasang jam yg diikuti kursor..tpi ko tampilannya/hasilnya jelek/kocarkacir...???gmn dong...ajarin dong...
    ini website aq:
    http://www.asaloy.co.cc

    BalasHapus
  4. letak kesalahannya dmn????bingung aq....soale kan aq g buat sendiri...copypaste sukses...hihihi
    mohon bimbingannya..
    tak tunggu di www.asaloy.co.cc

    makasih

    BalasHapus
  5. Top abis,,,benar-benar anda ahlinya css

    BalasHapus

 
GR | Edited by | gubhug reyot