25 Oktober 2010

Memperbesar atau Memperkecil Tulisan

Tulisan atau teks yang terlalu kecil dan terlalu besar menurut saya kurang begitu nyaman pada saat kita membaca dan ada kemungkinan tulisan yang terlalu besar dan kecil akan merusak mata. Halo kali ini saya akan membahas tentang Memperbesar atau Memperkecil Tulisan pada Template Blogger sobat masing-masing agar dapat memberikan rasa nyaman kepada para pembaca. Tentunya kenyamanan pengunjung untuk membaca itu sangat penting sekali karena apabila pengunjung tidak nyaman maka efeknya, post atau artikel kita gak ada yang mau baca deh.
Untuk kali ini kita mengutak-ngatik template lagi nih, gak apa-apa y walaupun ngeliat kode-kodenya aja kita udah pusing tapi yang penting template kita bisa di optimalkan agar lebih baik dari sebelumnya. Mungkin untuk para blogger yang sering mengutak-ngatik template trik ini tidak terlalu asing atau terlalu mudah untuk dilakukan namun bagaimana untuk para sahabat blogger yang lain? Makannya dari itu disini saya akan menjelaskannya se-detail-detailnya agar para sahabat yang jarang atau belum pernah mengutak-ngatik templatenya dapat mengerti bagaimana memperbesar atau memperkecil tulisan. Sekarang kita lihat aja yuk bagaimana cara melakukannya.
Pertama
Hal yang pertama kalau sobat ingin melakukan sesuatu terhadapa blog sobat maka sobat harus login terlebih dahulu di blogger.com
Kedua
nah setelah login, karena kita akan mengutak-ngatik template kita maka kita masuk ke halaman Rancangan >> Edit HTML
Ketiga
Setelah berada pada halaman Edit HTML kita cari css .post lebih lengkapnya dibawah ini


.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:normal;
}

.post h3 strong, .post h3 a:hover {
color:$textcolor;
}

.post-body {
margin:0 0 .75em;
line-height:1.6em;
}

.post-body blockquote {
line-height:1.3em;
}

.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}

Sekarang Saya Akan Jelaskan Satu Persatu :

  • .post >> ini adalah kode utama dari elemen post
  • .post h3 >> sesuai dengan namanya post h3 digunakan untuk mengatur judul postingan
  • .post h3 a, .post h3 a:visited, .post h3 strong >> mengatur judul link, judul link yang telah di kunjungi, dan apabila judul link disentuh dengan mouse
  • .post-body >> namanya juga post-body berarti ini bagian untuk mengatur dari badan postingan, di mulai setelah .post h3
  • .post-body blockquote >> untuk mengatur blockquote badan postingan
  • .post-footer >> nah mungkin untuk footer sudah tidak asing lagi, tepat sekali footer itu biasanya di bagian paling bawah, ini adalah bagian untuk mengatur bagian postingan paling bawah.
Keempat
Setelah kita mengetahui fungsi-fungsinya, sekarang kita akan Memperbesar atau Memperkecil Tulisan di bagian yang diinginkan dengan cara menambahkan property atau mengganti nilai dari property yang sudah ada, disini saya akan kasih contoh pada bagian .post-body pada bagian tersebut kita tidak bisa menemukan property font-size: 140%; maka kita harus menambahkannya kedalam css tersebut, maka akan menjadi seperti


.post-body {
margin:0 0 .75em;
line-height:1.6em;
font-size:140%;
}


Kurang lebih seperti di atas, dan kalau sobat menyimpan dan melihat hasilnya maka hasilnya, isi dari tulisan postingan sobat akan lebih besar dari sebelumnya, kalau sobat ingin mengatur ukurannya sobat bisa mengecilkan atau membesarkan nilai dari property tersebut yaitu 140%
Kelima
Sekarang kita sudah merubah ukuran dari tulisan isi postingan, sekarang atur ukuran judul postingannya agar terlihat lebih serasi, caranya kita tinggal mengatur property dari .post h3 yaitu font-size:140%;, sama seperti diatas kalau ingin mengecilkan atau memperbesarnya kita dapat mengatur nilainya.
Nah diatas adalah cobtoh kecil untuk Memperbesar atau Memperkecil Tulisan, oiya saya hampir lupa, contoh diatas saya menggunakan template minimalist dari blogger. Hal diatas dapat dilakukan pada css yang lainnya bukan hanya pada css .post aja jadi sekarang waktunya sobat untuk mencoba-coba pada css lain.

Artikel Terkait di Bawah posting
Blogger
Tips N Triks
HTML

Diposting oleh KD JON'S di 23.05

Label: , , ,

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

LOGIN

Template by : JON'S