All Style, Text and Writing Formats and Other Additional Features

Semua style, format teks dan penulisan serta fitur tambahan yang terdapat dalam template Fletro Pro
All Text Format ini Fletro Pro

Salah satu kelebihan dari template ini adalah banyaknya style atau format teks serta layout postingan yang disediakan untuk membuat artikel Anda lebih keren lagi.

Perlu diketahui sebagian dari layout posting yang terdapat di template ini juga terinspirasi dari Medium.com, semua format teks beserta fitur lainnya akan dijelaskan lebih lengkap pada update kali ini. Kami sebisa mungkin ingin memastikan Anda tidak kecewa ketika membeli template ini.

Compose Mode

Pada bagian ini akan di tampilkan contoh tampilan layout berdasarkan mode compose yang khusus bagi Anda yang awam tentang HTML, yang perlu Anda lakukan hanya menulis dan template ini yang menyiapkan layoutnya.

Sebagai tambahan informasi semua layout dalam mode compose ini sudah support responsive mode, jadi beberapa layout seperti gambar dan lainnya tidak akan bermasalah ketika di lihat pada ukuran layar yang lebih kecil atau pada smartphone.

Font Format

Default font bawaan yang digunakan pada template ini adalah Noto Sans, Poppins(heading), dan Fira Mono, pada paragraf ini font yang digunakan adalah Arial yang merupakan pilihan pertama dari beberapa font yang disediakan blogger.

Pada paragraf ini font yang dipakai adalah Courier sangat cocok untuk penulisan kode HTML, Javascript atau kode lainnya

Paragraf dengan font Georgia, bagi sebagian orang font dengan jenis serif seperti ini lebih mudah dan nyaman untuk membaca.

Paragraf dengan font Helvetica

Paragraf dengan font Times yang lebih cocok jika dijadikan heading atau subheading dari artikel.

Paragraf dengan font Trebuchet

Paragraf dengan font Verdana, Anda bisa perhatikan beberapa perbedaan font diatas dan putuskan font mana yang terbaik untuk artikel Anda.

List Style

List style dengan nomor

  1. Daftar pertama
  2. Daftar kedua
  3. Daftar ketiga
  4. Daftar Keempat

List style dengan dots

  • Daftar pertama
  • Daftar kedua
  • Daftar ketiga
  • Daftar Keempat

Blockquote

Ini adalah tampilan blockquote pada template ini, Anda bisa menambahkan beberapa hal lain dalam blok namun harus dalam mode HTML

Anda juga bisa mencoba menggunakan blockquote dengan style berbeda seperti dibawah ini

Semakin tua semakin menyadari bahwa selama ini yang paling dekat dan paling setia dengan kita adalah Tuhan, sedang teman dan keluarga perlahan berjarak
Author
Maki M.Sebutir debu

Format penulisannya seperti dibawah ini:

<blockquote><!-- Text_anda_disini -->

  <div class='block-author'>
    <div class='block-img'>
      <img class='lazy' alt='Author' data-src='Url_gambar_disini' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    </div>
    <div class='block-info'><span class='block-name'>Your name</span><span class='block-desc'>Your title</span>
    </div>
  </div>
</blockquote>
Harga teman adalah harga yang lebih tinggi dari harga normal karena bertujuan untuk membantu teman yang merintis usaha

—Ivan Lanin

Format penulisan:

<blockquote class='style-3'><!-- Isi teks Anda disini --></blockquote>

HTML Mode (Expert)

Bagi Anda yang sudah expert dalam blogging dan terbiasa menulis dalam mode HTML, beberapa format dibawah ini mungkin sudah tidak asing lagi dan layak untuk dicoba.

Dropcap

Drop cap adalah huruf kapital besar yang digunakan sebagai elemen dekoratif di awal paragraf atau bagian.

<p><span class='dropcap'>Y</span>our text goes here</p>

Syntax Highlighter

