Apakah kamu memperhatikan ada hal berbeda dalam paragraf ini? Coba perhatikan baik-baik, apa sih yang beda? Ternyata huruf pertama berubah menjadi besar, dan seluruh text di baris pertama berwarna merah, berbeda dengan baris lain yang berwarna hitam.
Gaya tulisan seperti itu biasa dijumpai di novel-novel klasik ya, dimana huruf pertama biasanya berupa kaligrafi dengan ukuran yang lebih besar dari huruf lainnya. Bisa mempercantik dan menambah nilai plus pada artikel nih kalau diterapkan di blog. Pasti akan langsung menarik perhatian pengunjung karena tampilannya yang tidak biasa.
Untuk mendapatkan tampilan seperti itu cukup menambahkan sedikit kode CSS saja. Iya, tidak perlu Javascript yang menambah waktu loading blog kok. Yuk ikuti tutorial membuat huruf dan baris pertama pada blog berbeda warna dibawah ini.
1. Gaya Standar
Huruf pertama akan mengikuti font default yang terpasang sesuai CSS blog. Tambahkan kode berikut "SEBELUM / DI ATAS"</head>.<b:if cond='data:view.isPost'> <style>
.post-body::first-line { /* Keseluruhan Baris Pertama */
color:#cd1c1f;
}
.post-body::first-letter { /* Huruf Pertama */
float:left;
font-size:80px;
font-weight:600;
line-height:1;
margin-right:16px
}
</style> </b:if>1.1. Preview
Lorem ipsum dolor sit amet, ocurreret forensibus suscipiantur his no, has id ludus dicam ignota, pri ut augue albucius. Tritani mentitum accommodare sit eu, cu nec exerci deterruisset. Pro no euripidis vulputate, pro te nusquam recusabo theophrastus.
2. Gaya Custom dengan Font Tambahan
Untuk membuatnya lebih menarik, kamu bisa menambahkan font external agar huruf lebih artistik. Saya contohkan memakai Berkshire Swash. Tinggal import URL font tadi ke dalam CSS. Kalau masih bingung cara importnya, lebih baik baca dulu cara memakai Google Font di blog.Masih sama, kodenya harus disimpan "SEBELUM / DI ATAS"
</head>.<b:if cond='data:view.isPost'> <style>
@import url('https://fonts.googleapis.com/css?family=Berkshire+Swash');
.post-body::first-line { /* Keseluruhan Baris Pertama */
color:#cd1c1f;
}
.post-body::first-letter { /* Huruf Pertama */
font-family:'Berkshire Swash', cursive;
float:left;
font-size:80px;
font-weight:600;
line-height:1;
margin-right:16px;
}
</style> </b:if>2.1. Preview
Quas molestie sapientem te mel, ea enim ferri ius, duo ut possit legimus facilis. Sit cu quem erat laudem. Mel pertinacia percipitur assueverit ne, clita appetere suavitate te sed, ceteros voluptatibus no eum. Ei etiam dicam consectetuer duo. Debet constituto cotidieque at cum. Vim alia omittam accusata in, quis enim velit id has, mel ullum nostrud volutpat ea.
Kode ini akan otomatis mengubah gaya dari keseluruhan text di baris pertama, berapapun jumlah katanya. Maksudnya begini: jika dibuka dari komputer yang lebarnya (width) lebih besar, maka jumlah kata di baris pertama lebih banyak, anggaplah 20 kata. Ketika dibuka versi mobile di smartphone yang lebarnya lebih kecil, otomatis jumlah kata di baris pertama lebih sedikit, anggaplah 7 kata. Maka CSS akan berlaku di 7 kata tersebut, bukan 20 kata. Karena ini otomatis mendeteksi baris pertama, bukan berdasarkan jumlah kata.
2.2. Preview
Quas molestie sapientem te mel, ea enim ferri ius, duo ut possit legimus facilis. Sit cu quem erat laudem. Mel pertinacia percipitur assueverit ne, clita appetere suavitate te sed, ceteros voluptatibus no eum. Ei etiam dicam consectetuer duo. Debet constituto cotidieque at cum. Vim alia omittam accusata in, quis enim velit id has, mel ullum nostrud volutpat ea.
Perhatikan contoh diatas. Kalimatnya sama persis dengan contoh di nomor 2.1. Warna yang berubah TIDAK MENGIKUTI JUMLAH KATA, namun mengubah keseluruhan baris pertama. Ya jelaslah ini lebih rapi.
3. Kok Gagal? Padahal Kode Sudah Benar
Kalau kamu memakai thumbnail atau gambar diatas artikel, bisa jadi itulah penyebabnya. Sebenarnya CSS sukses diterapkan pada baris pertama, yang mana merupakan tag HTML<img>. Maka tulisan dibawah gambar tidak akan terpengaruh gaya CSS karena sudah diaplikasikan ke baris pertama yaitu <img> tadi.Solusinya, pindahkan posisi gambar ke paragraf kedua. Ini tidak akan mempengaruhi tampilan snippet di homepage karena gambar tetap terambil sebagai thumbnail.
Tidak hanya gambar, tapi konten lain selain text pun jadi penyebab. Seperti
<div>, <blockquote>, dan sebagainya.Sekian tutorial dingkat cara ganti warna dari huruf dan baris pertama di blog. Ayo bikin blogmu lebih cantik dengan trik-trik CSS yang sederhana namun powerful!
