Oops! We'll be back soon!
We are sorry for the inconvenience
This page is now under maintenance. Estimated remaining on :
Yeah! Maintenance has Done!
Thanks for your patient! Please enjoy back this Blog.
You'll be redirected automatically. If don't please click Here.
00 Days
00 Hours
00 Minutes
00 Seconds

Template Median UI 1.6 - Jago Design

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='toContent'></div>
</details>

Download Button

Sample_external_link
Standard_button
Download
Download Demo 
<a class='extL' href='javascript:;'>Sample_external_link</a>
<a class='button' href='javascript:;'>Standard_button</a>
<a class='button ln' href='javascript:;'><i class='icon dl'></i>Download</a>
<a class='button' href='javascript:;'><i class='icon dl'></i>Download</a>
<a class='button' href='javascript:;'><i class='icon demo'></i>Demo</a>

Button Satu Baris

Demo Download 

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

Box Download

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 aria-label="Download" class="button fileLink" href="#"><i class="icon dl"></i></a>
</div>
file_name.zip 200kb
ini link bukan didalam a

Lazy YT

Youtube video

alternatif lain untuk menunda pemuatan iframe dengan fungsi defer

Lazy YT Normal

<div class='lazyYt' data-embed='mNOdyNNRSrM'>
  <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>

Lazy YT Defer

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

Post Note

Yout_text_here

Yout_text_here

Yout_text_here

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

Syntax

Your_code_here
Your_CSS_code_here
Your_JS_code_here
Your_JS_code_here

Penulisan

<div class="pre html"><pre>Your_code_here</pre></div>
<div class="pre css"><pre>Your_CSS_code_here</pre></div>
<div class="pre js"><pre>Your_JS_code_here</pre></div>
<div class="pre wrap;"><pre>Your_JS_code_here</pre></div>

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 
<div class='table'>
  <table>
    <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>
        <td>1</td>
        <td>Data_table_1</td>
        <td>00.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Data_table_2</td>
        <td>00.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Data_table_3</td>
        <td>00.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Data_table_4</td>
        <td>00.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
        <td>0.000.000</td>
      </tr>
    </tbody>
  </table>
</div>

Accordion / Toggle Menu

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.

Penulisan Accordion

<!--[ Accordion start ]-->
<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 alt'>
    <summary>Accordion_fourth_title (alt)</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>

Spoiler Button

Spoiler:

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

<details class='sp notranslate'>
  <summary data-show='Show all' data-hide='Hide all'>Spoiler:</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

MultiTabs 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>
/* 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}
JS here
<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='JS'></label>
  </div>

  <!--[ Content ]-->
  <div class='preC-1'>
    <pre><i class='gray'>&lt;!DOCTYPE html&gt;</i>
&lt;<i class='red'>html</i> dir='<i class='blue'>ltr</i>' lang='<i class='blue'>en</i>'&gt;
  &lt;<i class='red'>head</i>&gt;
    &lt;<i class='red'>title</i>&gt;<i class='block'>Sample Page</i>&lt;/<i class='red'>title</i>&gt;
  &lt;/<i class='red'>head</i>&gt;

  <i class='gray'>&lt;!--[ &lt;body&gt; open ]--&gt;</i>
  &lt;<i class='red'>body</i>&gt;
    &lt;<i class='red'>p</i>&gt;<i class='green'>Sample content here!</i>&lt;/<i class='red'>p</i>&gt;
  &lt;/<i class='red'>body</i>&gt;
  <i class='gray'>&lt;!--[ &lt;/body&gt; close ]--&gt;</i>
&lt;/<i class='red'>html</i>&gt;</pre>
  </div>
  
  <div class='preC-2'>
    <pre><i class='gray'>/* Standar CSS */</i>