Merupakan fitur pada teks editor yang menampilkan atau menyoroti teks terutama source code-dalam berbagai warna dan font sesuai dengan istilah. Pada paragraf ini terdapat dua fitur tambahan yang bisa Anda gunakan yaitu syntax. Berikut tampilan dari syntax highlighter beserta cara penggunaannya:

// Untuk menggunakan Syntax Highlighter penulisannya adalah seperti ini
<pre><code>
  <!-- kode html, css ata javascript disini -->
</code></pre>

// Fitur syntax tambahan yang bisa Anda gunakan ketika menulis kode

<i>Comment</i>     										= Kode dalam tag ini otomatis tidak akan ikut terseoroti
<i class='comment'>Comment</i> 				= <!-- kode html, css atau javascript disini -->
<i class='tag'>div</i>								= <div>
<span>CSS Property</span>     			  = main{display: block;position: relative}
<span class='block'>Block Text</span> = Digunakan untuk menyoroti bagian yang perlu diganti oleh user

Table

No Nama Kota Jumlah Penduduk Usia 19-25 Usia 25-40 Usia > 40
1 Balikpapan 10.023.211 5.000.223 2.500.332 2.499.232
2 Banjarmasin 10.023.211 5.000.223 2.500.332 2.499.232
3 Banjar Baru 10.023.211 5.000.223 2.500.332 2.499.232
4 Samarinda 10.023.211 5.000.223 2.500.332 2.499.232

Contoh penulisan table yang benar seperti diatas adalah dengan mode html yang kodenya sebagai berikut:

<div class='table'>
  <table>
    <thead>
      <tr>
        <th>No</th>
        <th>Nama</th>
        <th>Kota</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Kota</td>
        <td>Balikpapan</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Kelurahan</td>
        <td>Gunung Sari</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Desa</td>
        <td>Klandasan Ilir</td>
      </tr>
    </tbody>
  </table>
</div>

Table of Content

Jika Anda membuka Wikipedia, Anda akan sering menuemukan fitur ini pada setiap artikel disana. Adalah daftar yang terdiri dari poin-poin atau bagian-bagian pokok bahasan yang terdapat dalam sebuah artikel. Biasa digunakan sebagai rincian dari isi artikel yang berupa link sehingga akan memudahkan pembaca untuk memilih informasi bagian pokok bahasan apa yang akan dibacanya.

Format penulisan:
<div class='tableOfContent'>
  <input class='tocinput hidden' id='tableOfContent-01' type='checkbox'>
  <label class='tocHeader' for='tableOfContent-01' role='button'>Judul_toc_disini</label>
  <div class='tocContent'>
    <ol>
      <li><a href='#toc-1'>Bagian heading satu</a></li>
      <li><a href='#toc-2'>Bagian heading dua</a>
        <ol>
          <li><a href='#toc-2a'>Bagian subheading satu</a></li>
          <li><a href='#toc-2b'>Bagian subheading dua</a></li>
          <li><a href='#toc-2c'>Bagian subheading tiga</a></li>
        </ol>
      </li>
      <li><a href='#toc-3'>Bagian heading tiga</a></li>
      <li><a href='#toc-4'>Bagian heading empat</a></li>
      <li><a href='#toc-5'>Bagian heading lima</a></li>
    </ol>
  </div>
</div>

// Tambahkan id='toc-1' disetiap heading atau tag <h2>, <h3>, <h4> pada artikel Anda. Contoh:

<h4>Tutorial Membuat Table of Content</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.

// Tambahkan id pada heading menjadi seperti dibawah :

<h4 id='toc-1'>Tutorial Membuat Table of Content</h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.

// Tambahkan 'checked' pada tag input untuk menyembunyikan daftar isi, lihat contoh dibawah:

<input class='tocInput hidden' id='tableOfContent-01' type='checkbox' checked>

Button

