Membentuk Tipe Blok Paragraf

Biasanya Anda membuat posting dengan cara yang bagaimana? HTML atau Compose. Apabila Compose, maka akan sulit untuk membuat susunan teks dalam postingan menjadi semantik. Pada Blogger™ ketika kita telah menggunakan struktur teks blok paragraf <p> dalam posting dengan menggunakan HTML, namun akan hilang jika kita mengedit atau membuka kembali posting tersebut dengan menggunakan metode Compose. Sangat disarankan agar kita selalu melakukan edit posting dengan menggunakan metode HTML.

<p>Aenean vel felis sapien. Nullam in sem sed justo aliquam mattis. Vivamus mauris dui, facilisis vel sagittis eu, sagittis quis leo. Aenean lacinia elit nec arcu rhoncus eleifend commodo nibh consequat. Donec lacus mi, imperdiet eget condimentum at, rutrum sed orci. Maecenas auctor luctus nulla, commodo scelerisque dui euismod vel. Nam dolor sem, molestie id adipiscing ut, gravida ac nunc. Donec scelerisque risus non sapien iaculis interdum.</p><p>Morbi a ipsum quam, sit amet malesuada velit. Nam condimentum semper risus a faucibus. Etiam quis tristique velit. Sed sed lacus vitae nisi cursus pharetra ac a lorem. Maecenas venenatis lacus ornare risus commodo euismod. Pellentesque ornare ligula vitae eros viverra in varius ante convallis. Curabitur venenatis elit a ante congue tincidunt tempor massa dignissim.</p>

Sekarang salin & tempel penggalan teks “lorem ipsum” di atas pada editor posting (entri/post baru) dengan menggunakan HTML. Jika dilakukan pratinjau, maka ia akan membentuk dua blok paragraf, tentu saja tanpa menggunakan tombol papan ketik Enter. Dimana contoh pengkodean blok paragraf pada CSS template adalah sebagai berikut:

p {
font-size: 1em;
line-height: 1.5em;
margin-bottom: 1.5em;
}

Sebagai bahan uji coba — dengan catatan tag p telah dimasukkan dalam pengkodean template, seperti pada contoh di atas — tambahkan baris kode CSS pada akhir postingan.

<style type="text/css">
p:firsr-letter {
float: left;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 4em;
line-height: .75em;
height: .75em; /* fix to chrome */
margin: .25em .125em 0 0;
*line-height: 1em; /* IE7 Only */
}
</style>

Pengkodean di atas akan membuat huruf awal di setiap blok paragraf menjadi lebih besar (drop caps). Apabila hanya ingin diterapkan pada paragraf tertentu, sebaiknya menggunakan class yang ditargetkan dalam paragraf tersebut.

<p class="first-letter">Aenean vel felis sapien. Nullam in sem sed justo aliquam mattis. Vivamus mauris dui, facilisis vel sagittis eu, sagittis quis leo. Aenean lacinia elit nec arcu rhoncus eleifend commodo nibh consequat. Donec lacus mi, imperdiet eget condimentum at, rutrum sed orci. Maecenas auctor luctus nulla, commodo scelerisque dui euismod vel. Nam dolor sem, molestie id adipiscing ut, gravida ac nunc. Donec scelerisque risus non sapien iaculis interdum.</p><p>Morbi a ipsum quam, sit amet malesuada velit. Nam condimentum semper risus a faucibus. Etiam quis tristique velit. Sed sed lacus vitae nisi cursus pharetra ac a lorem. Maecenas venenatis lacus ornare risus commodo euismod. Pellentesque ornare ligula vitae eros viverra in varius ante convallis. Curabitur venenatis elit a ante congue tincidunt tempor massa dignissim.</p>

<style type="text/css">
.first-letter:first-letter {
float: left;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 4em;
line-height: .75em;
height: .75em;
margin: .25em .125em 0 0;
*line-height: 1em;
}
</style>

Sebaiknya setelah merasa pengkodean sudah tepat, kita dapat menambahkannya pada CSS template. Jangan lupa, tanpa memakai markah <style type="text/css"> dan </style>.

Demonstrasi penggunaan markah di atas dapat dilihat dalam paragraf ini, dimana huruf awal akan menjadi drop caps. Selanjutnya kita pun dapat membuat baris pertama dalam paragraf menjorok ke dalam atau biasanya pada waktu mengetik di aplikasi “word”, tidak jarang kita menggunakan tombol papan ketik Tab.

p:first-line {
text-indent: 2.25em;
}

Paragraf ini akan menjadi demonstrasi dari pengkodean di atas. Seperti biasa, tentu kita tidak terpaku pada penerapan markah yang telah disebutkan dalam paragraf-paragraf sebelumnya. Kita dapat menambah, mengurangi, bahkan memodifikasi sehingga tampilan blok paragraf akan sesuai dengan keinginan kita masong-masing. Anda tentu ingat fungsi “Inspect Elements”, silakan periksa halaman posting ini & struktur pengkodean didalamnya. :)

Posted by Hii Sekai