Membuat Efek Bayangan Pada Judul Posting

Membuat Efek Bayangan Pada Judul Posting

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.

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;

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 :

-Login ke Blogger

-Tata letak

-Edit HTML

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;

*ini untuk warna efek hijau

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;

}

Terahir klik simpan Perubahan..

-Semoga Bermanfaat-

Matur Nuwun