Documentation Ranaa

How To Setup Ranaa Blogger Template

DEMO

Method of Installing Manual Template Code:

Download files sent via email or WhatsApp
Open it using the Winrar or Zip application
Then select the template folder
Select one file type to be installed, .xml to be uploaded directly and notepad replace all and paste it in the Edit HTML. Recommendations (notepad), how to install notepad can be seen here.
Before installing, it's a good idea to first backup the previous template.

URGENT

1. Make sure all articles have a label, don't any without a label

2. In the Feed make it Full

TAG / LABEL SEARCH

Access your blog Layout - click Edit Icon on Tag Hiden Search widget

Urgent!

Specify the tags/labels that will be displayed here

SOCIAL HEADER

Access your blog Layout - click Edit Icon on Social Header widget

Icons Avaliables (facebook, twitter, gplus, rss, youtube, skype, stumbleupon, tumblr, vine, stack-overflow, linkedin, dribbble, soundcloud, behance, digg, instagram, pinterest, delicious, codepen)

PRIMARY MENU

Access your blog Layout - click Edit icon on Menu widget

Normal Link : Dropdown

Sub Link : __Submenu 1 (before the link add "__") 2 underscore

NAV BOTTOM

Access your blog Layout - click Edit icon on Nav Bottom widget

BREAKING NEWS

Access your blog Layout - click Edit icon on Breaking News widget

Recent Posts:

<span data-type="recent" data-no="5"></span>

Label / Tag Ex:

<span data-type="label" data-label="News" data-no="5"></span>

INFORMATION

Replace with the label to be displayed

Number of articles shown

(The size of the text on the label is very influential, so it must be adjusted)

RECENT FEATURED POSTS

Access your blog Layout - click the Edit icon in the Featured Recent widget

Recent Posts:

<span data-type="recent"></span>

Label / Tag Ex:

<span data-type="label" data-label="News"></span>

INFORMATION

Replace with the label to be displayed

(The size of the text on the label is very influential, so it must be adjusted)

RECENT SIDEBAR POST

Access your blog Layout - click the Edit icon in the Latest News widget

INFORMATION:

<span data-type="recentlist" data-no="4"></span>

Place the above code in the widget

Number of articles shown

SOURCE CODE

TABLE OF CONTENTS

<aside id="toc"><b class="toc"></b></aside>

Place the TOC code above in the desired paragraph (Place it on the POST HTML page)

DROCUP 1

<span class="text-dropcap dcap1">P</span>

DROPCUP 2

<span class="text-dropcap dcap2">P</span>

DROPCUP 3

<span class="text-dropcap dcap3">P</span>

BUTTON

<a class="button" href="#">Button</a>
<a class="button red" href="#">red Button</a>
<a class="button orange" href="#">orange Button</a>
<a class="button green" href="#">green Button</a>
<a class="button blue" href="#">blue Button</a>
<a class="button purple" href="#">purple Button</a>
<a class="button yellow" href="#">yellow Button</a>
<a class="button mint" href="#">mint Button</a>
<a class="button aqua" href="#">aqua Button</a>
<a class="button pink" href="#">pink Button</a>
<a class="button white" href="#">white Button</a>
<a class="button grey" href="#">grey Button</a>
<a class="button dark-grey" href="#">dark-grey Button</a>
<a class="button transparent" href="#">Button</a>
<a class="button transparent red" href="#">red Button</a>
<a class="button transparent orange" href="#">orange Button</a>
<a class="button transparent green" href="#">green Button</a>
<a class="button transparent blue" href="#">blue Button</a>
<a class="button transparent purple" href="#">purple Button</a>
<a class="button transparent yellow" href="#">yellow Button</a>
<a class="button transparent mint" href="#">mint Button</a>
<a class="button transparent aqua" href="#">aqua Button</a>
<a class="button transparent pink" href="#">pink Button</a>
<a class="button transparent grey" href="#">grey Button</a>
<a class="button transparent dark-grey" href="#">dark-grey Button</a>
<a class="button" href="#"><i class="fa fa-bolt"></i>Button</a>
<a class="button red" href="#"><i class="fa fa-bookmark"></i>red Button</a>
<a class="button orange" href="#"><i class="fa fa-cart-arrow-down"></i>orange Button</a>
<a class="button green" href="#"><i class="fa fa-bars"></i>green Button</a>
<a class="button blue" href="#"><i class="fa fa-cloud-download"></i>blue Button</a>
<a class="button purple" href="#"><i class="fa fa-fighter-jet"></i>purple Button</a>
<a class="button yellow" href="#"><i class="fa fa-external-link"></i>yellow Button</a>
<a class="button mint" href="#"><i class="fa fa-gavel"></i>mint Button</a>
<a class="button aqua" href="#"><i class="fa fa-life-ring"></i>aqua Button</a>
<a class="button pink" href="#"><i class="fa fa-magic"></i>pink Button</a>
<a class="button white" href="#"><i class="fa fa-location-arrow"></i>white Button</a>
<a class="button grey" href="#"><i class="fa fa-leaf"></i>grey Button</a>
<a class="button dark-grey" href="#"><i class="fa fa-meh-o"></i>dark-grey Button</a>

