Impact-Site-Verification: a8ed678e-d1d6-49a4-afeb-fc2a319a2ea3 Median UI All Typography Template Features: Median UI All Features - Xady Tech - Business, Technology, Startups, Etc
Home
Blogger
Template

Median UI All Typography Template Features: Median UI All Features

This is the standard layout of Blogger posts in compose mode and all the features included in this mode.

Median UI All Typography Template Features: Median UI All Features
Median UI All Typography Template Features: Median UI All Features

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, blockquote, 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 composing mode.

This paragraph will show the table format in this template along with other formats such as blockquote or HTML code input 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 the above table is in html mode, the 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>

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

HTML 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

This is a feature commonly found on Wikipedia that makes it easy for users to locate the main points or content of the post.

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

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


Writing format:
<a class='button' href='url_anda_disini'>Tombol</a>
Added a download icon on the button:


HTML format:
<a class='button outline' href='url_anda_disini'><i class='m-icon download'></i>Download</a>
Whatsapp link button

Writing format:
<a class='button whatsapp' href='url_anda_disini'><i class='m-icon whatsapp'></i>Butuh Bantuan?</a>
Two buttons in a row

HTML 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

HTML 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

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

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

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.

HTML 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 of factor-menu-1 on each line, adding a new line is not limited to 100 lines

Hjdh.in is a Professional Technology Platform. Here we will provide you only interesting content, which you will like very much. We're dedicated to providing you the best of Technology, with a fo…

Post a Comment

Please Don't Publish Spam Here Every Comment will Review Our Team.