All Style, Text and Writing Formats and Other Additional Features

 

One of the advantages of this template is the number of styles or text formats and post layouts provided to make your articles even cooler.

Please note that some of the post layouts contained in this template are also inspired by Medium.com, all text formats and other features will be explained in more detail in this update. As much as we can, we want to make sure you don't get disappointed when you buy this template.

Compose Mode

In this section, we will show an example of a layout based on compose mode specifically for those of you who are unfamiliar with HTML, all you need to do is write and this template prepares the layout.

In addition, all layouts in compose mode support responsive mode, so some layouts such as images and others will not have a problem when viewed on a smaller screen size or on a smartphone.

Format Fonts

The default fonts used in this template are Noto Sans, Poppins (heading), and Fira Mono, in this paragraph the font used is Arial which is the first choice of several fonts provided by blogger.

In this paragraph, the font used is Courier, which is perfect for writing HTML, Javascript or other code

Paragraphs with Georgian fonts, for some people this type of serif type are easier and more comfortable to read.

Paragraph in Helvetica font

You may like these posts

• Complete Guide to Using the Table of Content
• Converting Blogger Default Comments Into Facebook Comments
• Complete Guide Changing or Adding New Fonts

Paragraphs in Times font are more suitable if used as headings or subheadings of articles.

Paragraph in Trebuchet font

Paragraph with Verdana font, you can look at some of the differences in the fonts above and decide which font is best for your article.

List Style

List styles with numbers

1. First list
2. Second list
3. Third list
4. Fourth List

List styles with dots

• First list
• Second list
• Third list
• Fourth List

Blockquote

This is the blockquote look of this template, you can add a few other things in the block but it must be in HTML mode

You can also try using blockquote with a different style as shown below

The older the more you realize that all this time the closest and most loyal to us is God, while friends and family are slowly becoming distant

Maki M.A grain of dust

The writing format is as follows:

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

Friend's price is a price that is higher than the normal price because it aims to help a friend who is starting a business —

Ivan Lanin

Writing format:

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

HTML Mode (Expert)

For those of you who are experts in blogging and are accustomed to writing in HTML mode, some of the formats below may be familiar and worth a try.

Dropcap

DA rop cap is a capitalized letter used as a decorative element at the beginning of a paragraph or section.

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

Syntax Highlighter

It is a feature in the text editor that displays or highlights text, especially source code, in various colors and fonts according to the term. In this paragraph there are two additional features you can use, namely syntax. Here's a look at the syntax highlighter and how to use it:

// 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.	City name	Total population	Ages 19-25	Age 25-40	Age> 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

An example of writing a correct table like the one above is in html mode where the code is as follows:

<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

If you open Wikipedia, you will often find this feature in every article there. Is a list consisting of points or subject sections contained in an article. Usually used as details of the contents of the article in the form of a link so that it will make it easier for readers to choose what information on the subject matter to read.

Table of Content

1. Part heading one
2. Part heading two
   1. Subheading section one
   2. Subheading section two
   3. Subheading section three
3. Heading section three
4. Heading section four
5. Heading five

Writing format:

<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

The link button is different to display important links such as download links, previews and so on. By default it will look like this:

Button

Writing format:
<a class='button' href='Url_anda_disni'> Button </a>

Added an icon on the button

Download File

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

Another icon that you can try on this button, here is the preview:

Demo

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

Download File

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

Need help?

Writing format:
<a class='button whatsapp' href='Url_anda_disni'> <i class = 'whatsapp icon'> </i> Need Help? </a>

Download filesDemo

Writing format:

<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

This feature will be very useful for those of you who want to display videos in articles without having to think about loading the blog. Lazy YouTube has been integrated with Lazy Image, so even the thumbnail image will not reduce the loading speed of your blog. You can also beautify the appearance of the play button on the video by changing the code a little. Here's what it looks like (press the play button to play the 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>

Display video with a cooler play button:

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

Pay attention to the top of this paragraph title, there is a separation between the top paragraph and the next paragraph. how to use this is quite easy to write format just as below:

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

Block Text

This feature will look more leverage if the blog is opened on a smartphone, or please reduce the size of your browser window to see this feature.

<div class='post-block'>
  <!-- Isi teks Anda disini -->
</div>

Image

Each post is usually always inserted with an image to strengthen or explain the article, for that we provide several image loading options that you might try:

First Image

This feature is very suitable if used for the first image of the article - or which is usually located below / above the article title, on the desktop display the image will look the same as the regular image, the image will look different if you open your blog post on a smartphone or shrink your browser window screen. (with a note that the minimum image size is 640px) .

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

Responsive Grid Image

In this feature the image will be displayed as a three column grid and will adjust to 2 columns on a smaller screen size.

<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

Not much different from the Grid Image, it's just that when opened on a smaller screen the image will be displayed. Flexbox, the user can swipe the screen to the right to view other images.

<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 or show hide button

Spoiler serves to hide part of the content of the article and will be displayed by clicking

Spoiler Title:

Writing format:

<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

Serves to display faq content or questions on the blog, often referred to as the accordion menu

• First question
• Second question
• Third question

Writing format:

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

To add a new line, copy the code above from the <li> ... </li> tag and don't forget to change the offaccor-menu1 part to offaccor-menu4 and so on.

Hopefully some of the additional features above can make your posts look more organized and comfortable to read, please write comments and give feedback about new updates from this blog.