::selection{color:#fff;background:var(--linkC)}
<i class='red'>*</i>, ::after, ::before{-webkit-box-sizing:border-box;box-sizing:border-box}
<i class='red'>h1</i>, <i class='red'>h2</i>, <i class='red'>h3</i>, <i class='red'>h4</i>, <i class='red'>h5</i>, <i class='red'>h6</i>{margin:0;font-weight:700;font-family:var(--fontH);color:var(--headC)}
<i class='red'>h1</i>{font-size:1.9rem}
<i class='red'>h2</i>{font-size:1.7rem}
<i class='red'>h3</i>{font-size:1.5rem}
<i class='red'>h4</i>{font-size:1.4rem}
<i class='red'>h5</i>{font-size:1.3rem}
<i class='red'>h6</i>{font-size:1.2rem}
<i class='red'>a</i>{color:var(--linkC);text-decoration:none}
<i class='red'>a</i>:hover{opacity:.9;transition:opacity .1s}</pre>
  </div>
  
  <div class='preC-3'>
    <pre>JS here</pre>
  </div>
</div>

Image with Grid Layout

Construction of New Highway
Langtang Tracking Major Attraction
De Spain Preparations
Boating Experience in Pokhara
<h2>Image with Grid Layout</h2>
<!--[ Grid Image ]-->
<div class='psImg grImg'>
  <img alt="Construction of New Highway" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhxuZ97YNIqqFr6lCXwWKunPmRfp8XCYa1olN5YOXT-vbzKdEBsALGaoWy3mqDnt2POvBP0zkIvPogRU-pC6f-Egmpu_p2xj3ofWCxTm8TMxaxzAAGclaIvRuufR8XsOFrwp5WFVbdUGWX/s0/travel-construction-of-new-highway.jpg" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="/>
  <img alt="Langtang Tracking Major Attraction" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE5GdxtdReUjfVfTeTcFT31C2_cRc6gKRgAeGH4To3OudDMdBK4uuEvw5-GOlQvO8LbNIZo9IaTOECLijQEYt1VYtJkYwGhNuqSwnFnKAiANy6cZ_aJJv-3IRPObjf8kRLV3mh3s_PSASr/s0/travel-langtang-tracking.jpg" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="/>
  <img alt="De Spain Preparations" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDKNg3C6fq8ovwuk1nOZayNdpRYoVrIr2E7EZfMVRjn_8tA56gSszjd6HCMXtEDTwt8b0ueY6TUFWJFijZQD_QqAGdam76IK7nmU6SlW8aaPnYUPQeeEfL_7Kjf-lftmUmSE9vKxfPDtYe/s0/sport-de-spain-preparations.jpg" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="/>
  <img alt="Boating Experience in Pokhara" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF-h122LbYrzV65H5HsuJFLWbeW9wDjmoAcX-MSAMhZ2HX8rP1yXjJlxeybnQ4lrsUQuy2W6Y91xuVqsQX4rfNU60JBmWFauz_BkgigpzOyzNq-6xwuAR3Yn0FhYrVSvbX8x5ZQAVZ4IOS/s0/travel-boating-experience.jpg" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="/>
</div>

Image with Show All Function

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
<input class='inImg hidden' id='for-hideImage' type='checkbox'>
<div class='psImg hdImg'>
  <img alt="Construction of New Highway" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhxuZ97YNIqqFr6lCXwWKunPmRfp8XCYa1olN5YOXT-vbzKdEBsALGaoWy3mqDnt2POvBP0zkIvPogRU-pC6f-Egmpu_p2xj3ofWCxTm8TMxaxzAAGclaIvRuufR8XsOFrwp5WFVbdUGWX/s0/travel-construction-of-new-highway.jpg" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="/>
  <img alt="Langtang Tracking Major Attraction" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE5GdxtdReUjfVfTeTcFT31C2_cRc6gKRgAeGH4To3OudDMdBK4uuEvw5-GOlQvO8LbNIZo9IaTOECLijQEYt1VYtJkYwGhNuqSwnFnKAiANy6cZ_aJJv-3IRPObjf8kRLV3mh3s_PSASr/s0/travel-langtang-tracking.jpg" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="/>
  <img alt="De Spain Preparations" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDKNg3C6fq8ovwuk1nOZayNdpRYoVrIr2E7EZfMVRjn_8tA56gSszjd6HCMXtEDTwt8b0ueY6TUFWJFijZQD_QqAGdam76IK7nmU6SlW8aaPnYUPQeeEfL_7Kjf-lftmUmSE9vKxfPDtYe/s0/sport-de-spain-preparations.jpg" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="/>
  
  <div class='btImg'>
    <img alt="Boating Experience in Pokhara" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF-h122LbYrzV65H5HsuJFLWbeW9wDjmoAcX-MSAMhZ2HX8rP1yXjJlxeybnQ4lrsUQuy2W6Y91xuVqsQX4rfNU60JBmWFauz_BkgigpzOyzNq-6xwuAR3Yn0FhYrVSvbX8x5ZQAVZ4IOS/s0/travel-boating-experience.jpg" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="/>
    
    <!--[ 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 alt="Construction of New Highway" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5zaAcUMo-sXBvGPDF0s97DU5CCSS2I1UY5IgSiukVPsCONMvFtILA0o2q2JA6Q4L1HRa-jqjv6ytCyZzIKhxE4W8ePZTDRy3yFU1CS-RhaN2GH2LN2_d9Gwu_xXp0_e5SF-LKzovs0N-Y/s0/techno-ieso-sportscar.jpg" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="/>
    <img alt="Langtang Tracking Major Attraction" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHLW6cTt55excAbzYiY9Pxkv-3ncgEikWDN_TUmkmba6bxvwPD1ekdLTsQsRAIOmrHWPLe-QhGWSIG8jlLMo5pocB8M68ZZCCTEexU7wPDcvWesa4GQ67RlVsOFdf8RhUrHgrUf6n0tetz/s0/research-snow-forecast.jpg" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="/>
    <img alt="De Spain Preparations" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhUcMZv31PrxtqkoL7L2UOUFFIeSayDThZYXSW0RhLaqqsryxyA5vpGeUEmb0PHFCRgFCd5eY8TohqqOtPjKomwrbd5dWFC7K541tubB0u-oCBkbRgHAwE5wdikfepab_5QCN7lqJUi0yd/s0/adventure-rafting.jpg" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="/>
    <img alt="Boating Experience in Pokhara" class="lazy" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiIyzsH59od6a6FaX_ckA2cSivXhbEv-Shyphenhyphen_9TqwZVdp-Z_oxqrVWWkJHLUwJyNjVbShvywUwnLsAAme6-qKGQOfSebKkAEeh-rJx6a99eL65ZQKRX_wt1VRay-5EiokQTg3eD5a4y2IBc/s0/travel-cycling-on-mountain.jpg" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="/>
  </div>
</div>

Post Break

<hr/>

Post Reference

Untuk menambahkan daftar referensi artikel yang anda tulis:

Referensi:
www.kuymase.com

<p class="pRef">Referensi:<br /> www.kuymase.com</p>