Posts Subscribe to This BlogComments

Follow Us

New Articles

1 2 3 4 5

Rabu, 04 Mei 2011

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

Related Post



0 komentar:

Posting Komentar

Translate

New Tutorial

Masukan Email Anda Untuk Berlangganan

Delivered by FeedBurner