July 28, 2019

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

Sudah punya waktu luang lagi setelah kerja sampingan dan tidak ingin menunggu waktu hingga sore merambat menuju malam, saya mencari bahan tulisan. Setiap tulisan saya mayoritasnya adalah Trik template blog versi terbaru!
kali ini saya ingin berbagi trik membuat huruf pertama postingan blog menjadi besar dan berwarna warni. Oh ya kalau mau templatnya blogger yang sudah memiliki kemampuan seperti ini secara bawaan pakai saja template notable. Tapi kali ini saya akan bahas bagaimana menambahkannya pada template yang tidak memilikinya.  Baiklah langsung saja ya...

1. UNTUK BLOGGER BLOGSPOT
contoh huruf besar di awal postingan
bigger capital letter


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...

A coding addict, a hard smoker, love boxing even not a boxer. Love maths even not a scientist

12 comments:

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

    ReplyDelete
    Replies
    1. Thank you, Ivlay
      Thank you Khairunnisa

      Delete
    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

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

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

    ReplyDelete
    Replies
    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

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

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

    ReplyDelete
  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

    ReplyDelete