Membuat efek bayangan pada judul (h1, h2, h3, h4)

Kamis, 29 April 2010
Ada saja cara untuk membuat blog terlihat tampil menarik terutama untuk para pengguna mesin blogger, Salah satu diantararanya adalah membuat tulisan atau teks judul terlihat mempunyai efek bayangan,. Bagi saya ini cukup menarik karena kita dapat membuat tampilan yang berbeda-beda, dengan sedikit mengkreasikan warna, ketebalan bayangan serta ukuran/size teks.

Untuk pembuatanya terbilang sederhana, hanya sedikit menambahkan kode pada CSSnya, misalnya kita ingin menambahkannya pada Judul blog maka sobat harus mencari kodenya yang di tandai dengan h1 Untuk tanggal entri dan judul dari sidebar ditandai dengan h2, sedangkan untuk judul postingan di tandai dengan h3, dan terahir adalah komentar yang di tandai dengan h4.
Di bawah ini adalah kode dari masing-masing CSSnya yang terdapat pada template Minima Ochre baru :

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}

Untuk menambahkan efek bayangan pada teks, kita hanya perlu menambahkan kode seperti ini :
text-shadow:1px 1px 1px #006400;
efek bayangan untuk warna hijau dengan ketebalan bayangan 1 pixel.

Sebagai contoh kita ambil h1 untuk judul Blog, maka kurang lebih akan menjadi seperti ini :

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
text-shadow:1px 1px 1px #006400;
}

Untuk langkah pemasangan pertama-tama :

  1. Login ke Blogger
  2. Tata letak
  3. Edit HTML
  4. Setelah itu cari dari masing-masing kode judul

    h1 h2 h3 h4
    yang ingin ditambahkan. Sebagai contoh yang kedua adalah 'judul posting' atau h3. Setelah menemukan kode CSSnya, sobat tinggal menambahkan kode ini :
    text-shadow:1px 1px 1px #006400;
    tepat di bawahnya, sehingga menjadi seperti ini :
    .post h3 {
    margin:.25em 0 0;
    padding:0 0 4px;
    font-size:140%;
    font-weight:normal;
    line-height:1.4em;
    color:$titlecolor;
    text-shadow:1px 1px 1px #006400;
    }
  5. Terahir klik 'simpan Perubahan'.

Silahkan klik disini untuk melihat contohnya.

28 komentar (Membuat efek bayangan pada judul (h1, h2, h3, h4))

Posting Komentar
  1. GADO GADO » April 29, 2010 3:14 PM | permalink

    ku copy dulu ya kodenya.. Dan langsung ke TKP.. thx ya..

  2. tomo » April 29, 2010 7:42 PM | permalink

    Wah hebat kawan bisa bikin blog bagus

  3. uswah » April 30, 2010 5:48 AM | permalink

    Efek2 melayang bisa membuat blog tampil ciamik sob

  4. Ferdinand » April 30, 2010 1:13 PM | permalink

    Wah boleh juga tuh SOb....kayanya asik juga klo ada bayangannya hhe......makasih sob ilmu'y...

    Oiya ada Award buat sobat...tolong diambil N diterusin.....

  5. Jiox » April 30, 2010 10:02 PM | permalink

    keren tipsnya, nice tips :D

  6. Bujen » Mei 01, 2010 7:41 PM | permalink

    Info bagus sob :-)

  7. KucingTengil » Mei 02, 2010 2:09 AM | permalink

    ntar coba praktekkin ahhh

  8. sepwawan » Mei 02, 2010 10:55 AM | permalink

    Makasih triknya sob, dan makasih pula templatenya dah dicoba.

  9. oding » Mei 03, 2010 3:34 AM | permalink

    nice ipoh nih..saya suk oprak opreks web dan Blog

  10. narti » Mei 04, 2010 5:16 PM | permalink

    makasih tutorialnya...tapi lagi males edit nih...hehe...

  11. seo in blog » Mei 04, 2010 6:28 PM | permalink

    perlu dicoba ne
    Cara Jitu Mengecilkan Alexa Ranking
    Keampuhan Backlink Blog Edu
    Puluhan Backlink Dalam Sekejap
    Domain Baru Bisa Laku Sampai $100
    Google Adsense Semakin Galak

  12. infophone kdr » Mei 04, 2010 8:45 PM | permalink

    Wach sepertinya keren nich tutorialnya,ijin simpan dulu sob dan klo ada waktu langsung dipraktekkan...:D

    Slm knl dan semoga sukses selalu...:D

  13. darahbiroe » Mei 05, 2010 9:42 AM | permalink

    makasih yaw tipz nya
    boleh nuy kapan2 dicoba
    :D

  14. antok » Mei 05, 2010 9:43 AM | permalink

    makasih tutorialnya
    saya akan mencobanya
    hehhe
    tengkyu
    :D

  15. tomo » Mei 07, 2010 8:18 AM | permalink

    Aku save.aku pahami dan akan aku coba dulu kawan

  16. Uswah » Mei 07, 2010 8:20 AM | permalink

    Trims tutorny sob

  17. cara mengatur keuangan » Mei 07, 2010 3:39 PM | permalink

    makasi buat infonya yuuaaa,....

  18. Fenomena Alam Semesta » Mei 07, 2010 10:37 PM | permalink

    sip..save dulu..tinggal nanti dipraktekin, makasih kawan..

  19. gak mutu » Mei 08, 2010 12:51 AM | permalink

    menarik juga kalau judul blog ada bayangannya ....
    makasih sharingnya .....

  20. infophone-kdr » Mei 09, 2010 4:01 AM | permalink

    Info disini selalu maknyus serta mantap2 tutornya,bnr2 komplit bgt penjelasannya dan makasih sdh share sobat...:D

  21. jarno » Mei 10, 2010 7:25 AM | permalink

    iya keren tipsnya... cuma sayang saya pakai wordpress

  22. Hari » Mei 10, 2010 10:08 AM | permalink

    mangtabs infonya, langsung dicoba...izin ngopy codenya sob.

  23. freedownloadfont » Mei 11, 2010 2:35 AM | permalink

    makasih infonya bro! bermanfaat nih!
    salam kenal & met sukses slalu 0_0

  24. healthy guidelines » Mei 11, 2010 9:19 AM | permalink

    menarik..menarik..perlu dicoba nich..

  25. bloekoetoek » Januari 15, 2011 4:21 PM | permalink

    makasih bang...trik yang sangat bermanfaat. mohon ijin belajar di sini...makasih

  26. Tihang karas » Januari 16, 2011 4:15 AM | permalink

    @bloekoetoek
    kebalik kayaknya sob, seharusnya saya yg banyak belajar di blog sobat......

  27. messiklan.com » April 06, 2011 8:57 AM | permalink

    makasih ya infonya, salam kenal

  28. Yustin Annisa » Agustus 14, 2012 1:13 PM | permalink

    Thanks gan.. berhasil :)

    http://infoiki.blogspot.com

Back to form

Mohon berkomentar sesuai topik posting di atas !