Tombol link berbeda untuk menampilkan link penting seperti link download, preview dan sebagainya. Secara defaul tampilannya akan seperti dibawah ini:

Button

Format penulisan:
<a class='button' href='Url_anda_disni'>Button</a>

Penambahan icon pada tombol

Download File

Format penulisan:
<a class='button' href='Url_anda_disni'><i class='icon download'></i>Download File</a>

Icon lain yang bisa Anda coba pada tombol ini, berikut previewnya:

Demo

Format penulisan icon:
<i class='icon demo'></i>

Download File

Format penulisan:
<a class='button outline' href='Url_anda_disni'><i class='icon download'></i>Download File</a>

Butuh Bantuan?

Format penulisan:
<a class='button whatsapp' href='Url_anda_disni'><i class='icon whatsapp'></i>Butuh Bantuan?</a>

Format penulisan:

<div class='download-info'>
  <a class='button' href='Url_anda_disni'><i class='icon download'></i>Download file</a>
  <a class='button outline' href='Url_anda_disni'>Demo</a>
</div>

Lazy Youtube Video

Fitur ini akan sangat berguna bagi Anda yang ingin menampilkan video dalam artikel tanpa harus memikirkan loading blog. Lazy youtube ini sudah di integrasikan dengan Lazy Image, jadi gambar thumbnailnya sekalipun tidak akan mengurangi kecepatan loading blog Anda. Anda juga bisa mempercantik tampilan tombol play pada video nya dengan mengubah sedikit kode nya. Berikut tampilannya (tekan tombol play untuk memutar video):

//Penggunaannya sangatlah mudah dan simple, yang perlu Anda lakukan hanyalah
  • Menyalin kode pemutaran video youtube yang ingin ditampilkan
  • Contoh url video youtube : youtube.com/watch?v=s1tAYmMjLdY
  • yang perlu Anda salin hanyalah kode "s1tAYmMjLdY" dan menempelnya pada tag dibawah ini:
<div class='lazy-youtube' data-embed='s1tAYmMjLdY'> <div class='play-button'></div> </div>

Tampilan video dengan tombol play yang lebih keren:

// Penulisannya sama perti diatas, Anda hanya perlu mengubah kode <div class='play-button'></div> menjadi seperti dibawah ini:

<div class='lazy-youtube' data-embed='s1tAYmMjLdY'>
  <div class='playBut'>
    <svg class='svg-play' viewbox='0 0 213.7 213.7'><polygon class='triangle' points='73.5,62.5 148.5,105.8 73.5,149.1'></polygon><circle class='circle' cx='106.8' cy='106.8' r='103.3'></circle></svg>
  </div>
</div>

Paragraph Separator

Perhatikan bagian atas judul paragraf ini, terdapat pemisah antara paragraf atas dan paragraf berikutnya. caramenggunakan ini cukup mudah format penulisannya hanya seperti dibawah ini:

<i class='separate'></i>

Block Text

Fitur ini akan terlihat lebih maksimal jika blog dibuka pada smartphone—atau silahkan Anda perkecil ukuran jendela browser Anda untuk melihat fitur ini.
<div class='post-block'>
  <!-- Isi teks Anda disini -->
</div>

Image

Setiap posting biasanya selalu disisipi gambar sebagai penguat atau penjelas artikel tersebut, untuk itu kami memberikan beberapa pilihan pemuatan gambar yang mungkin bisa Anda coba:

First Image

Fitur ini sangat cocok jika digunakan untuk gambar pertama artikel—atau yang biasanya terdapat dibawah/atas judul artikel, pada tampilan desktop gambar akan terlihat sama dengan gambar biasa, gambar akan terlihat berbeda jika Anda membuka postingan blog Anda di smartphone atau kecilkan layar jendela browser Anda (dengan catatan ukuran gambar minimal 640px).

First Image
<div class='first-image'>
  <img alt='Judul_gambar' src='Url_gambar'/>
