Join Our Telegram Channel Join Here!
Home
Code
Tutorial

Median UI All Typography's & Writing Formats

So, the Median UI v1.6 blogger theme has been launched greater than one year in the past, however, the documentation has no longer been updated for...

So, the Median UI v1.6 blogger theme has been launched greater than one year in the past, however, the documentation has no longer been updated for v1.6, so I have researched a little bit on it and tried to make documentation on all typography and writing layout of Median UI v1.6

Median-UI-All-Typography's-&-Writing-Formats

Image with Grid Layout

Image Source: Pixabay

Writing Code

<div class="psImg grImg">
  <div class="zmImg">
    <img class="lazy loaded" src="YOUR-IMAGE-LINK-HERE" onclick="return false" lazied="">
  </div>
  <div class="zmImg">
    <img class="lazy loaded" src="YOUR-IMAGE-LINK-HERE" onclick="return false" lazied="">
  </div>
  <div class="zmImg">
    <img class="lazy loaded" src="YOUR-IMAGE-LINK-HERE" onclick="return false" lazied="">
  </div>
  <div class="zmImg">
    <img class="lazy loaded" src="YOUR-IMAGE-LINK-HERE" onclick="return false" lazied="">
  </div>
</div>

YOUR-IMAGE-LINK-HERE - change this with your image link.

Image with Show All Function

Used to hide some images and will be shown when the user clicks the 'Show All' button. Show All function can only be activated once, Images cannot be hidden again when you activate it

Image Source: Pixabay
Construction of New Highway
Langtang Tracking Major Attraction
De Spain Preparations
Boating Experience in Pokhara
Construction of New Highway
Langtang Tracking Major Attraction
De Spain Preparations
Boating Experience in Pokhara

Writing Code

<input class='inImg hidden' id='for-hideImage' type='checkbox'>
<div class="psImg hdImg">
		<img class="lazy" data-src="YOUR-IMAGE-LINK-HERE"/>
		<img class="lazy" data-src="YOUR-IMAGE-LINK-HERE"/>
		<img class="lazy" data-src="YOUR-IMAGE-LINK-HERE"/>
	<div class='btImg'>
		<img class="lazy" data-src="YOUR-IMAGE-LINK-HERE" />
<!--[ Button image to activate ]-->
		<label for='for-hideImage' aria-label='Show all image'>Show All</label>
	</div>

<!--[ Hide the rest image here ]-->
	<div class='psImg shImg'>
		<img class="lazy" data-src="YOUR-IMAGE-LINK-HERE"/>
		<img class="lazy" data-src="YOUR-IMAGE-LINK-HERE"/>
		<img class="lazy" data-src="YOUR-IMAGE-LINK-HERE"/>
		<img class="lazy" data-src="YOUR-IMAGE-LINK-HERE"/>
	</div>
</div>

YOUR-IMAGE-LINK-HERE - change this with your image link.

Image with Scroll Layout

Same as the image layout above, it's just that on the mobile display the images will be arranged in parallel with the additional side scroll function on the mobile display. We also added a smooth scroll effect to this feature. Please try opening this page on your mobile device:

Image Source: Pixabay

Writing Code

<div class='psImg scImg scrlH'>
	<img class="lazy" data-src="YOUR-IMAGE-LINK-HERE"/>
	<img class="lazy" data-src="YOUR-IMAGE-LINK-HERE"/>
	<img class="lazy" data-src="YOUR-IMAGE-LINK-HERE"/>
</div>

YOUR-IMAGE-LINK-HERE - change this with your image link.

Manual Related Post

Related Post:

Writing Code

<div class='pRelate notranslate'>
	<b>Related Post:</b>
	<ul>
		<li><a href='YOUR-POST-LINK'>YOUR-POST-TITLE</a></li>
		<li><a href='YOUR-POST-LINK'>YOUR-POST-TITLE</a></li>
		<li><a href='YOUR-POST-LINK'>YOUR-POST-TITLE</a></li>
	</ul>
</div>

YOUR-POST-LINK - change this with your image link.
YOUR-POST-TITLE - put your post title here.

Paragraph with Drop cap

This is a paragraph with dropcap. Is a large capital letter used as a decorative element at the beginning of a paragraph or section. The size of the descending limit is usually two or more lines.

Writing Code

<p><span class='dropCap'>L</span>orem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Id faucibus nisl tincidunt
eget nullam non. Diam vulputate ut pharetra sit amet
aliquam id. Phasellus vestibulum lorem sed risus. </p>

Blockquote

Live as if you were to die tomorrow. Learn as if you were to live forever.

—Mahatma Gandhi

Another Blockquote Style You Can Use:

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 Code

<!-- Style 1 -->

<blockquote><i>YOUR-QUOTE<br/><br/>
  &#8212;NAME</i></blockquote>

<!-- Style 2 -->

<blockquote class='s-1 notranslate'>
  <div>YOUR-QUOTE 
    <ul>
      <li>LINE</li>
      <li>LINE</li>
    </ul>
  </div>
</blockquote>

Table

No Column_1 Column_2 Column_3 Column_4 Column_5
1 Data_table_1 00.000.000 0.000.000 0.000.000 0.000.000
2 Data_table_2 00.000.000 0.000.000 0.000.000 0.000.000
3 Data_table_3 00.000.000 0.000.000 0.000.000 0.000.000
4 Data_table_4 00.000.000 0.000.000 0.000.000 0.000.000

Writing Code

