Cara Merapikan Tulisan Di Blog (Mengatur Paragraf dan Br)

Cara Merapikan Tulisan Di Blog (Mengatur Paragraf dan Br)

Cara Menulis Blog Yang Rapi : Pokok bahasan kita kali ini adalah membuat tulisan di blog agar terlihat rapi (tanpa harus sibuk merapikan tulisan setiap kali selesai membuat postingan)

Dari latihan sebelumnya (membuat postingan dengan dummy text), bila diperhatikan terdapat beberapa perbedaan tampilan postingan, seperti terlihat pada gambar dibawah ini :

cara-merapikan-tulisan-di-blog

Dari ketiga postingan tersebut, mana yang lebih disukai? apakah cara 1, 2 atau 3?

Mau tau kenapa hasilnya sedikit berbeda? yuk simak ulasannya.

Jarak Spasi Antar Paragraf

Yang menyebabkan perbedaan jarak tersebut adalah tag html <p> memiliki jarak yang berbeda dengan <br/>

Silahkan bandingkan ketiga artikel yang teman teman buat pada mode html nya.

membuat-paragraf-rapi-di-blog

Kok postingan saya yang nomer 2 tidak seperti itu htmlnya?

Bisa dirapikan sendiri dengan cara memformat html nya di html beautifier / formater kemudian paste kan kembali ke postingan lalu lanjutkan dengan klik perbaharui postingan

merapikan-paragraf-di-blog

==> Kembali ke topik

Dari ketiga artikel yang sebelumnya telah kita buat, masing masing memiliki perbedaan di area front end yaitu :

  1. Jarak antar paragraf antara postingan 1 berbeda dengan postingan 2 dan 3
  2. Di postingan 3, huruf pertama terlihat besar sendiri

Dan setelah kita lihat elemen html di bagian back end, ternyata penyebabnya adalah :

  1. Jarak antar paragraf yang dibuat dengan tag paragraf <p> berbeda dengan tag break <br/>
  2. L besar terjadi ketika kita tidak memakai tag paragraf <p> (catatan: ini karena kustomisasi bawaan template, di template lain hasilnya tidak seperti ini)

Itulah penyebab perbedaan spasi antar paragraf, lalu teman teman lebih suka yang mana? nomer 3?

Warning Penting :

Dari 3 cara menulis yang telah kita praktekkan, teman teman harus memilih 1 buah metode saja, pilih metode 1, piih metode 2, atau pilih metode 3 dan harus diterapkan secara konsisten (kalau pilih metode 1 ya gunakan metode 1 untuk selamanya dst)

Kenapa?

Karena settingan tiap template berbeda jarak line spacing dan margin nya

Bila di masa yang akan datang teman teman berganti template dan tulisan blog sudah mencapai ratusan maka teman teman bisa dihadapkan pada pekerjaan mengedit ratusan tulisan di blog yang berantakan.

Jangan sampai hal itu terjadi

Belajar HTML Dasar Level 0

Tidak perlu panik bila teman teman bertemu dengan bahasa html, karena tidak semuanya rumit

Pada kesempatan kali ini kita hanya akan belajar 3 hal yaitu :

  1. Opening Tag dan Closing Tag
  2. Paragraf <p></p>
  3. Break <br/>

Opening Tag dan Closing Tag

Setiap tag html selalu diawali dengan tanda opening <tag> dan diakhiri dengan tanda closing </tag> :

<a>contoh tag a</a>

<b>contoh tag b</b>

<c>contoh tag c</c>

Teman teman bisa membuat tag dari a sampai z kemudian paste di html blogger dan publikasikan, silahkan lihat hasilnya.

Beberapa tag mungkin tidak menampilkan apa apa karena inti dari tutorial ini adalah opening tag dan closing tag html

Tag Paragraf <p>

Tag untuk mendeklarasikan sebuah paragraf adalah <p> diawal, kemudian ditutup dengan </p> di akhir

Tag ini membertahu mesin (browser, google, program, dll) untuk mengerti bahwa ini adalah sebuah paragraf

Tag Break <br/>

Berbeda dengan tag paragraf, tag break bisa self closing (tanpa tag pembuka dan penutup), bisa berdiri sendiri.

Bedanya adalah tanda slash / diletakkan setelah tag :

Self closing seperti ini => <br/> bukan seperti ini </br>

Studi Kasus Membuat Postingan Rapi di Blog

  1. Copy kode perbedaan P dan Br
  2. Buat Postingan Baru
  3. Ke Mode HTML kemudian Paste
  4. Beri judul : Latihan 4 Perbedaan P dan BR
  5. Publikasikan

Perbedaan P dan Br :

<p>
Ini adalah tulisan yang berada didalam tag P Ini adalah tulisan yang berada didalam tag P Ini adalah tulisan yang berada didalam tag P
</p> 
<p>
Ini adalah tulisan yang berada didalam tag P Ini adalah tulisan yang berada didalam tag P Ini adalah tulisan yang berada didalam tag P
</p> 
<p>
Ini adalah tulisan yang berada didalam tag P Ini adalah tulisan yang berada didalam tag P Ini adalah tulisan yang berada didalam tag P
</p> 

<br/>
Ini adalah tulisan dengan jarak 1 BR Ini adalah tulisan dengan jarak 1 BR Ini adalah tulisan dengan jarak 1 BR Ini adalah tulisan dengan jarak 1 BR 
<br/>
Ini adalah tulisan dengan jarak 1 BR Ini adalah tulisan dengan jarak 1 BR Ini adalah tulisan dengan jarak 1 BR  Ini adalah tulisan dengan jarak 1 BR 
<br/>
Ini adalah tulisan dengan jarak 1 BR Ini adalah tulisan dengan jarak 1 BR Ini adalah tulisan dengan jarak 1 BR Ini adalah tulisan dengan jarak 1 BR 

<br/><br/>
Ini adalah tulisan dengan jarak 2 BR Ini adalah tulisan dengan jarak 2 BR Ini adalah tulisan dengan jarak 2 BR Ini adalah tulisan dengan jarak 2 BR 
<br/><br/>
Ini adalah tulisan dengan jarak 2 BR Ini adalah tulisan dengan jarak 2 BR Ini adalah tulisan dengan jarak 2 BR Ini adalah tulisan dengan jarak 2 BR 
<br/><br/>
Ini adalah tulisan dengan jarak 2 BR Ini adalah tulisan dengan jarak 2 BR Ini adalah tulisan dengan jarak 2 BR Ini adalah tulisan dengan jarak 2 BR 

Bila teman teman kesulitan, ikuti langkah gambar animasi berikut ini : memuat-postingan-rapi-di-blog

Goal dari materi diatas adalah : Mengerti perbedaan antara tag P dan Br + Mulai memiliki gaya menulis favorit

Hasil postingan untuk latihan 4 bisa diakses disini, bila teman teman ingin membandingkan

Bagaimana dengan guru blogger sendiri? menggunakan cara 1 2 atau 3 ketika membuat postingan?

Guru Blogger : Saya selalu menggunakan cara 1, karena sudah kebiasaan.... teman teman bisa saja berbeda yang penting adalah konsisten.

Artikel ini adalah bagian dari tutorial membuat blog, bila teman teman ingin membaca artikel lainnya silahkan klik daftar isi atau next materi untuk melihat materi selanjutnya

Komentar
Silahkan, saya ga nggigit !
  1. aku dah lumayan lama ngeblog baru tahu ini fungsinya

    BalasHapus
    Balasan
    1. Hal kecil yang terkadang terlupakan :D

      Hapus