Skip to main content

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

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

Post a Comment

Ajukan pertanyaan dan berikan detailnya untuk memudahkan kami menganalisa dan troubleshooting agar kami dapat membantu atau membantu memecahkan masalah seputar kode kode HTML, CSS dan JS template blog kalian

Jika ingin komen dengan menyisipkan kode HTML, parse terlebih dahulu kodenya di :
Blogcrowds
Lalu hasil parse pastekan ke dalam kotak komentar.

Bagaimanapun pertanyaan, kritik, saran dan masukan dari kalianlah yang membuat blog ini tetap bertahan dan ada.

Terimakasih

Salam dari Admin
Anissa Auliasari

Popular Posts

MEMPERBAIKI ADD NUMBERING DAN ADD BULLETS YANG TIDAK BISA TAMPIL PADA POSTINGAN BLOG

Tulisan ini di posting adalah karena terdapat problem yang muncul setelah template di buat dan postingan di cobakan atau di publish. Terutama karena hal ini terjadi pada tema EditBlogTema yang dibuat untuk sementara berdasarkan tema sederhana bawaan blogger.
Problem tersebut muncul karena pada saat menuliskan beberapa item dalam bentuk daftar atau list ternyata tidak terlihat pada postingan padahal sudah di publish ke hadapan pembaca. Setelah saya cari di dasbor ada tool yang bernama "Add Numbering dan Add Bullets" yang tidak bekerja.

Sudah tentu ini pasti celah kelemahan tema jadi harus segera di perbaiki.

Ketika menulis pada dasbor blog dan di preview sepertinya tidak ada yang salah diatas tool "compose" terdapat add numbering dan add bullets tesebut dan pada saat dilakukan penulisan dalam bentuk list keduanya tampak berfungsi dengan baik, tapi apa yang terjadi pada saat artikel setelah di publish? Maksud menampilkan daftar atau list tadi hanya menampilkan tulisa…

BENANG MERAH CINTA SANG PENCIPTA

Andy Weir menulis sebuah cerpen pada tahun 2009, cerpen yang sangat menarik, indah sekaligus menakutkan jika dia bercerita perihal ide realitas hidup kita, semacam multiverse dalam fiksi sains dan fisika.
Aku adalah Tuhan dan Kamu sedang dalam perjalanan pulang ke rumah ketika kamu meninggal... Sebuah kecelakaan mobil, sebenarnya bukan peristiwa luarbiasa tetapi kematian tidak pernah memberikanmu pilihan. Kamu meninggalkan seorang isteri dan dua orang anak. Kematianmu itu tidak terlalu menyakitkan, paramedis telah berusaha menyelamatkan hidupmu, tetapi tidak ada harapan, tubuhmu telah hancur, dan itu lebih baik, percayalah kepadaku....
Dan disana, kamu akhirnya bertemu dengan Aku.

"Apa yang terjadi? " kamu bertanya. " Dimanakah aku kini ? " 
"Kamu sudah meninggal," Jawabku dengan suara datar. Bukan seperti nada yang menarik seperti yang kamu harapkan. 
"Apakah tadi aku ditabrak truk?...Sebuah tanjakan.." 
"Benar" Jawabku 
"Aku....…

Kisah UAS Dan Mellya Juniarti: Tidak ada yang abadi.

Sudah lama saya tidak menulis di halaman blog ini, karena lebih banyak terfokus pada pekerjaan sehari hari. Sampai akhirnya saya tergelitik untuk ikutan menulis tentang UAS, setelah membaca berita yang bertebaran di internet.
Menulis menurut sudut pandang saya sendiri. Atau lebih spesifiknya sebagai seorang blogger.

Fakta 1. Ustad Abdul Somad - Mellya Juniarti Resmi bercerai.
Peristiwa ini menarik perhatian saya apalagi tentang hubungan dua insan yang pernah bertekad memilih hidup bersama selamanya. Siapa sih yang ingin berpisah? Gambar di atas sudah bertebaran di internet, di medsos dan tidak akan dapat di hapus lagi dari dunia maya karena jalin menjalin sangat kuat di dalam library di dunia website.

Saya tahu itu karena saya peminat web dan mengerti segala impikasinya terhadap kehidupan dan privasi manusia pada saat ini. Dunia sekarang telah hampir kepada dimana dinding, lantai dan langit dapat mendengarkan setiap perkataan dan bahkan helaan nafas kita.

Ya, photo itu telah di postin…

PANDUAN LENGKAP MENGEDIT TEMPLATE EMPORIO

Untuk template blogger default versi 3 Ini adalah panduan lengkap cara "mengoprek" template bawaan (default) blogger menjadi beda dan tampak premium. Ikuti secara seksama. Sisanya ada ditangan sobat sendiri...
Bagian Isi:
Kelebihan template bawaan bloggerKelebihan varian terbaru template bloggerMerombak heading blogger agar dinamisMemasang related postMemasang menu navigasiMenambahkan CSSMenambahkan HTMLMenambahkan Javascript Langkah merubah Desain Template blogger:
(Menggunakan HTML untuk mengubah desain blog)
Login ke Blogger.Pilih blog untuk diperbarui.Di menu sebelah kiri, klik Tema.Di sebelah kanan agak keatas ada ikon tiga titik klik dan, klik Edit HTML.Buat perubahan yang Kalian inginkan.Klik Simpan tema. Template adalah bagian terpenting dari sebuah blog tidak perduli sobat ngeblognya pakai platform Wordpress, Jimdo, Wix atau Blogspot dan lain lain. Tidak perduli sobat memakai template premium berbeli atau hanya sekedar memakai template yang telah tersedia secara defau…

ALASAN MENGAPA MENGGANTI SISTEM ANDROID KE SISTEM OPERASI BARU NYARIS MUSTAHIL AKAN SUKSES

Huawei jelas sedang mencoba dan itu pasti akan ada harganya: Akan hadir sebuah sistem baru yang akan membuat kita panasaran seperti apa bentuk dan performanya jika dibanding dengan Android yang selama ini telah memberikannya "nyawa" untuk hidup dan menjadi sebesar sekarang.
Karena kita tahu sehebat apapun sebuah mesin gagdet tiada akan ada artinya tanpa sistem operasi, software dan aplikasi, maka suatu gadget  itu ibarat raga tanpa nyawa. Dilatari nasibnya yang ter"aniaya" oleh Trump (baca:Amerika)  tentu sangat menarik untuk mengikuti perkembangan nasib dari Huawei. Akankah Huawei tetap menjadi besar setelah menggunakan sistem operasinya sendiri?

Baca juga:
Siapa pemenang, siapa pacundang Amerika atau Cina? bagian pertamaSiapa pemenang, siapa pacundang Amerika atau Cina? bagian Kedua Oke mari kita simak penjelasan yang saya simpulkan dari pendapat para ahli mengapa hal itu sulit menjadi kenyataan:
1. Terlihat sederhana Platform mobile beserta ekosistemnya itu sanga…
Copyright © Editblogtema. All rights reserved.