<div class='table'>
  <table style='white-space: nowrap;'>
    <thead>
      <tr>
        <th>No</th>
        <th>Column_1</th>
        <th>Column_2</th>
        <th>Column_3</th>
        <th>Column_4</th>
        <th>Column_5</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>No</th>
        <th>Column_1</th>
        <th>Column_2</th>
        <th>Column_3</th>
        <th>Column_4</th>
        <th>Column_5</th>
      </tr>
      <tr>
        <th>No</th>
        <th>Column_1</th>
        <th>Column_2</th>
        <th>Column_3</th>
        <th>Column_4</th>
        <th>Column_5</th>
      </tr>
    </tbody>
  </table>
</div>

Syntax Highlighter

<!DOCTYPE html>
<html dir='ltr' lang='en'>
  <head>
    <title>Sample Page</title>
  </head>

  <!--[ <body> open ]-->
  <body>
    <p>Sample content here!</p>
  </body>
  <!--[ </body> close ]-->
</html>

Writing Code

<div class="pre html">
	<pre>
    	Write Code Here [ Wait You Need to Use HTML Encoder ]
	</pre>
</div>

Change highlighted text accroding to your code language.
Encode your HTML code before puting syntaxbox - HTML Encoder

MultiTab Syntax Highlighter 

HTML here
CSS here
JS here

Writing Code

<div class='pre tb'>
	<input class='prei hidden' id='preT-1' type='radio' name='preTab' checked>
	<input class='prei hidden' id='preT-2' type='radio' name='preTab'>
	<input class='prei hidden' id='preT-3' type='radio' name='preTab'>
	<div class='preH tbHd scrlH'>
		<label for='preT-1' data-text='HTML'></label>
		<label for='preT-2' data-text='CSS'></label>
		<label for='preT-3' data-text='JS'></label>
	</div>
	<div class='preC-1'>
		<pre>html here</pre>
	</div>
	<div class='preC-2'>
		<pre>css here</pre>
	</div>
	<div class='preC-3'>
		<pre>JS here</pre>
	</div>
</div>

Show Hide Button

Answer:

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

Writing Code

<details class='sp notranslate'>
  <summary data-show='Show' data-hide='Hide'>Answer:</summary>
  <p>This is your answer</p>
</details>
Accordion First Title

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

Accordion Second Title

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

Accordion Third Title

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

Accordion Fourth Title (alt)

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

Writing Code

<div class='showH'>
  <!--[ Accordion line 1 ]-->
  <details class='ac'>
    <summary>Accordion First Title</summary>
    <div class='aC'>
      <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
    </div>
  </details>
  
  <!--[ Accordion line 2 ]-->
  <details class='ac'>
    <summary>Accordion Second Title</summary>
    <div class='aC'>
      <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
    </div>
  </details> 
  
  <!--[ Accordion line 3 ]-->
  <details class='ac'>
    <summary>Accordion Third Title</summary>
    <div class='aC'>
      <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
    </div>
  </details>
  
  <!--[ Accordion line 4 ]-->
  <details class='ac'>
    <summary>Accordion Fourth Title</summary>
    <div class='aC'>
      <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
    </div>
  </details>
</div>

Note Block

This is a note paragraph.

Warning!
This is a note paragraph with warning status!

Writing Code

<p class='note notranslate'>This is a note paragraph.</p>
<p class='note wr notranslate'><b>Warning!</b><br> This is a note paragraph with warning status!</p>

All Button Style

Standard Button

Writing Code

<a class='button' href='YOUR-LINK-HERE'>Standard_button</a>
Download

Writing Code

<a class='button ln' href='YOUR-LINK-HERE'><i class='icon dl'></i>Download</a>
Download

Writing Code

<a class='button' href='YOUR-LINK-HERE'><i class='icon dl'></i>Download</a>
Demo

Writing Code

<a class='button' href='YOUR-LINK-HERE'><i class='icon demo'></i>Demo</a>
Demo Download

Writing Code

<div class='btnF'>
  <a class='button ln' href='YOUR-LINK-HERE'>Demo</a>
  <a class='button' href='YOUR-LINK-HERE'><i class='icon dl'></i>Download</a>
</div>
Demo Download

Writing Code

<div class='btnF'>
  <a class='button' href='YOUR-LINK-HERE'><i class='icon demo'></i>Demo</a>
  <a class='button' href='YOUR-LINK-HERE'><i class='icon dl'></i>Download</a>
</div>
file_name.zip 200kb

Writing Code

<div class='dlBox'>
  <!--[ Change data-text='...' atribute to add new file type ]-->
  <span class='fT' data-text='zip'></span>
  <div class='fN'>
    <!--[ File name ]-->
    <span>file_name.zip</span>
    <span class='fS'>200kb</span>
  </div>
  
  <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a class='button' aria-label='Download' href='YOUR-LINK-HERE'><i class='icon dl'></i></a>
</div>

Lazy Youtube

Writing Code

<div class='lazyYt' data-embed='YOUR YOUTUBE VIDEO LINK ID'>
  <div class='play'>
    <svg viewbox='0 0 213.7 213.7'><polygon class='t' points='73.5,62.5 148.5,105.8 73.5,149.1'></polygon><circle class='c' cx='106.8' cy='106.8' r='103.3'></circle></svg>
  </div>
</div>
Content Creator, Graphic Designer, Front-end Developer
Bookmark This Blogger: Blog Brackets
#Code #Tutorial

2 comments

  1. Hi Sir

    Double click to copy is not showing up in Syntax Highlighter
  2. How to enable post with full page feature
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.