Subscribe Youtube Channel Muxic 0.9 ♪ Contact Us Subscribe!

Blogger UI All Typography's & Writing Formats

Master Blogger's UI Typography & Writing Formats for eye-catching blogs! Learn to enhance readability & engage your audience effectively. Click now!
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Typography's & Writing

Image with Grid Layout

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

Image with Scroll Layout

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

Torem 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><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>
YOUR-QUOTE

—Abdullah
YOUR-QUOTE
  • abdullahdcurz.blogspot.com
  • abdullahdcurz.blogspot.com
<!-- 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>
No Column_1 Column_2 Column_3 Column_4 Column_5
No Column_1 Column_2 Column_3 Column_4 Column_5
No Column_1 Column_2 Column_3 Column_4 Column_5
<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>
<div class="pre html">
	<pre>
    	Write Code Here [ Wait You Need to Use HTML Encoder ]
	</pre>
</div>
html here
css here
JS here
<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:

This is your answer

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

Accordion / Toggle Menu

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

<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

Title_link
<a class='button ln' href='url_is_here'>Title_link</a>
<a class='button' href='url_is_here'><i class='icon dl'></i>Title_link</a>
<a class='button' href='url_is_here'><i class='icon demo'></i>Title_link</a>
<a class='button' href='url_is_here'>
  <svg viewBox='0 0 64 64' style='fill:#fff; margin-right:12px;'><path d='M6.9,48.4c-0.4,1.5-0.8,3.3-1.3,5.2c-0.7,2.9,1.9,5.6,4.8,4.8l5.1-1.3c1.7-0.4,3.5-0.2,5.1,0.5 c4.7,2.1,10,3,15.6,2.1c12.3-1.9,22-11.9,23.5-24.2C62,17.3,46.7,2,28.5,4.2C16.2,5.7,6.2,15.5,4.3,27.8c-0.8,5.6,0,10.9,2.1,15.6 C7.1,44.9,7.3,46.7,6.9,48.4z M21.3,19.8c0.6-0.5,1.4-0.9,1.8-0.9s2.3-0.2,2.9,1.2c0.6,1.4,2,4.7,2.1,5.1c0.2,0.3,0.3,0.7,0.1,1.2 c-0.2,0.5-0.3,0.7-0.7,1.1c-0.3,0.4-0.7,0.9-1,1.2c-0.3,0.3-0.7,0.7-0.3,1.4c0.4,0.7,1.8,2.9,3.8,4.7c2.6,2.3,4.9,3,5.5,3.4 c0.7,0.3,1.1,0.3,1.5-0.2c0.4-0.5,1.7-2,2.2-2.7c0.5-0.7,0.9-0.6,1.6-0.3c0.6,0.2,4,1.9,4.7,2.2c0.7,0.3,1.1,0.5,1.3,0.8 c0.2,0.3,0.2,1.7-0.4,3.2c-0.6,1.6-2.1,3.1-3.2,3.5c-1.3,0.5-2.8,0.7-9.3-1.9c-7-2.8-11.8-9.8-12.1-10.3c-0.3-0.5-2.8-3.7-2.8-7.1 C18.9,22.1,20.7,20.4,21.3,19.8z'/></svg>
  <span>WhatsApp me!</span>
</a>
<a class='button' href='url_is_here'>
  <svg class='line' viewBox='0 0 24 24' style='stroke:#fff; margin-right:12px;'><g transform='translate(2.000000, 2.500000)'><path d='M0.7501,0.7499 L2.8301,1.1099 L3.7931,12.5829 C3.8701,13.5199 4.6531,14.2389 5.5931,14.2359094 L16.5021,14.2359094 C17.3991,14.2379 18.1601,13.5779 18.2871,12.6899 L19.2361,6.1319 C19.3421,5.3989 18.8331,4.7189 18.1011,4.6129 C18.0371,4.6039 3.1641,4.5989 3.1641,4.5989'></path><line x1='12.1251' y1='8.2948' x2='14.8981' y2='8.2948'></line><path d='M5.1544,17.7025 C5.4554,17.7025 5.6984,17.9465 5.6984,18.2465 C5.6984,18.5475 5.4554,18.7915 5.1544,18.7915 C4.8534,18.7915 4.6104,18.5475 4.6104,18.2465 C4.6104,17.9465 4.8534,17.7025 5.1544,17.7025 Z'></path><path d='M16.4347,17.7025 C16.7357,17.7025 16.9797,17.9465 16.9797,18.2465 C16.9797,18.5475 16.7357,18.7915 16.4347,18.7915 C16.1337,18.7915 15.8907,18.5475 15.8907,18.2465 C15.8907,17.9465 16.1337,17.7025 16.4347,17.7025 Z'></path></g></svg>
  <span>Buy now!</span>
