Topics

Create Blogger AMP HTML template install & download Accelerated Mobile Pages themes for Blogspot platform.


Typography

Typography
This documentation displays theme typography and pre-assigned helper classes with styling for quick body text formatting.

Headings


All HTML headings, <h1> through <h6>, are available.

h1. A BlogrAMP heading

Semibold 36px

h2. A BlogrAMP heading

Semibold 24px

h3. A BlogrAMP heading

Semibold 21px

h4. A BlogrAMP heading

Semibold 18px

h5. A BlogrAMP heading
Semibold 16px

h6. A BlogrAMP heading
Semibold 15px

<h1>h1. A BlogrAMP heading</h1>
<h2>h2. A BlogrAMP heading</h2>
<h3>h3. A BlogrAMP heading</h3>
<h4>h4. A BlogrAMP heading</h4>
<h5>h5. A BlogrAMP heading</h5>
<h6>h6. A BlogrAMP heading</h6>

Body Copy

Blockquotes

For quoting blocks of content from another source within your document.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
</blockquote>

Lists

Unordered

A list of items in which the order does not explicitly matter.

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
  • Phasellus iaculis neque
  • Purus sodales ultricies
  • Vestibulum laoreet porttitor sem
  • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

<ul>
 <li>...</li>
</ul>

Ordered

A list of items in which the order does explicitly matter.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

<ol>
<li>...</li>
</ol>

With Children

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li>
  <ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    <li>...</li>
  </ul>
</li>
<li>...</li>
<li>...</li>
</ul>

Forms

Basic example

Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with.form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.


<form> 
 <div class="form-group">
  <label for="exampleInputEmail1">Email address</label> 
  <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Email"/> 
 </div> 
 <div class="form-group"> 
  <label for="exampleInputPassword1">Password</label> 
  <input type="text" class="form-control" id="exampleInputPassword1" placeholder="Password"/> 
 </div> 
 <div class="form-group"> 
  <label for="exampleInputFile">File input</label> 
  <input type="file" id="exampleInputFile"/>
  </div>
 <div class="checkbox">
  <label><input type="checkbox"/> Check me out </label> 
 </div>
 <div class="form-group"> 
  <label for="exampleTextArea">File input</label> 
  <textarea class="form-control" rows="5" id="exampleTextArea"> </textarea>
  </div>
 <button type="submit" class="btn btn-primary">Submit</button>
</form>

Buttons

Button tags

Use the button classes on an <a>, <button>, or <input> element.

Version 2-0-0

Link

<a class="btn" href="#" role="button">Link</a> 
<button class="btn btn-flat" type="submit">Button</button> 
<input class="btn btn-primary" type="button" value="Input"/> 
<input class="btn btn-primary btn-flat" type="submit" value="Submit"/>
<button class="btn" type="button"><i class="fa fa-envelope-o"></i> Button Icons</button>
<button class="btn btn-primary" type="button"><i class="fa fa-envelope-o"></i> Button Icons</button>

Version 1-0-0

Link

<a class="btn" href="#" role="button">Link</a> 
<button class="btn btn-flat" type="submit">Button</button> 
<input class="btn btn-primary" type="button" value="Input"/> 
<input class="btn btn-primary btn-flat" type="submit" value="Submit"/>
<button class="btn" type="button"><i class="md-icons">mail</i> Button Icons</button>
<button class="btn btn-primary" type="button"><i class="md-icons">mail</i> Button Icons</button>

Code

Wrap text with <code>code</code> for inline code highlighting.

Pre

Wrap a paragraph with <pre> ... </pre>  for code syntax like highlighting.

<pre>
... some text ...
... some text ...
... some text ...
</pre>

Tables

Add class table to create a responsive table with styling. Add class data-th with its matching th values at table body td .

On screen sizes < 480px table <thead> will be hidden and data-th values assigned will be shown instead.

Head 1 Head 2 Head 3
Column 1-1 Column 1-2 Column 1-3
Column 2-1 Column 2-2 Column 2-3
Column 3-1 Column 3-2 Column 3-3

<table class="table">
  <thead>
    <tr>
      <th>Head 1</th>
      <th>Head 2</th>
      <th>Head 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-th="Head 1">Column 1-1</td>
      <td data-th="Head 2">Column 1-2</td>
      <td data-th="Head 3">Column 1-3</td>
    </tr>
   <tr>
     <td data-th="Head 1">Column 2-1</td>
     <td data-th="Head 2">Column 2-2</td>
     <td data-th="Head 3">Column 2-3</td>
   </tr>
   <tr>
     <td data-th="Head 1">Column 3-1</td>
     <td data-th="Head 2">Column 3-2</td>
     <td data-th="Head 3">Column 3-3</td>
   </tr>
  </tbody>
</table>

Blogr-AMP Blogger AMP HTML TemplateRated 5/5 based on 98 reviewsThis documentation displays theme typography and pre-assigned helper classes with styling for quick body text formatting.Blogr-AMP: Typography
5/ 5
Best AMP Blogger template, Blogr-AMP exceeded my expectations. Search engine friendly, easy to use, backed by great support This documentation displays theme typography and pre-assigned helper classes with styling for quick body text formatting. Headings All ....


Working...

Ooops! We're having trouble connecting...