Fitur Unggulan DetroAMP (Premium Blogger Template Valid AMP)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lectus sit amet est placerat in egestas erat. Ac felis donec et odio pellentesque diam volutpat commodo sed. Risus quis varius quam quisque id.


How to use this Table of Content:

<div id="toclist">
 <input checked="checked" id="show" name="group" type="radio" /><input id="hide" name="group" type="radio" /><label class="hide" for="hide">Table of Content</label><label class="show" for="show"></label>
 <div class="content">
  <ol>
   <li><a href="#1">Target #1</a></li>
   <li><a href="#2">Target #2</a>
    <ol>
     <li><a href="#21">Target #2 sub #1</a></li>
     <li><a href="#22">Target #2 sub #2</a></li>
     <li><a href="#23">Target #2 sub #3</a></li>
    </ol>
   </li>
   <li><a href="#3">Target #3</a></li>
  </ol>
 </div>
</div>

<h2>Heading</h2>

<h3>Sub Heading</h3>

<h4>Minor Heading</h4>

<h5>Minor Heading</h5>

<h6>Minor Heading</h6>

Text Styles

Result	How to use
Bold	<b>Bold</b>
Italic	<i>Italic</i>
Bold Italic	<b><i>Bold Italic</i></b>
Underline	<u>Underline</u>
Striketrough	<strike>Striketrough</strike>
Mark	<mark>Mark</mark>
Code Style	<code>Code Style</code>
M3	M<sup>3</sup>
H2O	H<sub>2</sub>O
Exterlink	<a class="exterlink" href="#">Exterlink</a>
Yellow	<span class="yellow">Yellow</span>
Blue	<span class="blue">Blue</span>
Red	<span class="red">Red</span>
Lime	<span class="lime">Lime</span>
Green	<span class="green">Green</span>
Grey	<span class="grey">Grey</span>
Orange	<span class="orange">Orange</span>

Table

Table Header	Table Header
Sub	Sub
Sub	Sub
Sub	Sub
Sub	Sub
Sub	Sub
Sub	Sub
Sub	Sub

How to use :

<table><tbody>
  <tr><th>Table Header</th><th>Table Header</th></tr>
  <tr><td>Sub</td><td>Sub</td></tr>
  <tr><td>Sub</td><td>Sub</td></tr>
  <tr><td>Sub</td><td>Sub</td></tr>
  <tr><td>Sub</td><td>Sub</td></tr>
  <tr><td>Sub</td><td>Sub</td></tr>
  <tr><td>Sub</td><td>Sub</td></tr>
</tbody></table>

Syntax Highlighter

<div class='about'>
 <a href='/p/disclaimer.html' title='Disclaimer'>Disclaimer</a>
 <a href='/p/contact.html' title='Contact'>Contact</a>
 <a href='/p/term-of-service.html' title='Term of Services'>TOS</a>
 <a href='/p/privacy-policy.html' title='Privacy Policy'>Privacy</a>
 <a href='/p/about.html' title='About Us'>About</a>
</div>

How to use :

<pre>
 <code>
  Parsed CSS, HTML, Java Script here
 </code>
</pre>

Box and Blockquote

Blockquote

Suspendisse potenti nullam ac tortor vitae purus faucibus ornare suspendisse. Vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique. Ac turpis egestas integer eget aliquet nibh praesent. Malesuada fames ac turpis egestas.

<blockquote>
  Text here
</blockquote>

Warning Box

<div class="warning">
  Text here
</div>

Important Box

<div class="important">
  Text here
</div>

Note Box

<div class="note">
  Text here
</div>

Recommended Box

<div class="recommended">
  Text here
</div>

Box Baca Juga

<div class="bacajuga">
  Baca juga: <a href="#link">Text</a>
</div>

Button

Normal
Preview
Download

How to use :

<a href="#"><button>Normal</button></a>
<a href="#"><button class="download">Download</button></a>
<a href="#"><button class="preview">Preview</button></a>

Ordered Lists (Nested)

How to use :

<div class="nested">
<ol>
  <li>item</li>
  <li>item
    <ol>
      <li>item</li>
      <li>item
        <ol>
          <li>item</li>
          <li>item</li>
        </ol>
      </li>
      <li>item</li>
      <li>item</li>
    </ol>
  </li>
  <li>item</li>
</ol>
</div>

Unordered Lists (Nested)

• item
• item
  
  • item
  • item
    
    • item
    • item
  • item
  • item
• item

How to use :

<ul>
  <li>item</li>
  <li>item
    <ul>
      <li>item</li>
      <li>item
        <ul>
          <li>item</li>
          <li>item</li>
        </ul>
      </li>
      <li>item</li>
      <li>item</li>
    </ul>
  </li>
  <li>item</li>
</ul>