Cara Merubah Style Blog Post Title

Bagaimana cara merubah style pada post title blog? Format elemen-elemen dasar yang dapat diedit pada post title blog meliputi beberapa hal. Namun yang harus ada perhatikan adalah letaknya yang berada diatas postingan yang anda buat dan memiliki ukuran yang sama. Jadi, sebelum melakukan editing, backup terlebih dahulu template anda sebelum menemukan setingan yang tepat untuk blog anda.

Ok, elemen-elemen yang dapat diedit pada post title meliputi:

·         Font-family: jenis font yang dapat anda terapkan pada blog. Ada banyak pilihan font yang tersedia di internet, mulai dari Google Safe Font, Cool-Font, FontSpace, dan banyak lagi. Tetapi kebanyakan para blog disain lebih menyarankan menggunakan GoogleSafe Font. Well, it’s your choice.

·         Font-size: ukuran font yang biasanya menggunakan satuan px (pixel). Masukkan valuenya sesuai dengan keinginan anda. 12px, 13px, 14px,....

·         Font-weight: ukuran ketebalan huruf yang anda inginkan.

·         Text-align: posisi peletakkan huruf.

·         Text-transform: menentukan kapitalisasi dari huruf dengan berbagai variasi elemennya.

·         Text-shadow: style bayangan dari main-font.

·         Letter-spacing: jarak antar huruf.

·         Background-color: warna background dari area judul post.

·         Border: batas antar masing-masing bagian dari semua layout blog.

Masuk ke akun blogger anda -> Template -> Edit html -> cari kode ini: “h3.post-title.”

 

Peringatan:

Default variabel properti CSS pada post-title seperti berikut:

h3.post-title, .comments h4 {

  font: $(post.title.font);

  margin: .75em 0 0;

}

Dengan demikian, properti css post-title tidak mempunyai elemen css “warna.” Elemen yang diberikan hanyalah jenis font. Warna default yang diberikan bervariasi sesuai dengan templatenya. Kalaupun anda melihatnya dapat berganti warna, itu karena judul post adalah sebuah “link.” Dan, elemen link ini juga terhubung pada bagian-bagian seperti post-time-stamp, judul postingan yang ada pada blog archive dan lain-lain. Berikut trik yang dapat kita lakukan untuk membuatnya berwarna.

Hapus semua kode CSS yang ada didalam tanda “}” dan masukkan kode ini :

h3.post-title {

font-family: Helvetica, Arial, Tahoma;

font-size: 18px;

font-weight: 900;

text-align: left;

text-transform: uppercase;

letter-spacing: 4px;

background-color: #CC0000;

border: 3px dotted #FFFFFF;

padding: 5px 5px;

}

buat dua buah kode css yang berbeda menunjukkan post-title ini sebagai link yang berbeda dari yang lain. Masukkan kode-kode css ini tepat dibawahnya.

h3.post-title a {

color: #33CC00;}

h3.post-title a:hover {

color: #339900;

}

Ini hasil yang anda dapat:

Untuk merubah warna link-link pada gadget yang lain, silahkan anda mengeditnya pada Template Designer.

Andapun dapat melakukan trik ini pada BLOG TITLE, POST DATE HEADER, SIDEBAR GADGET TITLE dan BLOG DESCRIPTION.