Membesarkan huruf pertama di awal paragraf pada blogspot

Drop cap pada blog – Jika anda melihat novel, buku, majalah ataupun koran-koran biasanya huruf pertama pada paragraf utama akan ditulis lebih besar agar terlihat menarik.

Teknik membesarkan huruf pertama itu disebut dengan Drop Cap, fitur ini sudah tersedia pada microsfot word, sehingga kita bisa gunakan dengan mudah. Untuk web atau blog bisa kita terapkan dengan memodifikasi sebagian Css nya.

drop cap pada blog

Contoh penggunaan drop cap pada blogspot

 

Silahkan baca juga : 14 Alasan kenapa kamu harus membuat blog menggunakan blogspot

Sekarang, bagaimana jika teknik seperti itu kita terapkan pada blogspot kita. Tentunya blog kita akan terlihat lebih unik dan menarik. Untuk dapat diiterapkan pada Blogger, pertama kali kita harus membuat sebuah styling dasar pada template blog kita. Berikut akan dijelaskan cara-cara membuat drop cap pada blogger / blogspot.

  • Login lah ke akun blogger.com anda, lalu masuk ke blog yang ingin anda terapkan teknik drop cap ini. Setelah muncul panel menu pada blog anda, pilih lah tab menu “Template”, lalu pilih edit HTML seperti gambar dibawah ini.template blogger
  • Di halaman edit HTML anda akan melihat banyak kode-kode yang bisa membuat anda pusing jika dipelajari satu persatu, yang harus anda lakukan adalah mencari sebuah kode <data:post.body/> diantara kode-kode tersebut. Dengan cara menekan ctrl + F, lalu ketikan <data:post.body/> pada kotak pencarian tersebut lalu tekan enter.

edit template blogger

  • Biasanya dalam sebuah template blogspot akan ada beberapa kode seperti diatas, anda harus menekan enter dua kali lagi agar mendapat kode yang ketiga. Hal yang harus anda perhatikan jika anda ragu dengan  kode <data:post.body/>  yang benar adalah kode data:post.body yang benar terletak berdekatan dengan kode data:post.body yang lainnya. Jika anda melihat ada 4 kode yang sama berdekatan, maka kode yang kedua adalah kode yang benarnya.
edit template blogger 2

Kode yang benar terdapat pada panah hijau.

  • Setelah anda menemukannya, maka masukan kode <p class=’first’> sebelum kode diatas. dan </p> sesudah kode diatas. Maka kode kode akhirnya akan menjadi seperti ini:
    <p class='first'><data:post.body/></p>
  • Setelah itu kita hanya perlu memasukan kode css nya, dengan cara memasukan kode css berikut sebelum kode ]]></b:skin>. Cara mencarinya sama dengan cara diatas yaitu dengan menekan ctrl + F, lalu enter. Setelah bertemu masukan kode css dibawah ini sebelum tanda tersebut.

    .post-body p.first:first-child:first-letter {
    float:left;
    padding:5px;
    font-size: 50px;
    font-family: Georgia;
    font-weight:bold;
    text-transform:uppercase;
    background-color:#cccccc;
    color:#ffffff;
    border-radius: 5px;
    margin-right:5px;
    }

Maka kode akhirnya akan terlihat seperti gambar berikut:

edit template blogger 3

Setelah itu klik tombol “Simpan Template”

Maka anda sudah bisa melihat pada huruf pertama pada paragraf utama postingan anda menjadi besar. Anda bisa berkreasi dengan mengubah kode-kode CSS diatas untuk mendapatkan hasil yang lebih unik. Selamat ber eksperimen!!

Jika bermanfaat, mohon like fb page kami ya!!

Catatan : Kode ini hanya bekerja jika sebelum paragraf pertama anda tidak ada gambar.

Komentar

comments

Leave a Reply