GALLERY

<section id="box-gallery">

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2J-jETtFEuYSw6LXuaqWyMEEgjqr3dRjSFbCJlWhO1xYd1lsW4V1YCj1rccP1UaqJaz_vrgp-Ww5yMsQKECSnc_bC5qGQzgMyY3zvvXVUO9vR4XEcCn2qRwz9aN5ieVnX2jFWoNFijTPF/s1600/8.jpg"><img class="lazyload" data-sizes="auto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2J-jETtFEuYSw6LXuaqWyMEEgjqr3dRjSFbCJlWhO1xYd1lsW4V1YCj1rccP1UaqJaz_vrgp-Ww5yMsQKECSnc_bC5qGQzgMyY3zvvXVUO9vR4XEcCn2qRwz9aN5ieVnX2jFWoNFijTPF/s1600/8.jpg" /></a>     

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh90kxBQ7pXcj32FS6-qooqB8UnweapHoc0hFPNiOHy6-yCr6RpHSz8y1ROpl9ZjTYq7yOaxiIMl6bxrXUgb4a0DF7_0B495Y4r_h85IJkW14Av5y_nV13ItBYIg_Iin6oVYcgrqCv7NCge/s1600/9.jpg"><img class="lazyload" data-sizes="auto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh90kxBQ7pXcj32FS6-qooqB8UnweapHoc0hFPNiOHy6-yCr6RpHSz8y1ROpl9ZjTYq7yOaxiIMl6bxrXUgb4a0DF7_0B495Y4r_h85IJkW14Av5y_nV13ItBYIg_Iin6oVYcgrqCv7NCge/s1600/9.jpg" /></a>     

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU-Mp5G00PP-wBBRXvT2bUxpe4CC0tohCHbpjg-t7Wezl9z71ZGr5AY-CExXAXDQb_WiKN_4aqeA9PZ7JXB33kYko2u8GBmNhBvmVdq-SNEH5wnyJKAEGxWfTV07cXENgPLTfPYJvEQzXn/s1600/10.jpg"><img class="lazyload" data-sizes="auto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU-Mp5G00PP-wBBRXvT2bUxpe4CC0tohCHbpjg-t7Wezl9z71ZGr5AY-CExXAXDQb_WiKN_4aqeA9PZ7JXB33kYko2u8GBmNhBvmVdq-SNEH5wnyJKAEGxWfTV07cXENgPLTfPYJvEQzXn/s1600/10.jpg" /></a>

</section>

LAZYLOAD

Every time to add an image in an article or anywhere you have to insert the Lazyload Image code in it to speed up loading on the blog

Example:

class="lazyload" data-sizes="auto"

SLOTS IN THE ARTICLE

SITEMAP

Create a new page and name it Sitemap without any content in it then publish it

ALERT

<h2>
Success Message</h2>
<div class="alert-message success">
<i class="fa fa-check-circle"></i> success message : You successfully read this important message.     <br />
<div class="alert-del-btn">
</div>
</div>

<h2>
Alert Message</h2>
<div class="alert-message alert">
<i class="fa fa-info-circle"></i> Alert message : This alert needs your attention.     <br />
<div class="alert-del-btn">
</div>
</div>

<h2>
Warning Message</h2>
<div class="alert-message warning">
<i class="fa fa-exclamation-triangle"></i> Warning message : Warning! Best check yo self.     <br />
<div class="alert-del-btn">
</div>
</div>

<h2>
Error Message</h2>
<div class="alert-message error">
<i class="fa fa-exclamation-circle"></i> Error message : Oh snap! Change a few things up.     <br />
<div class="alert-del-btn">
</div>
</div>

TAB

<div class="box-tabs">
<div class="box-btn">
<span class="babutton">Button 1</span><span class="babutton">Button 2</span><span class="babutton">Button 3</span></div>
<div class="box-tab-content">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>

ACCORDION

<div class="box-accordion">
<span class="babutton">Button 1</span>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<span class="babutton">Button 2</span>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<span class="babutton">Button 3</span>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<span class="babutton">Button 4</span>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</div>

AULIAN V2

Documentation Ranaa

NAV BOTTOM

Documentation Ranaa

Pesan via WhatsApp!

Pengiriman Fleksibel

Metode Pembayaran Lengkap

Toko WA+

Hubungi Kami