Cara Memasang Drop Caps Pada Postingan Blog

Apa itu Drop Caps dan apa fungsinya ?, Drop Caps adalah huruf awal suatu paragraf yang diperbesar. Maksudnya, huruf pada awal paragraf besarnya beberapa baris atau lebih besar daripada huruf-huruf lainnya. Besarnya huruf pada awal paragraf ini bisa diatur beberapa baris dari tulisan dan jarak antara drop caps dan tulisan yang lain. Drop Caps ini dimaksudkan untuk menambah keindahan suatu naskah baik berbentuk penulisan artikel, novel, cerpen, berita di koran atau majalah, dan naskah-naskah lainnya.

Fungsinya sendiri adalah disamping memperindah naskah tulisan, dapat memberikan daya tarik sendiri dengan harapan sipembaca dapat focus pada isi tulisan yang diberikan Drop Caps tersebut.

Dalam penerapannya Drop Caps bisa sahabat terapkan pada saat menulis sebuah artikel diblogger dengan mudah, dan untuk Penempatan drop caps sendiri bisa ditentukan apakah Drop Caps digunakan dalam postingan atau dalam kolom komentar atau bahkan dua-duanya. Memangnya bisa?, tentu saja bisa. Namun saat ini saya hanya akan focus membahas bagaimana cara dalam postingan saja dulu.

Mungkin sahabat bisa lihat Demo biar lebih jelas kalau ada yang masih bingung seperti apa Drop Caps yang dimaksud? 🤔.

Gimana sekarang sudah tahukan ?, terus gimana cara membuat dan memasangnya di blog?, berikut

Cara Memasang Drop Caps Pada Postingan Blog.

1. Budayakan membaca dan mencoba sebelum sahabat berkomentar.
2. Tutorial yang saya bagikan sudah 100% berfungsi di template Blogger bawaan ataupun template modifikasi pada umumnya (tergantung pada template yang sahabat gunakan).
3. Selamat mencoba dan tetap semangat...

• Direkomendasikan ikuti langkah demi langkah terlebih dahulu tanpa harus merubah/ mengganti sebagian atau seluruh kode CSS, JS atau HTML. Modifikasi dilakukan setelah kode tersebut berhasil diterapkan pada template.

• Backup Template sebelum merubah sebagian atau seluruh dari isi template, guna menghindari terjadinya kesalahan / ketidak sesuaian/ erorr saat merubahnya nanti. Berikut dibawah ini cara backup template bagi yang belum mengetahuinya.

×

1 / 4

2 / 4

3 / 4

4 / 4

❮ ❯

• Pelajari dan pahami element HTML tag <span> dan </span>, sebagai referensi bisa lihat Disini. Kode tersebut diatas adalah kode dasar untuk memanggil/ menampilkan Drop Caps pada postingan blog.

• Login Blogger > Menu Theme > Edit HTML
• Cari kode </style> atau </body> pada template, untuk mempercepat dan mempermudah gunakan shortcut Ctrl + F
• Copy kode CSS dibawah ini kemudian
  
  
  
• Paste tepat diatas atau sebelum kode </style> atau </body> tersebut.
• Save Template
• Untuk modifikasi tampilan bisa dirubah pada CSS kode ini.

• Login Blogger > Posts > Pilih New Posts atau Edit Posts > terdapat menu Compose dan HTML mode Pilih HTML
• Tulis atau pasang kode Drop Caps ini <span class="dropcaps1"> dan tepat dibawahnya tulis satu Huruf Awal yang akan diberi Drop Caps kemudian tutup dengan kode ini </span> atau Copy contoh penulisan dibawah.



• Lihat hasilnya sementara dahulu di Preview. Jika sudah merasa yakin semua berjalan dengan baik diterapkan pada template sahabat, silahkan Update untuk postingan edit atau Publish untuk postingan baru.

• Selamat, besar kemungkinan jika sahabat mengikuti setiap langkah diatas akan berhasil seperti Demo diatas (Result).
• Lakukan seleksi dari Versi 1 s/d 5 Drop Caps mana yang sesuai dengan gaya theme dan akan sahabat gunakan atau Bisa Saja sahabat ingin menggunakan semua versi drop caps tersebut bersamaan dalam satu postingan.
• Lakukan modifikasi lanjutan untuk tampilan sesuai dengan selera sahabat pada CSS kode diatas.
• Demo Versi 1 s/d 5 diatas hanya sebagai referensi dibuat dengan properties CSS yang bisa sahabat kembangkan kembali menjadi model tampilan yang lebih menarik dan bagus tentunya.
• Download file lengkap .txt tutorial ini sebagai media pembelajaran.

Silahkan sahabat memodifikasi lanjut untuk penempatan, ukuran, warna, dan model gambar disesuaikan dengan gaya template sahabat. Hindari memodifikasi yang berlebihan terkadang malah jadi menggangu baik tampilan maupun fungsi.

Demikian semoga membantu...

Please Share

• style='margin-right: 30px' target='-blank'>

Artikel Lainnya Terkait Costumized