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 the <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 and active links are added manually via compose mode.

This paragraph will display the table format in this template 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	Kolkata	10,023,211	5,000,223	2,500,332	2,499,232
2	Mumbai	10,023,211	5,000,223	2,500,332	2,499,232
3	Delhi	10,023,211	5,000,223	2,500,332	2,499,232
4	Chennai	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>City</td>
        <td>Kolkata</td>
      </tr>
      <tr>
        <td>2</td>
        <td>City</td>
        <td>Mumbai</td>
      </tr>
      <tr>
        <td>3</td>
        <td>City</td>
        <td>Delhi</td>
      </tr>
    </tbody>
  </table>
</div>

Additional format that can only be used in HTML mode

Writing Syntax Highlighter manually in post HTML mode

// To use Syntax Highlighter the writing is like this
<pre>
  <code>
    <!-- html code, css ata javascript here -->
  </code>
</pre>

// Additional syntax features you can use when writing code
<i>Comment</i>     = The code in this tag will not automatically be highlighted
<i class='comment'>Comment</i>     = <!-- html, css or javascript code here -->
<i class='tag'>div</i>     = <div>
<span>CSS Property</span>     = main{display: block;position: relative}
<span class='block'>Block Text</span>  = Used to highlight parts that need to be replaced by the 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>Fill_in_the_paragraph</p>

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

Blockquote

Lorem ipsum dolor sit amet, elite adipiscing consectetur. Proin vestibule dignissim silence, et efficitur felis commodo et. Mauris Vel silent 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> // Optionally can be used or deleted
      <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 functions 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

Need help?

Writing format:

<a class='button whatsapp' href='url_anda_disini'><i class='m-icon whatsapp'></i>Butuh Bantuan?</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-calender-2021.zip Download

Writing format:

<div class='download-info'>
  <span class='file-icon'>Zip</span>
  <span class='file-text'>Template-kalender-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
Example of youtube video url: 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 code

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, elite adipiscing consectetur. Proin vestibule dignissim silence, et efficitur felis commodo et. Mauris Vel silent 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>Judul Spoiler</b: ><label aria-label='Spoiler' class='button' for='spoiler-01'></label></div>
  <div class='spoiler-isi'>
    <div>Isi spoiler</div>
  </div>
</div>

Spoiler to hide code or syntax highlighter

Spoiler Title:

Isi kode syntax highlighter

Writing format:

<div class='spoiler'>
  <input class='spoiler-input hidden' id='spoiler-01' type='checkbox'>
  <div class='spoiler-judul'><b>Judul Spoiler</b: ><label aria-label='Spoiler' class='button' for='spoiler-01'></label></div>
  <div class='spoiler-isi'>
    <div>
      <pre><code>Isi kode syntax highlighter</code></pre>
    </div>
  </div>
</div>

Faq / Accordion Menu

Serves to display faq content or questions on a blog, often called the accordion menu

First question
Lorem ipsum dolor sit amet, elite adipiscing consectetur. Proin vestibule dignissim silence, et efficitur felis commodo et. Mauris Vel silent 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

4 comments

Sushant Wadhonkar June 29, 2021 at 8:33 AM

https://thebiosash.blogspot.com/2021/06/what-is-seabuckthorn.html
Md Mijanur Rahaman (MR) July 17, 2021 at 1:43 PM

This comment has been removed by a blog administrator.
Sahil Pathan August 3, 2021 at 5:16 PM

Bro Spoiler or show hide button are not working
Please give me working code
Mohammed Meraj April 23, 2022 at 12:33 AM

Thanks buddy.

To insert a code use <i rel="pre">code_here</i>
To insert a quote use <b rel="quote">your_qoute</b>
To insert a picture use <i rel="image">url_image_here</i>