</div>

Responsive Grid Image

Dalam fitur ini gambar akan ditampilkan dalam bentuk grid tiga kolom dan akan menyesuaikan menjadi 2 kolom pada ukuran layar yang lebih kecil.

Responsive Grid Image Responsive Grid Image Responsive Grid Image
<div class='grid-image'>
  <img class='lazy' alt='Judul_gambar' data-src='Url_gambar' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <img class='lazy' alt='Judul_gambar' data-src='Url_gambar' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <img class='lazy' alt='Judul_gambar' data-src='Url_gambar'  src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
</div>

Horizontal Scroll Image

Tidak jauh berbeda dengan Grid Image, hanya saja pada saat dibuka di layar yang lebih kecil gambar akan ditampilkan flexbox user bisa swipe layar ke kanan untuk melihat gambar lainnya.

Responsive Grid Image Responsive Grid Image Responsive Grid Image
<div class='scroll-image'>
  <img class='lazy' alt='Judul_gambar' data-src='Url_gambar' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <img class='lazy' alt='Judul_gambar' data-src='Url_gambar' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <img class='lazy' alt='Judul_gambar' data-src='Url_gambar'  src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
</div>

Spoiler atau tombol show hide

Spoiler berfungsi untuk menyembunyikan sebagian isi artikel dan akan ditampilkan dengan cara di klik

Judul Spoiler:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum. Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.

Format penulisan:

<div class='spoiler'>
  <input class='spoiler-input hidden' id='spoiler-01' type='checkbox'>
  <div class='spoiler-judul'>Judul Spoiler<label aria-label='Spoiler' class='button' for='spoiler-01'></label></div>
  
  <div class='spoiler-isi'>
    <div>Isi spoiler</div>
  </div>
</div>

Faq / Accordion Menu

Berfungsi untuk menampilkan konten faq atau bertanyaan dalam blog, sering disebut dengan accordion menu

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus.
  • Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum. Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.
  • Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum. Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.

Format penulisan:

<ul class='accordion'>
  <!-- Baris pertama -->
  <li>
    <div class='accor-content'>
      <input class='accor-menu hidden' id='offaccor-menu1' name='accordion-menu' type='radio' />
      <label class='accor-title' for='offaccor-menu1'>
        <i class='accor-icon'></i>
        <span class='title'>Pertanyaan pertama</span>
      </label>
      <div class='content'>Jawaban pertanyaan pertama</div>
    </div>
  </li>
  <!-- Baris kedua -->
  <li>
    <div class='accor-content'>
      <input class='accor-menu hidden' id='offaccor-menu2' name='accordion-menu' type='radio' />
      <label class='accor-title' for='offaccor-menu2'>
        <i class='accor-icon'></i>
        <span class='title'>Pertanyaan kedua</span>
      </label>
      <div class='content'>Jawaban pertanyaan kedua</div>
    </div>
  </li>
  <!-- Baris ketiga -->
  <li>
    <div class='accor-content'>
      <input class='accor-menu hidden' id='offaccor-menu3' name='accordion-menu' type='radio' />
      <label class='accor-title' for='offaccor-menu3'>
        <i class='accor-icon'></i>
        <span class='title'>Pertanyaan ketiga</span>
      </label>
      <div class='content'>Jawaban pertanyaan ketiga</div>
    </div>
  </li>
  <!-- Baris seterusnya... -->
  ...
</ul>

Untuk menambahkan baris baru, salinlah kode diatas dari tag <li> ... </li> dan jangan lupa ubah bagian offaccor-menu1 menjadi offaccor-menu4 dan seterusnya.

Semoga beberapa fitur tambahan diatas bisa membuat postingan Anda terlihat lebih tertata dan nyaman untuk dibaca, silahkan tulis komentar dan beri tanggapan tentang update baru dari blog ini.

You may like these posts

