Template Documentation of Zap Mag

How to set-up Rank Fast blogger template. below a set of example and guide to understand Rank Fast template.

Enhance blogger experience we added some plugins to our template that help bloggers to enhance there blog. You can use our readymade plugins. plugins only available to paid users.

To use plugin check blogger layout option and find plugins widget

[download file="template.zip" size="150KB" ext="zip" url="https://example.com/template.zip"/] [alert type="success"]Hello Alert[/alert]

Typography

Below some example to show blog content design

Paragraph styles

Here some paragraph styles that you can use

Code Example:

<p>This is a simple paragraph of text. It provides some basic information about a topic.</p>
<p>Learning to code can be both fun and challenging. Practice and persistence are key to becoming proficient.</p>

Result:

This is a simple paragraph of text. It provides some basic information about a topic.

Learning to code can be both fun and challenging. Practice and persistence are key to becoming proficient.

Code Example:

<p class="dropcap">This is a paragraph with a drop cap. The first letter is styled to be larger than the rest of the text, creating a visual emphasis at the beginning of the paragraph.</p>
<p class="indent">This is a paragraph with an indented first line. Indentation is often used to visually separate the start of a new paragraph from the rest of the text.</p>

Result:

This is a paragraph with a drop cap. The first letter is styled to be larger than the rest of the text, creating a visual emphasis at the beginning of the paragraph.

This is a paragraph with an indented first line. Indentation is often used to visually separate the start of a new paragraph from the rest of the text.

Blockquote

Code Example:

<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</blockquote>

Result:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Text styling

Code Example:

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text</p>
<p>Example of <a href="#">Link</a> text</p>
<p>Example of <a href="#" target="_blank">Link new tab</a> text</p>
<p>Example of <abbr title="Abbreviation">abbr</abbr> text</p>
<p>Example of <mark>highlight</mark> text</p>
<p>Example of <del>deleted</del> text</p>
<p>Example of <b>bold</b> text</p>
<p>Example of <i>italic</i> text</p>
<p>Example of <u>underlined</u> text</p>
<p>Example of <sub>subscripted</sub> text</p>
<p>Example of <sup>superscripted</sup> text</p>

Result:

Press Ctrl + C to copy text

Example of Link text

Example of Link new tab text

Example of abbr text

Example of highlight text

Example of ~~deleted~~ text

Example of bold text

Example of italic text

Example of underlined text

Example of _subscripted text

Example of ^{superscripted} text

Button styles

Code Example:

<a class="button" href="#">Default Button</a>
<a class="button rounded" href="#">Rounded Button</a>
<a class="button outlined" href="#">Outlined Button</a>
<a class="button rounded outlined" href="#">Mix Button</a>

Result:
Default Button Rounded Button Outlined Button Mix Button

Post Links

We have created some box link design such as Download Card, Post Card

Download Card

Code Example:

<div class="box-download">
  <div class="download-info">
    <div class="icon">Zip</div>
    <div class="name-size">
      <div class="name">Template.zip</div>
      <div class="size">150 kb</div>
    </div>
  </div>
  <div class="download-btn">
    <a href="#link">Download</a>
  </div>
</div>

Result:

Zip

Template.zip

150 kb

Download

Download+auto safelink

Code Example:

<div class="box-download">
  <div class="download-info">
    <div class="icon">Zip</div>
    <div class="name-size">
      <div class="name">Template.zip</div>
      <div class="size">150 kb</div>
    </div>
  </div>
  <div class="download-btn">
    <a href="#link" data-safe="">Download</a>
  </div>
</div>

Result:

Zip

Template.zip

150 kb

Download

Auto Safelink

Auto Safelink feature active when add data-safe="" attribute to any link

Code Example

<a data-safe="" href="#your link">Simple auto safelink</a>

Result:
Simple auto safelink

Post Card

Code Example:

<a post-card="" href="#">All typography and features of Rank Fast blogger template</a>
<a post-card="" href="#">[Split] Search Engine Optimization for Websites</a>

Reault: Template Documentation of Rank Fast [Split] Search Engine Optimization for Websites: A Comprehensive Guide

Lazyload image/iframe

Lazyload function can load blog resources slowly when elements come to viewport. its help to speed up blog loading speed. just write items into <noscript>.....</noscript> to load them lazily.

Lazyload image

Code Example:

<noscript>
  <img alt="" src="#your image link" width="600" />
</noscript>

Result:

Image slider

Code Example:

<div class="slider">
  <div class="slides">
    <div class="slide">
      <noscript>
        <img alt="Slide 1" src="#first image" />
      </noscript>
    </div>
    <div class="slide">
      <noscript>
        <img alt="Slide 2" src="#second image" />
      </noscript>
    </div>
    <div class="slide">
      <noscript>
        <img alt="Slide 3" src="#thirth image" />
      </noscript>
    </div>
    <!--Add more as your wish-->
  </div>
</div>

Result:

Post Accordion

Post accordion have two style.

Default Accordion

Code Example

<div class="accordion">
    <div class="accordion-item">
        <div class="accordion-header">Section 1</div>
        <div class="accordion-content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna vel velit dictum auctor. Sed lacinia, nisl eu fermentum blandit, felis ex sollicitudin sapien, a pharetra erat mauris in erat.
        </div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header">Section 2</div>
        <div class="accordion-content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna vel velit dictum auctor. Sed lacinia, nisl eu fermentum blandit, felis ex sollicitudin sapien, a pharetra erat mauris in erat.
        </div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header">Section 3</div>
        <div class="accordion-content">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna vel velit dictum auctor. Sed lacinia, nisl eu fermentum blandit, felis ex sollicitudin sapien, a pharetra erat mauris in erat.
        </div>
    </div>
</div>

Result

Section 1