Median UI 1.7 All UI Component and Typhography

Median UI 1.7 Premium Blogger Template Docs All UI Component and Typhography

Cara membuat halaman sitemap seo di blogger

All UI median ui 1.7 components are here, good luck!

Image with Caption

Caption is a short description that accompanies the illustration. Captions are in the form of additional information which is usually located under the image or photo.

<table class='tr-caption-container'>
  <tbody>
    <tr>
      <td>
        <img class='lazy full' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      </td>
    </tr>
    <tr>
      <td class='tr-caption'>Text_here</td>
    </tr>
  </tbody>
</table>

Lightbox Image

<div class='lightBox'>
  <details>
    <summary class='n'><span class='c flex center'></span></summary>
  </details>
  <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
</div>

Grid Images

<div class='psImg grImg'>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
</div>

Scroll Images

<div class='psImg scImg scrlH'>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
</div>

Show/Hide Images

Show all

<input class='inImg hidden' id='for-hideImage' type='checkbox'>
<div class='psImg hdImg'>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  <div>
    <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
    <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
  </div>
  
  <div class='btImg'>
    <div>
      <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
    </div>
    
    <!--[ Button image to activate ]-->
    <label for='for-hideImage'>Show all</label>
  </div>

  <!--[ Hide the rest image here ]-->
  <div class='psImg shImg'>
    <div>
      <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
    </div>
    <div>
      <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
    </div>
    <div>
      <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
    </div>
    <div>
      <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
      <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
    </div>
  </div>
</div>

Lazyload Image

<div class='separator'>
  <img class='lazy' alt='image_title' data-src='https://blogger.googleusercontent.com/img/.../image.png' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='/>
  <noscript><img alt='image_title' src='https://blogger.googleusercontent.com/img/.../image.png'/></noscript>
</div>

Post Break

<hr>
<hr class='dot'>
<hr class='line'>

Text Ident & Drop cap

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod vitae odio id convallis. Vestibulum sem mi, euismod vitae euismod ut, lacinia nec nulla.

/* Text Indent */
<p class='pIndent'>text_paragraph</p>

/* Drop  Cap */
<p><span class='dropCap'>T</span>ext_paragraph</p>

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod vitae odio id convallis. Vestibulum sem mi, euismod vitae euismod ut, lacinia nec nulla.

<blockquote>text_paragraph</blockquote>

/* Style Alternatif */
<blockquote class='s-1'>text_paragraph</blockquote>

Note Block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod vitae odio id convallis. Vestibulum sem mi, euismod vitae euismod ut, lacinia nec nulla.

/* Note Default */
<p class='note'>text_paragraph</p>

/* Note Warning */
<p class='note wr'>text_paragraph</p>

Guide List

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod vitae odio id convallis. Vestibulum sem mi, euismod vitae euismod ut, lacinia nec nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod vitae odio id convallis. Vestibulum sem mi, euismod vitae euismod ut, lacinia nec nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod vitae odio id convallis. Vestibulum sem mi, euismod vitae euismod ut, lacinia nec nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod vitae odio id convallis. Vestibulum sem mi, euismod vitae euismod ut, lacinia nec nulla.

<ol class='step noList'>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
</ol>

Pros/Cons List

pros:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod vitae odio id convallis. Vestibulum sem mi, euismod vitae euismod ut, lacinia nec nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod vitae odio id convallis. Vestibulum sem mi, euismod vitae euismod ut, lacinia nec nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod vitae odio id convallis. Vestibulum sem mi, euismod vitae euismod ut, lacinia nec nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod vitae odio id convallis. Vestibulum sem mi, euismod vitae euismod ut, lacinia nec nulla.

cons:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod vitae odio id convallis. Vestibulum sem mi, euismod vitae euismod ut, lacinia nec nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod vitae odio id convallis. Vestibulum sem mi, euismod vitae euismod ut, lacinia nec nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod vitae odio id convallis. Vestibulum sem mi, euismod vitae euismod ut, lacinia nec nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod vitae odio id convallis. Vestibulum sem mi, euismod vitae euismod ut, lacinia nec nulla.

<b>pros:</b>
<ol class='pros noList'>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
</ol>

/* Style Alternatif */
<b>cons:</b>
<ol class='pros noList'>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
  <li>text_paragraph</li>
</ol>

Tables

title_1	title_2	title_3	title_4	title_5	tille_6
content_here	content_here	content_here	content_here	content_here	content_here
content_here	content_here	content_here	content_here	content_here	content_here

<div class='table noWrap w100'>
  <table>
    <thead>
      <tr>
        <th>title_1</th>
        <th>title_2</th>
        <th>title_3</th>
        <th>title_4</th>
        <th>title_5</th>
        <th>tille_6</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
      </tr>
      <tr>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
        <td>content_here</td>
      </tr>
    </tbody>
  </table>
</div>

Tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod vitae odio id convallis. Vestibulum sem mi, euismod vitae euismod ut, lacinia nec nulla.

Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod vitae odio id convallis. Vestibulum sem mi, euismod vitae euismod ut, lacinia nec nulla.

