CARA MEMBUAT HURUF PERTAMA POSTINGAN BLOGGER dan WORDPRESS JADI BESAR DAN GAYA

Sebenarnya template blogger terbaru varian Notable sudah memiliki fitur dimana setiap huruf pertama yang kita tuliskan akan menjadi besar. Contohnya pada tulisan ini.
1. UNTUK BLOGGER BLOGSPOT

huruf pertama besar dan gaya
huruf pertama besar dan gaya


Tambahkan CSS.
Caranya sederhana saja:
  1. Masuk ke pengaturan blog
  2. Pilih tema (atau theme kalau bahasa Inggris)
  3. Pilih "sesuaikan" (atau customize kalau bahasa Inggris)
Setelah sesuaikan dipilih maka kita masuk ke mode "Blogger Theme Designer" disana pilih "lanjutan" (atau advance kalau bahasa Inggris) begitu diklik disebelah kanan akan muncul list menu dropdown dari atas ke bawah, scroll hingga sampai ke menu paling bawah. Pilih "Tambahkan CSS" (atau add CSS kalau bahasa Inggris).
Tambahkan CSS
Ketika kotak blanko kosong CSS muncul, copy kode dibawah ini dan pastekan kedalam blanko kosong kotak CSS tadi:
.dropcap{float:left;color:blue;background:white;line-height:50px;padding-right:5px;font-family:Arial;font-size:90px;}
Silahkan robah:
  1. Warna huruf yang saya sorot warna pink, sengaja saya pilih sintaksnya mirip bahasa manusia (inggris, misal: blue =biru; black=hitam; yellow=kuning; dst
  2. Warna latar juga bisa dirobah silahkan robah warna "white" yang saya sorot kuning dengan warna menurut selera sobat sendiri.
  3. Ukuran huruf juga bisa di robah, contoh saya menggunakan ukuran 90px
 Itu baru CSS pembentuk ya, agar huruf pertama menjadi gaya dan besar kita masih perlu menambahkan atribut dibawah untuk satu huruf pertama saja pada setiap postingan dengan cara:
ketika masuk ke mode "compose" untuk membuat postingan baru pindah ke mode "HTML" karena pada opsi menulis postingan keduanya bergandengan saja seperti terlihat pada gambar dibawah namun tentu saja harus dimulai menulis secara normal pada mode compose terlebih dahulu:
pilih HTML
Nah ketika masuk ke mode HTML, Cari huruf pertama postingan misalnya kalimat begini:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa.
Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim.
Fusce est. Vivamus a tellus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede.
Berarti huruf awalnya adalah 'L' maka dalam mode HTML kurung huruf tersebut dengan cara berikut:
<span class="dropcap">L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa.
Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim.
Fusce est. Vivamus a tellus.
Pellentesque habitant morbi tristique senectus et netus et malesuada 
Maka pragraf jadinya jika mengikuti tutorial singkat saya adalah menjadi sebagai berikut:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa.
Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim.
Fusce est. Vivamus a tellus.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede.


2. UNTUK WORDPRESS
Masuk ke file functions.php pada tema yang anda gunakan terserah mau dari cpanel hostingan ataupun dari dashboard. Jika dari dashboard, pilih appearance > theme editor > dan buka theme functions. Tambahkan kode berikut di bawah ini:
<?php
function FirstCapital ($content = '') {
return '<p class="caps">' . $content;}
add_filter('the_content', 'FirstCapital', 5);
?>
Jangan lupa save
Selanjutnya masih pada directori yang sama, buka file style.css, tambahkan style berikut:
.caps:first-letter {
font-size: 40px;
font-weight: bold;
float: left;
font-size: 40px;
font-weight: bold;
float: left;
margin: 5px 6px 0 0;}
Jangan lupa Save.

Untuk mengatasi agar kode berjalan pada beberapa tipe tema atau template wordpress yang menggunakan "excerpt" atau "post teaser" maka selanjutnya perlu menggunakan CSS rubah sedikit kode pada script css di atas dengan menambahkan parameter “Class ID” styling css, misalnya pada blockquote. Maka kode pada CSS menjadi seperti ini:
blockquote p :first-letter {
font-size: 40px;
font-weight: bold;
float: left;
margin: 5px 6px 0 0;}
Selamat mencoba...

12 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. I like this blog. I like to read your English. Keep writing 😉

    BalasHapus
    Balasan
    1. Thank you, Ivlay
      Thank you Khairunnisa

      Hapus
    2. Thank you sis..Anissa has created all my blogger theme by premium 😎 thank you for trust me for collaborate. Blog just a hobby and for fun

      Hapus
  2. Mau langsung praktek!
    Ih racun banget sih blog ini hahaha.
    Semoga saya utak atik nggak bikin eror ataupun berat :D

    BalasHapus
  3. saya sangat tertarik dengan dunia programming tapi saya bingung mau mulai dari mana. :)

    BalasHapus
    Balasan
    1. Aorlin, dari HTML saja dulu. Prinsipnya bahasa programming itu sama saja, beda tingkat kesulitan, makin mirip bahasa manusia semakin tinggi tingkatnya. Semakin beda semakin sulit. Contoh bahasa mesin assembly itu bahasa tingkat rendah, tapi sulitnya minta ampun

      Hapus
  4. saya pernah buat dulu. tapi selepas 'make up' blog, terus hilang hehehe

    BalasHapus
  5. Oalah, ternyata caranya gitu tho. Saya dulu penasaran banget gimana itu caranya?
    Makasih infonya mas sofyan...

    BalasHapus
  6. entahlah saya sedikit parno dengan yang namanya edit html, sekalipun dibilangin mudah, dikasih tutorialnya, wkwkkwk tetap saja takut. Efek pernah trauma dengan html an

    BalasHapus
Lebih baru Lebih lama

Formulir Kontak