All Median UI Typography Templates

Compose mode

This is the standard layout of Blogger posts in compose mode and all the features included in this mode. This mode is also responsive so several layouts such as images, blockquotes and so on will adjust the display based on the user's screen size.

This paragraph is standard with tags <p> tag of this template with no additional indents, the font size and line height have been set to make the text easier to read.

The quote text paragraph will appear like this with a different text color than a regular paragraph

List or list on posts with numbers

First list
Second list
Third list
Fourth list

List or list with dots

First list
Second list
Third list
Fourth list

Paragraphs with additional anchor links dan active links are added manually via compose mode.

In this paragraph, the table format in this template will be displayed along with other formats such as blockquote or html code insertion and additional styles that can be used in html mode.

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

The correct way to write a table as above is in html mode which code is as follows:

<div class='table'>
  <table>
    <thead>
      <tr>
        <th>No</th>
        <th>Name</th>
        <th>City</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>

Additional format that can only be used in HTML mode

Writing Syntax Highlighter manually in post HTML mode

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

You can write html code outside the syntax like this example: </div>, it's quite easy just by writing the code as below. Make sure the tag you are going to write is parsed as shown below

<span class='code'>&lt;div&gt;</span>

Paragraph Break

The second paragraph is separated by three dots (as you can see above this paragraph) which serve as page breaks in a long article.

Writing format:

<p>Isi_paragraf_disini</p>

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

Blockquote

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.

Writing format::

<blockquote class='style-1'>
  <div>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.

    <ul> // Opsional bisa digunakan atau dihapus
      <li>Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum.</li>
      <li>Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.</li>
    </ul>
  </div>
</blockquote>

Table of contents or table of content

It is a feature that is usually found on wikipedia which serves to make it easier for users to find out the main points or contents of the post in the post.

This manual table of contents can be used as an alternative because in the AMP version an automatic table of contents is not available.

Table of contents

Heading title one
Heading title two
Heading title three
Heading title four
Heading title five

Writing format:

<div class='daftar-isi'>
  <input class='isi-input hidden' id='daftar-isi01' type='checkbox'>
  <label class='isi-judul' for='daftar-isi01'>Daftar isi</label>
  <div class='isi-content' id='isi-content'>
    <ol>
      <li><a href='#toc-1'>Judul heading satu</a>      
        <ol>
          <li><a href='#toc-1a'>Subheading satu</a></li>
          <li><a href='#toc-2b'>Subheading dua</a></li>
          <li><a href='#toc-3c'>Subheading tiga</a></li>
          <li><a href='#toc-4d'>Subheading empat</a></li>
          <li><a href='#toc-5e'>Subheading lima</a></li>
        </ol>
      </li>
      <li><a href='#toc-2'>Judul heading dua</a></li>
      <li><a href='#toc-3'>Judul heading tiga</a></li>
      <li><a href='#toc-4'>Judul heading empat</a></li>
      <li><a href='#toc-5'>Judul heading lima</a></li>
    </ol>
  </div>
</div>

// Edit tulisan yang ditandai dengan subjudul Anda, kemudian tambahkan id='toc-1' disetiap heading atau tag <h2>, <h3>, <h3> pada artikel Anda. Contoh:

<h3>Judul subheading</h3>
Isi paragraf pada subheading artikel

// Tambahkan id pada heading menjadi seperti dibawah :

<h3 id='toc-1'>Judul subheading</h3>
Isi paragraf pada subheading artikel

You can hide the table of contents at the beginning and only appear after the title of the table of contents is clicked, how to add the checked attribute to the <input> tag as shown below:

<div class='daftar-isi'>
  <input class='isi-input hidden' id='daftar-isi01' type='checkbox' checked>
  <label class='isi-judul' for='daftar-isi01'>Daftar isi</label>
  <div class='isi-content' id='isi-content'>
    <ol>
      <li><a href='#toc-1'>Judul heading satu</a>      
        <ol>
          <li><a href='#toc-1a'>Subheading satu</a></li>
          <li><a href='#toc-2b'>Subheading dua</a></li>
          <li><a href='#toc-3c'>Subheading tiga</a></li>
          <li><a href='#toc-4d'>Subheading empat</a></li>
          <li><a href='#toc-5e'>Subheading lima</a></li>
        </ol>
      </li>
      <li><a href='#toc-2'>Judul heading dua</a></li>
      <li><a href='#toc-3'>Judul heading tiga</a></li>
      <li><a href='#toc-4'>Judul heading empat</a></li>
      <li><a href='#toc-5'>Judul heading lima</a></li>
    </ol>
  </div>
</div>

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_disini'>Tombol</a>

Added a download icon on the button

Download

Writing format:

<a class='button' href='url_anda_disini'><i class='m-icon download'></i>Download</a>

Different styled buttons

Download

Writing format:

<a class='button outline' href='url_anda_disini'><i class='m-icon download'></i>Download</a>

Whatsapp link button

Whatsapp Button

Writing format:

<a class='button whatsapp' href='url_anda_disini'><i class='m-icon whatsapp'></i>Whatsapp Button</a>

Two buttons in a row

Download Demo

Writing format:

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

download button and file information in one container, you can change the file type and file name directly in the marked section

Zip Template-2021.zip Download

Writing format:

<div class='download-info'>
  <span class='file-icon'>Zip</span>
  <span class='file-text'>Template-2021.zip</span>
  <a class='button file-link' href='url_anda_disini' target='_blank' rel='noreferrer noopener'><i class='m-icon download'></i>Download</a>
</div>

Lazy youtube

Useful for loading YouTube videos after scrolling the page so that blog loading is even faster

Its use is very easy:

Copy the youtube video playback code that you want to display
Contoh url video youtube : youtube.com/watch?v=s1tAYmMjLdY
All you need to copy is the code 's1tAYmMjLdY' then paste it on the part that has been marked in this

Writing format:

<div class='lazy-youtube' data-embed='rvrZJ5C_Nwg'>
  <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>

Spoiler or show hide button

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

Spoiler Title:

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.

Writing format:

<div class='spoiler'>
  <input class='spoiler-input hidden' id='spoiler-01' type='checkbox'>
  <div class='spoiler-judul'><b>Spoiler Title:</b: ><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
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.
Second question
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.
Third question
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.

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>

Every time you add a new line, make sure to change the part marked offaccor-menu-1 on each line, adding a new line is not limited to 100 lines.

Note Block

Note:can be used to add important information to readers.

Writing format:

<p class='note'>teks_anda_disini</p>

Important: can be used to add important information to readers.

Writing format:

<p class='note noteAlert'>teks_anda_disini</p>

All Median UI Typography Templates

Compose mode

Additional format that can only be used in HTML mode

Paragraph Break

Blockquote

Table of contents or table of content

Button

Lazy youtube

Spoiler or show hide button

Faq / Accordion Menu

Note Block

Post a Comment

إرسال تعليق

نموذج الاتصال

All Median UI Typography Templates

Compose mode

Additional format that can only be used in HTML mode

Paragraph Break

Blockquote

Table of contents or table of content

Button

Lazy youtube

Spoiler or show hide button

Faq / Accordion Menu

Note Block

You might like

Post a Comment

إرسال تعليق

نموذج الاتصال