44 comments

  1. Maki M.
    Komentar dari admin
    • Maki M.
      Tampilan balasan komentar
    • Nazril Ilham
      Balasan komentar oleh akun penulis blog lain
    • A. Abdul Mustahab ツ
      kalo admin dinkasi centang biru, keren nih kalo akun penulis di kasi icon pensil.. 😁
    • Maki M.
      Sayang nya gak bisa mas, dari blogger nya akun penulis dinggap seperti akun user biasa
    • Ade Arif
      test balas lagi... :) :)
    • A. Samuel
      This is really helpful
  2. M. Limon
    Test
  3. Ketua Osis
    woo mantap tampilan jadi baru
  4. Slamet Nurhadi
    Mas cara bikin baca juga nya terpisah bagaimana yaah agar tidak cuman di bawah doang baca juga nya, jd ada yg di tengah tengah artikel , dan di atas juga
  5. Kho Phim Plus
    Great! Thank you
  6. Moh Ravi Dwi Putra
    Test link aktif
  7. Fernand
    di fletro 3 coloumn bermasalah dengan recent post yang menggunakan feed post penuh, dan webmaster menganggap tidak responsive karena melebihi lebar template
  8. Manish
    Hello, I want to know that how to get the image src codes.....Pls tell
    • Abdul Halim
      First upload image to post, then change compose to html. search where image code and looking for src code.. copy that, and change to new code like article..
      dont forget to delete image code at upload..
      common code is <div class="separator">....</div>
      sorry for my bad english
  9. Abdul Halim
    First upload image to post, then change compose to html. search where image code and looking for src code.. copy that, and change to new code like article..
    dont forget to delete image code at upload..
    common code is <div class="separator">....</div>
    sorry for my bad english
  10. Nurul Huda
    min kasih tutorial cara menambahkan icon media sosial, di fletro versi 5.3 seperti versi sebelumnya min
  11. Tosy Caesar K.
    min bagaimana cara buat syntax highlighter supaya ada scroll kebawahnya? Pakai scroll supaya tidak terlalu panjang.

    Makasih min, semoga versi 5.4 segera meluncur
    • Abdul Halim
      - Agan cari kode ini .post-entry pre code {....}
      - Agan tambah kode max-height: 250px di dalam kurung yang saya tandai ... itu

      Ubah 250 sesuai keinginan, semoga bermanfaat :D
    • Abdul Halim
      ini contoh yg udah ditambah

      .post-entry pre code{font-size:12px;line-height:1.5em;display:block;padding:15px 20px;font-family:'source code pro',menlo,consolas,monaco,monospace;overflow:auto;white-space:pre;max-height: 250px}
    • Tosy Caesar K.
      ini carinya di edit theme ya mas?
  12. Nguyễn Quang Sáng
    Cara membuat postingan pertama di PopularPosts berkelas mostPopular
  13. amrinz
    test
  14. Najaril GO
    Mencoba berkomentar
  15. PDFMafia Team
    Hii
  16. SuperPro Lite
    Dear Sir,
    How i add in-feed ads in this latest version of fletro.
    I want this feature, Please fix it
  17. hasheemi Rafsanjani
    https://1.bp.blogspot.com/-uIwUKwwm72E/X8HjwsYPvQI/AAAAAAAAAVw/5_QM2KtR9xMcdd19hmum-fRzbYr4s5xBwCLcBGAsYHQ/s300/pjj.jpg
  18. sofanmax
    Judul di tampilan mobile jadi kurang bagus karena kepotong kalau jumlah karaternya agak banyak. Versi sebelumnya (5.4) judul bisa tampil full walaupun panjang. Other than that, massive improvement, keep up the good work!
    • Maki M.
      Memang sengaja disetting begini agar layout nya lebih rapi, tapi kalau mau kembalikan seperti semula, cari dan hapus kode dibawah ini :

      -webkit-line-clamp: 2;
  19. M. Limon
    This comment has been removed by a blog administrator.
  20. Rohan
    https://www.jkyouth.com/wp-content/uploads/2020/12/20201222_225802_0000-1024x576.png
  21. বঙ্গ উইকি
    How to auto table of Contents?
  22. Lincons Tech Team
    url_image_here
    • Lincons Tech Team
      code_here
  23. GT Media
    Hello Maki!

    Can you please tell me how can I add a copy text button inside the blockqote, so that the user can copy the blockqote (quoted text) directly in one single click.

    Waiting for your reply.
  24. uji coba template
    Test
  25. Hamba Allah
    yang scroll layar gak bisa di pake ke median ui ya ?
  26. P.Y.G
    vmess://ew0KICAidiI6ICIyIiwNCiAgInBzIjogIueyvuWTgemfqeWbvTAxIiwNCiAgImFkZCI6ICIyNy4xMDIuMTMwLjE3MCIsDQogICJwb3J0IjogIjEwMDAxIiwNCiAgImlkIjogIjhhNDI2ZWMzLTdkMjUtNGRhOS05ZDZmLTAxYTY2ZWViMTEwMCIsDQogICJhaWQiOiAiMCIsDQogICJuZXQiOiAidGNwIiwNCiAgInR5cGUiOiAibm9uZSIsDQogICJob3N0IjogIiIsDQogICJwYXRoIjogIiIsDQogICJ0bHMiOiAiIg0KfQ==

  27. Raja Lubis
    test
  28. Dr. Rabbi
    Can I use pinterest style image? Does your theme able to crop the whole image (800px width x 1200px height) on homepage on both both list and grid style?
  29. uji coba template
    Hallo bang makki saya menemukan beberapa bug di template fletropro ini antaralain
    1. Kebanyakan mode dark belum sepenuhnya warna berubah
    -warna judul spoiler masih hitam
    -warna judul accordion menu masih hitam
    1.accordion menu setelah dibuka
    tidak bisa di hide kembali.
    2.accordion menu tidak bisa di
    buka semua sekaligus.
    -pada kotak komentar, warna tulisan sign out dan publish masih hitam
    -tampilan mode short old comment atau letes comment masih putih. Ditambah lg Z-indexnya melebihi header, oleh sebab itu jika kita membuka short komentar dan kita melakukan gulir ke atas tanpa menutup dulu short komentar maka header akan ketimpa/ketutup.
    -warna simbol icon seperti simbol icon download dan yang lainnya masih hitam.

    Mungkin itu saja bang makki bug yang dapat saya sampaikan.. semoga di updatan selanjutnya dapat diperbaiki atau diperbarui supaya semakin menarik dan seo frendy. Terimakasih..
    • uji coba template
      Oh ya ada lg bugnya bang makki saya lupa memberi tahukan
      1.pd tampilan grid mode, info post seperti nama autor dan komentar tidak sejajar sengan kotak post yang sampingnya jadi kelihatan kurang rapih.
      2. Masalah load more, saat kita buka label yg jumlah postnya masih sedikit terkadang load morenya loading terus.
      3.info komentar di homepage/di atas dalam artikel tidak bisa diklik menuju ke kolom komentar langsung. Jadi kelihatan hanya sebagai hiasan info jumlah komentarnya saja tidak ada link untuk menuju ke komentar saat di klik.(mungkin ini karena fitur show hide komentar) di template ini.
  30. Admin
    Nice Post mas
  31. Hamraj37
    Lovely
  1. To insert a code use <i rel="pre">code_here</i>
  2. To insert a quote use <b rel="quote">your_qoute</b>
  3. To insert a picture use <i rel="image">url_image_here</i>
Tinggalkan komentar sesuai topik tulisan, komentar dengan link aktif tidak akan ditampilkan.
Admin dan penulis blog mempunyai hak untuk menampilkan, menghapus, menandai spam, pada komentar yang dikirim