<!--[ Active function ]-->
<input class='tbIn hidden' id='fTabs-1' type='radio' name='postTabs' checked>
<input class='tbIn hidden' id='fTabs-2' type='radio' name='postTabs'>
<input class='tbIn hidden' id='fTabs-3' type='radio' name='postTabs'>
<input class='tbIn hidden' id='fTabs-4' type='radio' name='postTabs'>

<!--[ Tabs header/title ]-->
<div class='tbHd scrlH'>
  <!--[ Change atribute data-text='...' to replace tabs title ]-->
  <label for='fTabs-1' data-text='Chapter 1'></label>
  <label for='fTabs-2' data-text='Chapter 2'></label>
  <label for='fTabs-3' data-text='Chapter 3'></label>
  <label for='fTabs-3' data-text='Chapter 4'></label>
</div>

<div class='tbCn'>
  <!--[ Tabs content ]-->
  <div class='tbText-1'>
    content_here
  </div>
  
  <!--[ Tabs content ]-->
  <div class='tbText-2'>
    content_here
  </div>
  
  <!--[ Tabs content ]-->
  <div class='tbText-3'>
    content_here
  </div>
  
  <!--[ Tabs content ]-->
  <div class='tbText-4'>
    content_here
  </div>
</div>

Contents

heading_1
heading_2
heading_3

<details class='sp toc' open=''>
  <summary>Contents</summary>
  <div class='toC'>
    <ol>
      <li><a href='#your_url'>heading_1</a></li>
      <li><a href='#your_url'>heading_2</a></li>
      <li>
        <a href='#your_url'>heading_3</a>
        <ol>
          <li><a href='#your_url'>subheading_3</a></li>
          <li><a href='#your_url'>subheading_3</a></li>
          <li><a href='#your_url'>subheading_3</a></li>
          <li><a href='#your_url'>subheading_3</a></li>
        </ol>
      </li>
    </ol>
  </div>
</details>

Togles Show/Hide

Spoiler

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod vitae odio id convallis. Vestibulum sem mi, euismod vitae euismod ut, lacinia nec nulla.

<details class='sp notranslate'>
  <summary>Spoiler</summary>
  <p>text_paragraph</p>
</details>

Accordions

accordion_title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod vitae odio id convallis. Vestibulum sem mi, euismod vitae euismod ut, lacinia nec nulla.

accordion_title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod vitae odio id convallis. Vestibulum sem mi, euismod vitae euismod ut, lacinia nec nulla.

accordion_title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod vitae odio id convallis. Vestibulum sem mi, euismod vitae euismod ut, lacinia nec nulla.

accordion_title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod vitae odio id convallis. Vestibulum sem mi, euismod vitae euismod ut, lacinia nec nulla.

<!--[ Accordion start ]-->
<div class='showH'>
  <!--[ line 1 ]-->
  <details class='ac alt'>
    <summary>accordion_title</summary>
    <div class='aC'>
      <p>text_paragraph</p>
    </div>
  </details>
  
  <!--[ line 2 ]-->
  <details class='ac alt'>
    <summary>accordion_title</summary>
    <div class='aC'>
      <p>text_paragraph</p>
    </div>
  </details>
  
  <!--[ line 3 ]-->
  <details class='ac alt'>
    <summary>accordion_title</summary>
    <div class='aC'>
      <p>text_paragraph</p>
    </div>
  </details>
  
  <!--[ line 4 ]-->
  <details class='ac alt'>
    <summary>accordion_title</summary>
    <div class='aC'>
      <p>text_paragraph</p>
    </div>
  </details>
</div>

Syntax Highlighter

code_here

<!--[ Change classname to html, css, or js ]-->
<div class='pre'>
  <pre>code_here</pre>
</div>

Multitabs Syntax

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

