Close Menu
Renovasi Otak
    • News
    • Tips & Trik
    • Game
    • Internet
    • Aplikasi
    • Indeks
    Facebook X (Twitter) Instagram
    • Home
    • About
    • Kebijakan Privasi
    • Pedoman Media Siber
    • Kontak
    • Redaksi
    Facebook X (Twitter) Instagram YouTube
    Renovasi OtakRenovasi Otak
    • News
    • Tips & Trik
    • Game
    • Internet
    • Aplikasi
    • Indeks
    Renovasi Otak
    Home»Blogger»Cara Membuat Drop Cap di Blogger Secara Otomatis
    Blogger

    Cara Membuat Drop Cap di Blogger Secara Otomatis

    Nando RifkyBy Nando Rifky15 December 2024No Comments2 Mins Read0 Views
    Facebook Twitter Pinterest LinkedIn Telegram Tumblr Email
    Share
    Facebook Twitter LinkedIn Pinterest Email
    Cara membuat drop cap di blogger

    Drop Cap adalah singkatan dari Dropped Capital atau huruf besar yang berada di awal paragraf yang biasa digunakan untuk menghias gaya tulisan agar lebih menarik. Kebanyakan Drop Cap berukuran 2 sampai 5 baris, tergantung pengaturan kita.

    Untuk membuat Drop Cap di blog ternyata tidak sesulit yang kita bayangkan. Untuk Anda yang sering bergulat dengan dunia code CSS mungkin dapat dengan mudah membuat Drop Cap sendiri. Namun, untuk orang awam dan tidak mengerti tentang code, tenang disini saya akan membagikan cara membuat drop cap di blog.

    Cara Membuat Drop Cap di Blogger

    Disini saya akan menggunakan CSS untuk membuat Drop Cap. Cara ini sudah saya coba di beberapa template blogger dan berhasil. Jadi kemungkinan juga cara ini bisa digunakan di template Anda.

    1. Buka Dashboard Blogger.
    2. Pergi ke Tema, pilih Edit HTML.
    3. Tekan CTRL + F dan cari kode </style> atau </b:skin>.
    4. Anda bisa meng-copy code dibawah ini dan tempelkan di atas </style> atau </b:skin>.
    /* CSS Drop Cap by Vasiota.com */
    .post-body:first-letter,
    .post-body .dropcap:first-letter {
    font-weight: bold;
    font-size: 65px;
    float: left;
    padding: 0;
    margin: -4px 5px 0px 0px;
    position: relative;
    background-color: none;
    line-height: 0.9;
    }

    *Kode :first-letter diatas artinya huruf pertama.

    *Catatan: Drop Cap ini berfungsi jika di awal artikel Anda merupakan text. Jika di awal artikel Anda berupa gambar, kode ini tidak akan berfungsi.

    Jalan satu-satunya jika di awal semua artikel sudah terlanjur berupa gambar, Anda dapat memindahkan gambar tersebut dibawah paragraf pertama atau menambahkan drop cap secara menual dengan menggunakan code:

    <span class="dropcap">Ini adalah paragraf pertama</span>

    Bagi Anda pengguna WordPress untuk, menambahkan Drop Cap Anda bisa menggunakan plugin Block Gutenberg.

    Apakah cara diatas berjalan dengan baik di blog Anda masing masing? Mungkin iya. Namun jika tidak, silahkan berkomentar di bawah.

    Itulah tutorial cara membuat dropcap otomatis di semua postingan blog. Sekarang, artikel Anda menjadi lebih menarik dengan menambahkan drop cap. Semoga bermanfat, terimakasih.

    Post Views: 116
    Share. Facebook Twitter Pinterest LinkedIn Tumblr Email
    Nando Rifky

      Chief Executive Officer Vasiota.com, SEO Enthusiast, Content Writer Manager

      Related Posts

      Cara PING Sitemap ke Webmaster Google dan Bing

      16 December 2024

      Cara Cek Ranking Artikel di Google dengan SEO SERPmojo

      16 December 2024

      Cara Membuat Tombol Download Keren dengan CSS

      15 December 2024

      Instant: 9 Cara Agar Postingan Blog Cepat Terindex Google Untuk Pemula

      15 December 2024

      Inilah 5 Daftar Plugin Wajib WordPress Terbaik 2021

      15 December 2024

      Pengertian Unique Visitor, Visitor, dan Bounce Rate dalam Dunia Blogging

      15 December 2024
      Leave A Reply

      Terbaru
      4 Pilihan Laptop Terbaik untuk Kuliah (Rekomended)
      8 September 2025
      Memahami Fenomena Shadowban Instagram di Tengah Gelombang Aktivisme Online
      8 September 2025
      Catat! Ini Penyebab Tidak Bisa Klaim JHT di JMO
      2 September 2025
      9 Cara Mengatasi Aplikasi JMO Tidak Bisa Dibuka dan Penyebabnya
      29 August 2025
      • Facebook
      • Twitter
      • Pinterest
      • Instagram
      Jangan Lewatkan
      4 Cara Mengatasi Laptop Tidak Bisa Connect WiFi, Solved!
      15 December 2024

      VASIOTA.COM – Ketika laptop Anda tidak terhubung ke WiFi, itu membatasi metode yang dapat Anda…

      Cara Membuat Drop Cap di Blogger Secara Otomatis
      15 December 2024

      Drop Cap adalah singkatan dari Dropped Capital atau huruf besar yang berada di awal paragraf…

      Cara Mengatasi “Error Code: VAN 68” di Valorant
      14 December 2024

      VASIOTA.COM – Valorant adalah game online multipemain yang sangat terkenal. Pengguna suka bermain game. Gim ini diluncurkan…

      11 Alternatif AdSense Terbaik untuk Monetisasi Blog Anda
      15 December 2024

      Sebagaian besar pengguna baru blogger berfikir satu satunya jalan untuk mendapatkan penghasilan dengan menayangkan iklan…

      Banner BlogPartner Backlink.co.id Seedbacklink
      Tentang Vasiota.com
      Tentang Vasiota.com

      Kami berdedikasi untuk menerangi dunia teknologi, menawarkan wawasan mendalam dan berwawasan ke depan tentang tren dan perkembangan terbaru di sektor ini.

      Helpful Links
      • Home
      • Tentang Kami
      • Kebijakan Privasi
      • Pedoman Media Siber
      • Kontak
      • Redaksi
      • Disclaimer
      • Kode Etik
      • Info Iklan
      • Karir
      • Vasiota.com | Anti Gaptek!
      Facebook X (Twitter) Instagram Pinterest YouTube Dribbble
      • News
      • Tips & Trik
      • Game
      • Internet
      • Aplikasi
      • Indeks
      © 2025 Vasiota.com

      Type above and press Enter to search. Press Esc to cancel.