Cara Membuat Jarak Alinea Pada Judul Artikel Dengan CSS. Alinea adalah jarak di antara deretan text pada baris pertama, kedua dan seterusnya. Fungsi Alinea adalah memberi jarak pemisah di tengah barisan text atas dan bawah, agar tulisan terlihat rapi dan mudah di baca. Mungkin Anda pernah melihat judul artikel pada suatu blog, yang mana jarak antara deretan text barisan pertama dan kedua, ada yang terlihat terlalu mepet ada juga terlalu renggang. Untuk mengatasi hal tersebut, pada tulisan kali ini akan Admin bagikan caranya dengan menggunakan kode CSS.
Memilih Jenis Font Huruf Judul Dan Text Artikel
Judul artikel merupakan pokok utama pada sebuah halaman postingan. Dan bisa juga di katakan sebagai kepala dari seluruh isi text/tulisan yang ada pada sebuah halaman postingan Artikel. Dalam dunia blogging bentuk atau jenis huruf, sekiranya di usahakan memilih font yang sesuai dengan tampilan template. Sebab, ini berpengaruh pada keindahan tampilan yang sedap di pandang oleh para pembaca. Yang membuat mereka betah berlama-lama membaca tulisan artikel kita.
Untuk memilih bentuk font, usahakan jangan sampai lebih dari dua jenis huruf dalam sebuah blog. Memang hal ini tidak ada peraturan khusus, yang artinya kita bebas memakai banyak jenis sekaligus dalam blog. Tapi agaknya hal tersebut bisa membuat tampilan judul dan text artikel jadi semrawut tidak enak di lihat oleh mata. Contoh nama-nama font jenis huruf yang ada di blogger, misalnya: Arial, Helvetica, Lato, Roboto, Ubuntu, Times New Roman, Paytone One, Oswald, dan lain-lainnya.
Cara Membuat Alinea Pada Judul Artikel Di Blog Dengan CSS
Seperti yang telah di jelaskan di atas, bahwa jarak deretan text/tulisan dari baris pertama, baris kedua, ketiga dan seterusnya sampai bawah, itu di namakan Alinea. Gambarannya ya seperti susunan artikel yang Anda baca ini. Sebenarnya, cara ini nanti juga berlaku pada setiap text isi artikel, tapi penulisan kode CSSnya beda. Jadi bukan cuma di terapkan pada judul artikel saja. Namun, kali ini Admin lebih fokus pada judul artikel saja.
Dan tidak lupa, sehubungan dengan bahasan kode CSS, Anda bisa baca artikel: Belajar Kode Css Paling Dasar Di Blogger. Yang isinya merupakan pembelajaran css dasar yang mudah di pahami.
Selanjutnya, kita langsung pada cara membuat dan menerapkan kode CSS untuk memberi jarak atau alinea text judul artikel. Sebelumnya, kita harus ketahui dulu Tag judul postingan di blog. Pada template-template di luar blogger/blogspot rata-rata menggunakan tag h1 atau h2 pada judul postingan.
Kemudian, template bawaan asli blogger masih menggunakan tag h3. Bila masih menggunakan tema asli blogger yang belum di modifikasi. Misalnya: Contempo, Soho, Notable, atau yang versi lama. Hendaknya tag h3 judul postingan tersebut di rubah menjadi h1 atau h2 agar lebih SEO.
Setelah tahu tag judulnya, sekarang mari kita terapkan cara membikin Alinea pada judul artikel dengan CSS Code. Sebagai contoh, anggap saja tag yang kita gunakan adalah h1 atau h2. Maka penulisan kode css membuat jarak/alinea adalah seperti di bawah ini.
h1.post-title{line-height:1.2em;}
h2.post-title{line-height:1.3em;}
[Keterangan]: Ukuran 1em nilainya = ukuran tinggi atau besarnya font. Lebih jelasnya, antara text baris pertama dan kedua, ruang jarak pemisah tersebut seukuran huruf. Apabila ingin memberi jarak yang lebih renggang, kita cukup menambah angka dengan titik di tengah seperti: 1.2em 1.4em atau yang lebih renggang 1.6em. Dan kalau ingin lebih renggang lagi bisa gunakan 2em dengan ukuran 2x font/huruf yang di pakai.
Selanjutnya, untuk menerapkan kode tersebut, seumpama ingin merubah jarak alinea text judul yang saat ini di gunakan pada template. Maka, cukup membuat kode seperti di atas, dan di tempelkan di atas kode </head>. Lihat contoh di bawah ini.
<style type='text/css'> h1.post-title{ line-height:1.4em; } h2.post-title{ line-height:1.4em; } </style>
Di atas itu hanyalah contoh, dan untuk menentukan nilai ukuran em tersebut, bisa di rubah dan sesuaikan dengan keinginan.
Demikian tutorial sederhana membuat alinea pada judul postingan dengan CSS. Semoga bermanfaat.
Tidak ada komentar:
Posting Komentar