/* Standar CSS */
::selection{color:#fff;background:var(--linkC)}
*, ::after, ::before{-webkit-box-sizing:border-box;box-sizing:border-box}
h1, h2, h3, h4, h5, h6{margin:0;font-weight:700;font-family:var(--fontH);color:var(--headC)}
h1{font-size:1.9rem}
h2{font-size:1.7rem}
h3{font-size:1.5rem}
h4{font-size:1.4rem}
h5{font-size:1.3rem}
h6{font-size:1.2rem}
a{color:var(--linkC);text-decoration:none}
a:hover{opacity:.9;transition:opacity .1s}

{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "url": "https://median-ui.jagodesain.com/",
  "name": "Median UI",
  "alternateName": "Median UI",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://median-ui.jagodesain.com/search?q={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}

<div class='pre tb'>
  <!--[ Active function ]-->
  <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'>
  <!--[ Header/title ]-->
  <div class='preH tbHd scrlH'>
    <!--[ Change atribute data-text='...' to replace title ]-->
    <label for='preT-1' data-text='HTML'></label>
    <label for='preT-2' data-text='CSS'></label>
    <label for='preT-3' data-text='Javascript'></label>
  </div>

  <!--[ Content ]-->
  <div class='preC-1'>
    <pre>code_here</pre>
  </div>
  <div class='preC-2'>
    <pre>code_here</pre>
  </div>
  <div class='preC-3'>
    <pre>code_here</pre>
  </div>
</div>

Links

1. New link:
Get the latest version

2. Free! link:
Download here

3. Eksternal link:
Buy Now

<a class='new' href='your_url'>link_name</a>

<a class='free' href='your_url'>link_name</a>

<a class='extL' href='your_url'>link_name</a>

Download Card

file_name.zip 200kb

Style alternative:

file_name.zip 200kb

The link above is just sample, it will not go to any page when clicked.

<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_url'>
    <svg class='line' viewBox='0 0 24 24' stroke-miterlimit='10'><path d='M9.31995 11.6799L11.8799 14.2399L14.4399 11.6799'/><path d='M11.88 4V14.17'/><path d='M20 12.1799C20 16.5999 17 20.1799 12 20.1799C7 20.1799 4 16.5999 4 12.1799'/></svg>
  </a>
</div>

/* Style Alternative */
<div class='dlBox'>
  <!--[ Change data-text='...' atribute to add new file type ]-->
  <span class='fT lazy' data-text='zip' data-style='background-image: url(https://blogger.googleusercontent.com/img/.../image.png)'></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_url'>
    <svg class='line' viewBox='0 0 24 24' stroke-miterlimit='10'><path d='M9.31995 11.6799L11.8799 14.2399L14.4399 11.6799'/><path d='M11.88 4V14.17'/><path d='M20 12.1799C20 16.5999 17 20.1799 12 20.1799C7 20.1799 4 16.5999 4 12.1799'/></svg>
  </a>
</div>

Button

1. Default Button:

Button

2. Outline Style

Button

3. Without Background

Button

4. With icon SVG

Button

5. Two button in one row:

Info Download

<a class='button' href='your_url'>Button</a>

<a class='button ln' href='your_url'>Button</a>

<a class='button sc' href='your_url'>Button</a>

<a class='button' href='your_url'>
  <svg class='line' viewBox='0 0 24 24' stroke-miterlimit='10'><path d='M9.31995 11.6799L11.8799 14.2399L14.4399 11.6799'/><path d='M11.88 4V14.17'/><path d='M20 12.1799C20 16.5999 17 20.1799 12 20.1799C7 20.1799 4 16.5999 4 12.1799'/></svg>
  <span>Button</span>
</a>

<div class='btnF'>
  <a class='button ln' href='your_url'>
    <span>Info</span>
  </a>
  <a class='button' href='your_url'>
    <svg class='line' viewBox='0 0 24 24' stroke-miterlimit='10'><path d='M9.31995 11.6799L11.8799 14.2399L14.4399 11.6799'/><path d='M11.88 4V14.17'/><path d='M20 12.1799C20 16.5999 17 20.1799 12 20.1799C7 20.1799 4 16.5999 4 12.1799'/></svg>
    <span>Download</span>
  </a>
</div>

Lazy YouTube

Youtube videos will load after the user use scroll page

Defer youtube video <iframe> with defer.js function (alternative)

Replace Youtube_videoID with you preferred YouTube ID

Video ID can be found on Youtube ID, e.g.
www.youtube.com/embed/fEWNA6tFhYQ

<div class='lazyYt' data-embed='Youtube_videoID' style='z-index: 1;'>
  <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>

<!--[ Defer iframe ]-->
<div class='videoYt'>
  <iframe title='Lazy video iframe' class='lazy' data-src='//www.youtube.com/embed/Youtube_videoID' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>
</div>

Post Referensi

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod vitae odio id convallis. Vestibulum sem mi, euismod vitae euismod ut, lacinia nec nulla. Suspendisse tempor ac dui ut fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla metus sapien, ultrices a erat at, eleifend congue dolor. Nam id diam ac mi placerat blandit id auctor elit.

Source:
google.com and trust me:v

With multiple reference:

1. Google.com
2. Yahoo.com
3. Yandex.com
4. Baidu.com
5. Wikipedia.com

<p class='pRef'>post_reference</p>

// or

<div class='pRef'>post_reference</div>

wak.my.id

Median UI 1.7 All UI Component and Typhography

Image with Caption

Lightbox Image

Grid Images

Scroll Images

Show/Hide Images

Lazyload Image

Related Post [Manual]

Post Break

Text Ident & Drop cap

Blockquote

Note Block

Guide List

Pros/Cons List

Tables

Tabs

Table of Contents

Togles Show/Hide

Accordions

Syntax Highlighter

Multitabs Syntax

Links

Download Card

Button

Lazy YouTube

Post Referensi

Cara Membuat Halaman Sitemap SEO di Blogger

Safelink Converter

Median UI 1.7 All UI Component and Typhography

Image with Caption

Lightbox Image

Grid Images

Scroll Images

Show/Hide Images

Lazyload Image

Related Post [Manual]

Post Break

Text Ident & Drop cap

Blockquote

Note Block

Guide List

Pros/Cons List

Tables

Tabs

Table of Contents

Togles Show/Hide

Accordions

Syntax Highlighter

Multitabs Syntax

Links

Download Card

Button

Lazy YouTube

Post Referensi

1 komentar

Safelink Converter