Membentuk Tipe Blok Paragraf

Buat Entri dengan HTML

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. :)

16 komentar untuk “Membentuk Tipe Blok Paragraf”

  1. Alhamdulillah setelah membaca postingannya kang, pengetahuan saya mengenai tag tag HTML sedikit bertambah,,,,

    BalasHapus
    Balasan
    1. Alhamdulillah, jika posting ini dapat memberikan nilai tambah. Terima kasih.

      Hapus
  2. perlu belajar lagi nie kang, buka-buka blog lagi dan eksperimen lagi di blog :)

    BalasHapus
  3. sangat bermanfaat sekali infonya makasih

    BalasHapus
  4. nice inpoh gan ... , ane sendiri masih bingung mo ngeblog tentang apa dan bagaimana, duh padahal domain juga baru neh :( mohon pencerahan nya

    BalasHapus
  5. trs gimna cara nya bisa di halaman pertama dan visitors nya banyak ?

    BalasHapus
    Balasan
    1. Azzz, ini tidak ada hubungannya dengan page one, mas. Cukup buat posting yang asli dan segar, sehingga orang akan mencari informasi tentang posting tersebut.

      Hapus
  6. bagus juga?boleh dicoba nih.thanks

    BalasHapus
  7. keren gan infonya sangat menambah wawasan saya mkasih jangan lupa kunjungi balik

    BalasHapus
  8. html jika belum di pahami memang sulit namun jika sudah paham akan dirasa gampang

    BalasHapus
  9. infonya bagus nie,ane langsung nyoba nih.

    BalasHapus
  10. bagus juga nie info,makasih gan

    BalasHapus
  11. awalnya gak terlalu suka juga ngeblog karena ribet banyak kodenya, tapi ke sini-sini jadi seneng juga :D

    makasih infonya, patut di coba nieh..

    BalasHapus
  12. bagus dan menarik artikelnya untuk bahan ajar..

    BalasHapus
  13. artikelnya menarik, bisa buat tambah ilmu, terimakasih ya :)

    BalasHapus
  14. Waktu membaca aku bisa mengikuti redaksi HTML-nya, tapi sayang untuk CSS-nya - aku belum mampu.Namun begitu aku makasih banget karena pengetahuanku bertambah.

    BalasHapus