Cara Membuat Dropcap atau Huruf Besar diawal Postingan Artikel Blog

Jika sobat membaca majalah atau koran pasti akan menemukan huruf besar di awal tulisan dan itu di sebut dengan dropcapDropcap atau huruf besar di awal dapat di terapkan juga di blog sobat, baik itu yang memakai wordpress maupun blogspot. Namun untuk tutorial kali ini yang akan kita bahas adalah penggunaan dropcap pada cms blogspot.

Untuk menerapkan dropcap di blogspot sobat hanya perlu menambahkan kode css dan penambahan kode html pada huruf pertama. sobat sudah tidak sabar untuk menerapkan penggunaan dropcap atau huruf besar di blog atau website sobat?

Pada nantinya sobat dapat merubah ukuran / size huruf sesuai dengan keingianan dan bergantung pada template blog yang sudah sobat gunakan. Menerapkan dropcap di awal postingan tentu soal estetika yang akan menambah menarik tulisan sobat. Tapi itu bergantung dari preferensi sobat sendiri, apakah akan menerapkan dropcap di blog atau tidak.

Cara Membuat Dropcap atau Huruf Besar di Awal Postingan Artikel

Berikut adalah langkah penerapan dropcap di awal artikel atau postingan blog.

Menyiapkan kode

Untuk langkah awal selalu saya awal untuk menyiapkan kode entah itu di notepad, visual studio atau text editor lain.

Di bawah ini adalah kode css untuk membuat dropcap di postingan artikel. Silahkan di cermati dan pahami penggunaan kode cssnya.


.dropcaps { color: #000; float: left; font-family: "Old London"; font-size: 350%; line-height: 45px; padding-right: 3px;}

Sobat dapat melakukkan beberapa perubahan yang disesuaikand dengan tema blog sobat sendiri. Color dapat sobat sesuaikan dengan warna pada tulisan dan tema.

Font family disesuaikan dengan font sobat, untuk font-size ini sesuai selera saja disesuaikan dengan estetika dan lainnya dapat sobat ubah sesuai selera.


<p><span class="dropcaps">T</span>utorial menerapkan dropcap di postingan artikel</p>

Kode di atas adalah aturan pemakaian dropcap, jadi di dalam tag hml p kita sisipkan tag html span dengan class dropcaps.

Penerapan kode css dan html di template blogspot

Silahkan sobat buka blogger, pilih blog dan pilih opsi tema kemudian edit html. Kurang lebih seperti di gambar di bawah ini.

cara edit template di blogger
cara edit template di blogger

Jika sudah silahkan sobat cari dengan mengklik kombinasi Ctrl+F dan cari kode di bawah ini.


PASTE KODE CSS DISINI
]]></b:skin>

Sobat dapat meletakkan kode css di atas kode tersebut, dapat lihat pada kode diatas. Kita taruh di paling bawah agar lebih memudahkan untuk pencarian jika ingin mengubah kode css tersebut.

Untuk menerapkan dropcap atau huruf besar di awal postingan silahkan sobat buat postingan seperti biasa.

Sobat bisa mengklik Postingan dan pilih opsi Postingan Baru untuk membuat postingan.

Silahkan ubah mode penulisan ke mode Tampilan HTML dan tulis kode seperti di bawah ini. Untuk tulisannya sobat dapat menyesuaikannya.

ubah mode penulisan postingan di blogger

Namun untuk format penulisan sobat harus mengikuti, sobat cukup menulis 1 kalimat dahulu saja.


<p><span class="dropcaps">T</span>utorial menerapkan dropcap di postingan artikel</p>
penulisan postingan dengan dropcap di blogger

Jika sudah silahkan pindah lagi mode ke Tampilan Menulis dan sobat dapat meneruskan penulisan artikel seperti biasa.

Jadi yang di ubah adalah format penulisan pada kalimat pertama, dengan menambahkan tag html span di dalam tag html p atau paragraf.

Jika penulisan artikel sudah selesai sobat dapat menyimpan dan melihat hasilnya di blog sobat.

Dan jika berhasil maka tampilannya akan seperti di bawah ini, bagaimana mudah bukan? dan akan membuat postingan artikel sobat menjadi lebih menarik.

cara membuat dropcap di blog

Sampai bertemu di artikel selanjutnya, sobat bisa request tutorial atau tips apa untuk memperbagus, memperbaiki, memperindah tampilan blog sobat. 

#

Posted By MasPend Blogger