All Median UI Typography Templates

Sinan Tektaş
All Median UI Typography Templates
Source: jagodesain.com

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
  1. First list
  2. Second list
  3. Third list
  4. 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

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.

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.

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

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

Youtube video

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

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

Yorumlar
Uyarı:
1.Yorum yaparken saygı çerçevesin'den çıkmayın
2.Küfür Hakaret Siyasi propaganda içerikli yorum yapmak yasaktır.
3. Her ne şekilde olursa olsun, özel iletişim bilgilerinizi paylaşmayın, fark edildiğinde kesinlikte silinecektir.