no fucking license

All Typography And Writing Formats For Median Ui

Below given codes for typography can be used in Writedroid website and median Ui template

Image with grid layout Image_Alt_Here
<!--[ Grid Image ]-->
<div class='gridImage'>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  <img alt='Image_Alt_Here' src='image_src.png'/>
  <img alt='Image_Alt_Here' src='image_src.png'/>

Lazyload image

You can use this code if you want delay loading speed of uploaded image so that the blog's pagespeed is higher

<img class='lazy' alt='Image_Alt_Here' data-src='image_src.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>

Manual related post

<div class="postRelated">
  <!--[ Related title ]-->
  <b>Read also :</b>

    <li><a href="Link_here">How to add presenantion frame in your website</a></li>
    <li><a href="Link_here">How to add material desing box in website</a></li>
<li><a href="Link_here">How to add click ripple effect in website</a></li>
</ul> </div>

To use this code just replace your link with Link_here with your link and replace the titles with that title which you want to use.

Post break

<i class='seperate'></i>

Paragraph with text indent

<p class='textIndent'>YOUR_TEXT_HERE</p>

This above given code for seperating and paragraph with text indent may work only in old version of median ui, Imagz and fletrp pro.

Paragraph with drop cap

Hi there, Welcome to Writedroid. Please share our website with your family members and reltaives. With your support we can elliminate all problems.

<p class='dropCap'>Y</span>YOUR_TEXT_HERE</p>


Hi there, Welcome to Writedroid. Please share our website with your family members and reltaives. With your support we can elliminate all problems.
<blockquote class='style-1'>Your_text_here</blockquote>

Just replace your text with Your_text_here to use this code or Blackquote. Second one code for Blackquote is not working on median ui v1.6.


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
<div class='table'>

Syntax highlighter

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

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

Tags to add color

<i class='comment'>...</i>      = Grey
<i class='tag'>...</i>          = Red
<i class='blue'>...</i>         = Blue
<span>...</span>                = Green
<span class='block'>...</span>  = Block Blue

To write HTML, CSS or JAVA code in post

<pre class='html'><code>Your_code_here</code></pre>

Writing Syntax for CSS

<pre class='css'><code>Your_CSS_code_here</code></pre>

Writing Syntax for JAVA

<pre class='js'><code>Your_JS_code_here</code></pre>

Writing Syntax for Link

<pre class='link'><code>Your_link_here</code></pre>

Writing Syntax to deactivate scrolling function

<pre><code style='white-space:pre-wrap'>Your_JS_code_here</code></pre>

Show hide button



<div class='spoiler'>
  <input class='spoilerInput hidden' id='spoiler-01' type='checkbox' />
  <div class='spoilerTitle'>
    <!--[ Show/hide Title ]-->
    <b>Spoiler: </b>
    <label for='spoiler-01'></label>
  <!--[ Show/hide content ]-->
  <div class='spoilerContent'>

Note block


<p class='note'>Yout_text_here</p>


<p class='note wr notranslate'>Yout_text_here</p>


Standard button

<a class="button" href="#">Standard_button</a>

Download button

<a class="button In" href="#"><i class="icon dl"></i>Download</a>

Demo button

<a class='button' href='#'><i class='icon demo'></i>Demo</a>

Two button in one bar

<div class='btnF'>
  <a class='button ln' href='#'>Demo</a>
  <a class='button' href='#'><i class='icon dl'></i>Download</a>

Download button with file size and name 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 class='fS'>200kb</span>
  <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a class='button' aria-label='Download' href='#'><i class='icon dl'></i></a>

Just replace the link with # to add link in buttons.

[ Source Code by Jagodesian ]

Below is the additional code which is added manually by Writedroid. If you want to use this below codes then visit Flamingo tezh.

Material box

You can use material designs box mainly for lable/to display your products/to write description and etc.

Get codes

Click on above button to get codes of material design box.

Custom pink list

  1. Your_text_here
  2. Your_text_here
  3. Your_text_here
  4. Your_text_here
  5. Your_text_here
  6. <ol class="style1">
    /* Custom List Numbering*/
    ol.style1 {
    ol.style1 > li {
    ol.style1 > li img {
    margin:15px 0;
    ol.style1 > li #box-download img {
    ol.style1 > li::before {
    content: counter(numbers);
    line-height: 23px;
    font-family: 'Noto Sans',sans-serif;
    font-size: 14px;
    font-weight: 700;
    left: -45px;
    width: 32px;
    height: 32px;
    text-align: center;
    position: absolute;
    color: #9c27b0;
    border: 5px solid rgba(116,103,251,.17);
    border-radius: 50px;
    top: -2px;
    ol.standard li, ol.style2 li, ol.style0 li, ol.style1 li ul li {
    ol.style1 li ul {
    .dark-mode ol.style1 > li::before {
    color:rgb(80, 103, 197);
    border-color:rgba(57, 60, 155, 0.3);

More codes for typography has been coming soon

[ Source Code by Flamingo tezh ]

Post a Comment

Post a Comment