</a>
about_me.png 10kb
<div class='dlBox'>
  <!--[ Change data-text='...' atribute to add new file type ]-->
  <span class='fT lazy' data-text='zip' data-style='background-image: url(//3.bp.blogspot.com/.../title.png)'></span>
  <div class='fN'>
    <!--[ File name ]-->
    <span>about_me.png</span>
    <span class='fS'>10kb</span>
  </div>
  
  <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a class='button' aria-label='Download' href='url_is_here' rel='noreferrer' target='_blank'><i class='icon dl'></i></a>
</div>
With Image:
Music_Wallpaper.png Music 3.05MB 1920×1080 .png
<div class='dldCo' id='download1'>
  <div class='dldBx'>
    <div class='dldTp'>
      <div class='dldIm' data-text='.png' style='background-image:url(image_url_here)'>
        <svg class='dldSv' viewBox='0 0 34 34'>
          <circle class='b' cx='17' cy='17' r='15.92' />
          <circle class='c dldPg' cx='17' cy='17' r='15.92' />
        </svg>
      </div>
      <div class='dldIn'>
        <span data-text='Name'>Music_Wallpaper.png</span>
        <span data-text='Category'>Music</span>
        <span data-text='Size'>3.05MB</span>
        <span data-text='Resolution'>1920×1080</span>
        <span data-text='Extension'>.png</span>
      </div>
    </div>
    <button onclick='download("#", "10", "false", "#download1")' class='dldBt dldDl'><svg class='line' viewBox='0 0 24 24'><polyline points='8 17 12 21 16 17'/><line x1='12' x2='12' y1='12' y2='21'/><path d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29'/></svg></button>
    <button class='dldBt dldRt'><svg class='line' viewBox='0 0 24 24'><polyline points='23 4 23 10 17 10'/><path d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/></svg></button>
  </div>
  <div class='dldSl'>
    <div class='dldMe'></div>
  </div>
</div>
<a class='button' href='YOUR-LINK-HERE'>Standard_button</a>
<a class='button ln' href='YOUR-LINK-HERE'><i class='icon dl'></i>Download</a>
<a class='button' href='YOUR-LINK-HERE'><i class='icon dl'></i>Download</a>
<a class='button' href='YOUR-LINK-HERE'><i class='icon demo'></i>Demo</a>
<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>
<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
<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

<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>
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.
<blockquote class='pu_blq' data-author='Anonymous'>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.</blockquote>

Semi Automatic Table of Content

Table of Contents
<details class='sp toc'>
  <summary data-show='Show all' data-hide='Hide all'>Table of Contents</summary>  
  <div class='toC' id='autoToc'></div>
</details>
Toggle Show / Hide
Spoiler:

Your_text_is_here.

<details class='sp'>
  <summary data-show='Show all' data-hide='Hide all'>Spoiler:</summary>
  <p>Your_text_is_here.</p>
</details>
Title_is_here

Your_text_is_here.

Title_is_here
<!--[ Accordion start ]-->
<div class='showH'>
  <!--[ Accordion line 1 ]-->
  <details class='ac'>
    <summary>Title_is_here</summary>
    <div class='aC'>
      <p>Your_text_is_here.</p>
    </div>
  </details>
  
  <!--[ Accordion line 2 ]-->
  <details class='ac alt'>
    <summary>Title_is_here</summary>
    <div class='aC'>
      <p>Your_text_is_here.</p>
    </div>
  </details>
</div>

External Link

Notifies users if the link will lead to another site.
<a class='extL' href='#' rel='noreferrer' target='_blank'>Sample_external_link</a>
<a class='extL alt' href='#' rel='noreferrer' target='_blank'>Sample_link_alt</a>
Music Player
<div id='musicPlayer'></div>
<script>
  /*<![CDATA[*/
  /* Music Player Tracks */
  var playerTracks = [{
      name: "Track_title_here",
      artist: "Artist_names_here",
      cover: "https://raw.githubusercontent.com/.../name.jpg",
      source: "https://raw.githubusercontent.com/.../name.mp3"
    },
    {
      name: "Track_title_here",
      artist: "Artist_names_here",
      cover: "https://raw.githubusercontent.com/.../name.jpg",
      source: "https://raw.githubusercontent.com/.../name.mp3"
    },
    {
      name: "Track_title_here",
      artist: "Artist_names_here",
      cover: "https://raw.githubusercontent.com/.../name.jpg",
      source: "https://raw.githubusercontent.com/.../name.mp3"
    },
    {
      name: "Track_title_here",
      artist: "Artist_names_here",
      cover: "https://raw.githubusercontent.com/.../name.jpg",
      source: "https://raw.githubusercontent.com/.../name.mp3"
    }
  ];
  /*]]>*/
</script>

About the Author

Welcome to my Site! Hi, this is Mr.Abdullah. If you have any questions related to this blog you can find us here on Instagram @abdullahdcurz Or, you can mail us here: abdullahdcurz@mail.com. Thank you.

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
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.