Introduction
Hey there, thanks for purchasing AeroMag Blogger Template!
AeroMag Blogger template best suitable for Magzine, news, blog and multipurpose blog.
The template is designed with flexible approach lets you to easily change the color skin, font size and other customization options easily from the official blogger template designer. In this documentation you’ll learn all you need to know about the powerful features of AeroMag Blogger template.
Hopefully, the documantation will help you to set up your blog quickely and easily :)
Features
- Ultra Responsive Design For mobile and tablet devices
- PowerFull Admin Panel
- Popup contact form
- Multiple layout styles for widgets
- Custom search box with ajax result
- Unlimited Colors & Fonts
- Fully customizable Design
- Search Engine Optimized (SEO)
- 10+ Home Layout Boxs Style with shortcodes
- 3 Column Footer Area
- Footer about us and email widget
- Support Facebook Open Graph & Twitter Cards
- Adsense Ready
- Retina Ready
- Drag and Drop widget Support
- jQuery and CSS3 Effects
- Social Counter
- Multi Level Dropdown Menu
- Posts navigation with next and previous post
- Attractive related post design
- Awesome footer style with multiple widget designs
- Blogger Template designer supported
- Unlimited customization options (colors, fonts, template skins (light and dark etc.)
- Minimized HTML, CSS and Jquery
- Fast Loading in all web browsers
- Custom email widget design
- More then twenty the most trending social Media icons for follow and sharing purposes with different styles (flat, rounded and rotating etc.)
- The awesome mega menu designed with CSS3 and HTML.
- Cross Browser Compatible
- Font Awesome Icons Integration
- Full width featured carousel Slider below the mega menu or can be placed anywhere in the widget section
- High quality image thumbnails
- Blogger threaded Comments system with cool design
- Shortcodes ready for buttons and other UI elements
- and more..
What's included
In the package you have downloaded you will find:
- The template as you see it in the demo (obviously, except the images!)
- The documentation (we guess you’ve already found it!)
- Images including some background images and necessary icons etc.
Browser compatibility
AeroMag Blogger Template v1.0 is fully compatible with Chrome, Safari, Firefox, IE10+ and iOS latest versions.
Getting Started
Note
You must do the below steps first so that the template can work properly without bugs and errors.Mobile template Setting:
This template is supported the desktop template on mobile devices. So, Check the show desktop template on mobile devices.
- Assume, you'r logged in your blogger dashboard. Go to template and click on the gear button below the mobile template.
- The popup will appear. Change the mobile template settings according to the below screenshot.
installation
First of all unzip the theme file and follow the below steps
- On your blogger dashboard go to template
- click Backup/Restore
- Click Choose Fileand browse the file where you unzipped the theme file
- Click upload
Options
Allow Blog Feed:Select Full
Meta Tags Setting
In this template there are some meta tags that requires your attention. You can edit the meta tags with your info. So, lets's start
To edit the Meta tags in this theme follow the below steps:
- On your blogger dashboard go to Template
- Click Edit HTML
- Find the below code. You will find it at the top of template code. Just click in template scroll and you will see the below code.
<link href='https://plus.google.com/xxxxx/posts' rel='publisher'/>
<link href='https://plus.google.com/xxxxx/about' rel='author'/>
<link href='https://plus.google.com/xxxxx' rel='me'/>
<meta content='xxxxx' name='google-site-verification'/>
<meta content='xxxxx' name='msvalidate.01'/>
<meta content='xxxxx' name='alexaVerifyID'/>
<meta content='Pakistan' name='geo.placename'/>
<meta content='xxxxx' name='Author'/>
<meta content='general' name='rating'/>
<meta content='id' name='geo.country'/>
<meta content='Facebook App ID here' property='fb:app_id'/>
<meta content='Facebook Admin ID here' property='fb:admins'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>
<meta content='summary' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='@username' name='twitter:site'/>
<meta content='@username' name='twitter:creator'/>Example and explanation
Options
In the above meta tags, you can place your own info in place of below highlighted portion
xxxxx
Pakistan
Facebook App ID here
Facebook Admin ID here
@username
Also, find the below meta tag and place your keyword in it.
<meta content='xxxxx' name='keywords'/>Options
In xxxxx place your keywords such as <meta content='Blogger, SEO, Template' name='keywords'/>
Header SEO
By default, when you upload the image logo in header and choose instead of title and description the H1 tag automatically disappeared from your template.
We have optimized the header by adding the H1 tag even when you upload the image logo. In order to work you just need to find out the below title in your template and replace it with your blog title and you are done with header SEO.
Header SEO
- In your Blogger template
- Search for
Show the image only. - Just below it you will find the below code
- Just Replace the
AeroMag Blogger Templatethree times as in the below code with your blog title. - Save Template.
<b:if cond='data:blog.pageType == "index"'>
<h1 itemprop='name'><a expr:href='data:blog.homepageUrl' itemprop='url' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' itemprop='logo' style='display: block'/><span>AeroMag Blogger Template</span></a>
</h1>
<b:elseif cond='data:blog.pageType == "archive"'/>
<h1 itemprop='name'><a expr:href='data:blog.homepageUrl' itemprop='url' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' itemprop='logo' style='display: block'/><span>AeroMag Blogger Template</span></a>
</h1>
<b:else/>
<h2 itemprop='name'><a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' itemprop='logo' style='display: block'/><span>AeroMag Blogger Template</span></a></h2> </b:if>Options
Just change the AeroMag Blogger Template with your blog title three time as in the code and save your template.
Theme Settings
Let’s take a look at the other elements provided by this template.
1). AeroMag Template Options
There are some options that you can change as you want.
Go to template click Edit HTML click anywher in the template and then press CTRL+F and find the below code.
You can search the // All the default settings to find the below code/
// All the default settings
// Default Image Link
var Default_Image_For_Recent_Posts='https://lh3.googleusercontent.com/9dyQN9-2NFEk6E1-1xBgN5vOzI6Wrfh2hhoclRii23LKykT85WFVbpk6Bh86WTjuMdXZt7B9puhCh39deAdxyEK6bvRmQSTBS_E5DDxgQpALPfWOnGJpEsPbI8LHfoKKNls2zHIdqod05DIzSZdLP4IpZi2H7MCot3Fn09UMNxd4SL2wA2bA_j-ssrLzUVRBYMxwR7phEBCHmpxqQ6zHrlKR_M3JfamwHP44YqZueWmV8El9x7QUvAV-eAiumw3VRl-1gLhdfaUutlI6zGe5myNc8JDo-LZmEETTzXdv0kF5-AYDGR3ED6jiVnI8AMTBpw9Rm9zzlkawef6XnvxtUhOGp8LYzHe-a2ddO4pidDS2Bztl_HAQEEDy_LHDYNknTRxNkXeAoUYPqmGe9keU0u-fO3Sn_VjMPNyXg3TEEzGeDhsmxlcuLBSR8abonyDSMAnYw2ps05KCqFtiEx9IpFoW7nNzPOaglZAjJ-dtaihIxuxgHQX0CAvmn2lhFS33-Y11teaWsPC3C3Z6GDHmp_9I5xQmfM6punTJxZgvLn4=s500-no';
// Your disqus shortname
var DISQUS_SHORT_NAME="demoblog12";
// Sidebar tab 1 text
var sidebar_Tab_1='<i class="fa fa-rss"></i> Recent';
// Sidebar tab 2 text
var sidebar_Tab_2='<i class="fa fa-bolt"></i> Popular';
// Sidebar tab 3 text
var sidebar_Tab_3='<i class="fa fa-random"></i> Random';
// Sticky Navigation
var sticky_nav=true;
//Sticky Sidebar
var sticky_sidebar=true;
// --------- SETTINGS END HERE ---------here, you can change most of the parameters according to your needs with true or false.
And change other options such as:
var DISQUS_SHORT_NAME='demoblog12'; Change demoblog12 with your disqus short name
2). Facebook Comment Setting
If you are using facebook comments in your blog, please add you facebook admin and app id in Meta tags, as in below screenshot. And also please change othe meta tags with your own information.
3). Ad At end of post
In Template look for the below code. For easy click anywhere and press CTRL+F and find:
<div class='postadafter'>
Simply, putt your adsense or banner code below the above line.
4) Author Box
You can change the author box text, social links and image by the following description.
Go to template >> Edit HTML and click anywhere in the code and then press CTRL+F and find the below line
<!-- Author Settings -->Here you will find the complete author boxThis author box support the Google Plus profile.
Note: If you want to show your own custom text in the author box, then in <p><data:post.authorAboutMe/></p>, replace <data:post.authorAboutMe/> with your own text.
Top Menu
In this section we are going to analyze how the header menu works and its configuration options.
Top Menu Bar
Static Pages
To edit the top static page in this theme follow the below steps:
- On your blogger dashboard go to layout
- on the very left side you will see a StaticPages widget
In the static page widget click edit and setup your page menu.
social icons
In the layout you will see an HTML widget Socialicons along with the page widget. It is for social icons. Add the below code in it and edit the links
Note: If you want to make the below icons colored, then please change tl-social-icons with tl-colored-social from the code and you are done!!
<div class="top-social">
<ul class="tl-social-icons icon-flat icon-zoom list-unstyled list-inline">
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
<li><a href="#"><i class="fa fa-youtube"></i></a></li>
<li><a href="#"><i class="fa fa-vine"></i></a></li>
<li><a href="#"><i class="fa fa-soundcloud"></i></a></li>
<li><a href="#"><i class="fa fa-pinterest"></i></a></li>
<li><a href="#"><i class="fa fa-github"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#"><i class="fa fa-foursquare"></i></a></li>
<li><a href="#"><i class="fa fa-vk"></i></a></li>
</ul>
</div>Logo options and Header Ad
The logo can be uploaded from the layout section of your blogger dashboard.
- On your blogger dashboard go to layout
- To edit the blog header or upload the logo you wil need to edit the (BlogHeader) widget with the title of your blog click Edit
- choose logo file and in placement check (instead of title and description)
- Click Save.
you can add the ad banner in the Ad728x90 widget.
Note
In this theme you can upload the logo with maximum of 300px width and 90px height. The big dimension logo will automatically be adjust in the logo space.
The recommended ad size is 728X90.
DropDown Menu
-
Setting up the main menu:
To add the menu in this theme follow the below steps:
- On your blogger dashboard go to layout
- Look for the MainNavigation widget
- Click Edit and add the below code in it.
Location In Admin Panel: MainNavigation<nav> <ul> <li class='navicon'><span></span></li> <li class='homelink'><a href='/'><i class="fa fahome fa-home"></i> Home</a></li> <li><a href='#' itemprop='url'>Menu</a></li> <!--Sub Menu Start--> <li class='submenu'><a href='#' itemprop='url'>Sub Menu</a> <ul> <li><a href='#' itemprop='url'>Sub Menu 1</a></li> <li><a href='#' itemprop='url'>Sub Menu 2</a></li> <li><a href='#' itemprop='url'>Sub Menu 3</a></li> <li><a href='#' itemprop='url'>Sub Menu 4</a></li> <li><a href='#' itemprop='url'>Sub Menu 5</a></li> <li><a href='#' itemprop='url'>Sub Menu 6</a></li> <li><a href='#' itemprop='url'>Sub Menu 7</a></li> </ul> </li> <!--Sub Menu End--> <!--Multi Level Sub Menu Start--> <li class='submenu'><a href='#' itemprop='url'> Mult-Level Sub</a> <ul> <li><a href='#' itemprop='url'>Sub Menu 1</a></li> <li><a href='#' itemprop='url'>Sub Menu 2</a></li> <li class='submenu2'><a href='#' itemprop='url'>Sub Menu 3</a> <ul> <li><a href='#' itemprop='url'>Sub sub Menu 1</a></li> <li><a href='#' itemprop='url'>Sub sub Menu 2</a></li> <li><a href='#' itemprop='url'>Sub sub Menu 3</a></li> <li><a href='#' itemprop='url'>Sub sub Menu 4</a></li> </ul> </li> <li><a href='#' itemprop='url'>Sub Menu 4</a></li> <li><a href='#' itemprop='url'>Sub Menu 5</a></li> <li><a href='#' itemprop='url'>Sub Menu 6</a></li> <li class='submenu2'><a href='#' itemprop='url'>Sub Menu 7</a> <ul> <li><a href='#' itemprop='url'>Sub sub Menu 1</a></li> <li><a href='#' itemprop='url'>Sub sub Menu 2</a></li> <li><a href='#' itemprop='url'>Sub sub Menu 3</a></li> <li><a href='#' itemprop='url'>Sub sub Menu 4</a></li> </ul> </li> <li><a href='#' itemprop='url'>Sub Menu 8</a></li> </ul> </li> <!--Multi Level Sub Menu End--> <!--Menu Recent four col start--> <li class='nav-rec' data-label='Global'><a href='#' itemprop='url'>Global</a></li> <!--Menu Recent four col End--> <!--Menu Recent Tabs start--> <li class='nav-rec-tab'><a href='#' itemprop='url'>Gallery</a> <ul class='tab-outer'> <li data-label='Global'>Global</li> <li data-label='Video'>Video</li> <li data-label='Gallery'>Gallery</li> <li data-label='World News'>World News</li> <li data-label='Sports'>Sports</li> </ul> </li> <!--Menu Recent Tabs End--> <!--Mega Menu Start --> <li class='megamenu'><a href='#'>Mega Menu</a> <ul> <div class="tl-megalis"> <h4>Headline 1</h4> <li><a href='#'>Demo Link</a></li> <li><a href='#'>Demo Link</a></li> <li><a href='#'>Demo Link</a></li> <li><a href='#'>Demo Link</a></li> <li><a href='#'>Demo Link</a></li> <li><a href='#'>Demo Link</a></li> <li><a href='#'>Demo Link</a></li> <li><a href='#'>Demo Link</a></li> </div> </ul> <ul> <div class="tl-megalis"> <h4>Headline 2</h4> <li><a href='#'>Demo Link</a></li> <li><a href='#'>Demo Link</a></li> <li><a href='#'>Demo Link</a></li> <li><a href='#'>Demo Link</a></li> <li><a href='#'>Demo Link</a></li> <li><a href='#'>Demo Link</a></li> <li><a href='#'>Demo Link</a></li> <li><a href='#'>Demo Link</a></li> </div> </ul> <ul> <div class="tl-megalis"> <h4>Headline 3</h4> <li><a href='#'>Demo Link</a></li> <li><a href='#'>Demo Link</a></li> <li><a href='#'>Demo Link</a></li> <li><a href='#'>Demo Link</a></li> <li><a href='#'>Demo Link</a></li> <li><a href='#'>Demo Link</a></li> <li><a href='#'>Demo Link</a></li> <li><a href='#'>Demo Link</a></li> </div> </ul> <ul> <div class="tl-megalis mega-last"> <h4>Headline 4</h4> <li><a href='#'>Demo Link</a></li> <li><a href='#'>Demo Link</a></li> <li><a href='#'>Demo Link</a></li> <li><a href='#'>Demo Link</a></li> <li><a href='#'>Demo Link</a></li> <li><a href='#'>Demo Link</a></li> <li><a href='#'>Demo Link</a></li> <li><a href='#'>Demo Link</a></li> </div> </ul> </li> <!--Mega Menu End--> <!--Random Post Icon in Menu--> <li class="randomPostMenu"><a id='rbutton'><i class='fa fa-random'></i></a></li> <!--Search Icon in Menu--> <li class="searchMenu randomPostMenu"><a class='search-button'><i class='fa fa-search'></i></a></li> <div style='clear:both'></div> </ul> </nav>You can easily configure the menu for your blog. There is comment with each menu style. So, you can easily add or remove the menu according to your need.
Please change the lable name in
data-label='Global'Replace Foods and other label name in this menu with your own blog label name.<li data-label='Global'>Global</li>
<li data-label='Video'>Video</li>
<li data-label='Gallery'>Gallery</li>
<li data-label='World News'>World News</li>
<li data-label='Sports'>Sports</li>
Change Global, Video, Gallery, world News and Sports with your own label Name.
Widgets
In this section we will set up the featured widgets and post Widgets(mag Layout).
Note: Please read me before you go!
Here is the explanation of typical recent post code in this template.
Also, there is a description with each widget about the location of that widget in Layout (Admin Panel).
Example of recent post code:
Below is the example of code to explain it. Each recent post widget in this template will look like the below code.
<div data-style='magazine' data-label='Entertainment'></div>
What you can change or add?
You can change the below parameter:
data-label="Entertainment"Change the Entertainment with your exact label name.
You can add the below parameter if you want to change the View All By text with your own custom text:
data-vmt="View All By" You can change View All By to any text such as view all News
Example:
<div data-style='magazine' data-label='Entertainment' data-vmt="View All By"></div>
Main Widgets
In the layout you can put the following widgets.Below is the list of all the available widgets.
So get started!
1) News Ticker
Add the following code in below widget:
<div class='news-ticker'></div>In this widget Do not: add any title in HTML/Javascript Widget.
2. Home Top / Top Featured
Add the following code in below widget:
<div data-label1='Gallery' data-label2='HTML' data-style='home-top'></div>In this widget Do not: add any title in HTML/Javascript Widget.
3. Recet Post carousel
Add the following code in below widget:
<div data-style='wcar' data-label='Gallery'></div>In this widget Do not: add any title in HTML/Javascript Widget.
4. Magzine S
Add the following code in any one or multiple recomended place/s in layout
<div data-style='magazine' data-label='Entertainment'></div>In this widget Do not: add any title in HTML/Javascript Widget.
5. Recet Post Headline
Add the following code in any one or multiple recomended place/s in layout
<div class='recent-post-tab' data-heading='Trendy'>
<span data-label='HTML' data-name='Coding'></span>
<span data-label='Entertainment' data-name='Gossip'></span>
<span data-label='Sports' data-name='Sports'></span>
<span data-label='Gallery' data-name='Gallery'></span>
</div>In this widget you can change the below parameters.
data-heading='Trendy' Trendy with your heading
data-label='HTML' HTML with your label name
data-name='Coding' Coding with your tab title
In this widget Do not: add any title in HTML/Javascript Widget.
6. Recent Post Carousel Single
Add the following code in any one or multiple recomended place/s in layout
<div data-label='CSS' data-style='slider'></div>In this widget Do not: add any title in HTML/Javascript Widget.
7. Recet Post Cards
Add the following code in any one or multiple recomended place/s in layout
<div data-style='cards' data-label='CSS'></div>In this widget Do not: add any title in HTML/Javascript Widget.
8. Recent Post Gallery
Add the following code in any one or multiple recomended place/s in layout
<div data-label='Gallery' data-style='gallery'></div>In this widget Do not: add any title in HTML/Javascript Widget.
9. Recent Post Coumns
Add the following code in any one or multiple recomended place/s in layout
<div data-style='column' data-label='CSS'></div>In this widget Do not: add any title in HTML/Javascript Widget.
10. Recet Post Straight
Add the following code in any one or multiple recomended place/s in layout
<div data-style='magazine' data-label='Entertainment'></div>In this widget Do not: add any title in HTML/Javascript Widget.
11. Recent Post Simple
Add the following code in any one or multiple recomended place/s in layout
<div data-style='simple' data-label='Global'></div>In this widget Do not: add any title in HTML/Javascript Widget.
12. Recent Post Single
Add the following code in any one or multiple recomended place/s in layout
<div data-style='single' data-label='Sports'></div>In this widget Do not: add any title in HTML/Javascript Widget.
13. Recent Post Vertical Scroll
Add the following code in any one or multiple recomended place/s in layout
<div data-style='vcar' data-label='SVG'></div>In this widget Do not: add any title in HTML/Javascript Widget.
14. Recent Carousel based on Label
Add the following code in any one or multiple recomended place/s in layout
<div data-style='small-slider' data-purpose='label' data-label='SVG'></div>15. Recent Carousel Simple
Add the following code in any one or multiple recomended place/s in layout
<div data-style='small-slider' data-purpose='recent'></div>15. Recent Post
Add the following code in any one or multiple recomended place/s in layout
<div data-style='recent-list'></div>15. Random Post
Add the following code in any one or multiple recomended place/s in layout
<div data-style='random'></div>16. Social Icons
<div class='tl-social-widget zd-social'>
<a class='sq facebook' href='#' target='_blank'>
<div class='icon'><span><i class='fa fa-facebook'></i></span></div>
<div class='content'>
<span class='display'>themelet</span>
<span class='count'>2.5k</span>
</div>
</a>
<a class='sq twitter' href='#' target='_blank'>
<div class='icon'><span><i class='fa fa-twitter'></i></span></div>
<div class='content'>
<span class='display'>@themelet</span>
<span class='count'>3k</span>
</div>
</a>
<a class='sq google' href='#' target='_blank'>
<div class='icon'><span><i class='fa fa-google-plus'></i></span></div>
<div class='content'>
<span class='display'>+ themelet</span>
<span class='count'>1.5k</span>
</div>
</a>
<a class='sq instagram' href='#' target='_blank'>
<div class='icon'><span><i class='fa fa-instagram'></i></span></div>
<div class='content'>
<span class='display'>@themelet</span>
<span class='count'>5k</span>
</div>
</a>
<div style='clear:both'/>
<a class='rec email' href='#' target='_blank'>
<div class='icon'><span><i class='fa fa-envelope'></i></span></div>
<div class='content'>
<span class='display'>themelethelp@gmail.com</span>
</div>
</a>
</div></div>15. Footer Social
Add the following code in below widget section
Note: If you want to make the below icons colored, then please change tl-social-icons with tl-colored-social from the code and you are done!!
<div class="footer-social top-social">
<ul class="tl-social-icons icon-flat icon-zoom list-unstyled list-inline">
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
<li><a href="#"><i class="fa fa-youtube"></i></a></li>
<li><a href="#"><i class="fa fa-vine"></i></a></li>
<li><a href="#"><i class="fa fa-soundcloud"></i></a></li>
<li><a href="#"><i class="fa fa-pinterest"></i></a></li>
<li><a href="#"><i class="fa fa-github"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#"><i class="fa fa-foursquare"></i></a></li>
<li><a href="#"><i class="fa fa-vk"></i></a></li>
</ul>
</div>Sitemap
Let’s take a look at the sitemap.
To add the sitemap widget in your blog, Create a new page >> Switch to HTML and paste the below code. Click Publish and you are done
<div class='tl-sitemap'></div>
Contact Form
Let’s take a look at the Contact form.
To add the Contact form widget in your blog, Create a new page >> Switch to HTML and paste the below code. Click Publish and you are done
<div class="col1 contact-custom">
<div class="tl-col-inner custom-contact-form">
<div class="contact-us-form">
<form name="contact-form">
<div class="form-hint cn-name">
Your Name : </div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == "") {this.value = "Name";}' onfocus='if (this.value == "Name") {this.value = "";}' />
<div class="form-hint cn-email">
Your Email: <em>*</em></div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID" size='30' type='text' onblur='if (this.value == "") {this.value = "Email ID";}' onfocus='if (this.value == "Email ID") {this.value = "";}'/>
<div class="form-hint cn-subject">
Subject:</div>
<input class='contact-form-subject' id='ContactForm1_contact-form-email' name='subject' value="Subject" size='30' type='text' onblur='if (this.value == "") {this.value = "Subject";}' onfocus='if (this.value == "Subject") {this.value = "";}'/>
<div class="form-hint cn-message">
Your Message: <em>*</em></div>
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" onblur="if (this.value == "") {this.value = "Leave Your Message..";}" onfocus="if (this.value == "Leave Your Message..") {this.value = "";}" value="Leave Your Message.."></textarea>
<input class='button red' type='reset' value='Clear'/>
<input class="button green" id="ContactForm1_contact-form-submit" type="button" value="Send" />
<br />
<div style="max-width: 500px; text-align: center; width: 100%;">
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
</div>
</div>
Shortcodes
Let’s take a look at the shortcodes provided by this template.
Post Pagination
<div class="tl-post-page">
Content Here... for (page 1)
</div>
<div class="tl-post-page">
Content Here... for (page 2)
</div>
<div class="tl-post-page">
Content Here... for (page 3)
</div>
<div class="tl-post-page">
Content Here... for (page 4)
</div>
If you want to split your content in post pages, this is the best widget for you. You can make pages easily as you like.
Image Gallery
<section id="tl-photogallery">
Your all gallery images here
</section>
Putt your all gallery images in "Your all gallery images here"
Buttons
Add the buttons with different colores and size
Button style 1
/*---- Button Style 1 -----*/
<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>
Button style 2
/*---- Button Style 2 -----*/
<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>
Button style 3
/*---- Button Style 3 -----*/
<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>
In Button style 3 you can use the Font Awesome Icons
Alert Boxs
Add the alert boxes with different alerts.
/*----success message----*/
<div class="alert-message success">
<i class="fa fa-check-circle"></i>
success message : You successfully read this important message.
<div class="alert-del-btn"></div>
</div>
/*----Alert message-----*/
<div class="alert-message alert">
<i class="fa fa-info-circle"></i>
Alert message : This alert needs your attention.
<div class="alert-del-btn"></div>
</div>
/*----Warning message-----*/
<div class="alert-message warning">
<i class="fa fa-exclamation-triangle"></i>
Warning message : Warning! Best check yo self.
<div class="alert-del-btn"></div>
</div>
/*----Error message-----*/
<div class="alert-message error">
<i class="fa fa-exclamation-circle"></i>
Error message : Oh snap! Change a few things up.
<div class="alert-del-btn"></div>
</div>Code Boxs
Add the below code boxes for beautifying your CSS,HTML,Jquery and Javascript codes.
<pre data-codetype="HTML">You HTML Code Here</pre>
<pre data-codetype="CSS">You CSS Code Here</pre>
<pre data-codetype="JavaScript">You JavaScript Code Here</pre>
<pre data-codetype="JQuery">You JQuery Code Here</pre>
Tabs And Accordion
You can add the below accordion and tabs in your template.
Tabs
<div class="tl-tab-w zd-tab">
<div class="zd-tabbutton">
<span class="zdbutton">Button 1</span>
<span class="zdbutton">Button 2</span>
<span class="zdbutton">Button 3</span>
</div>
<div class="zd-tabcontent">
<div>
Content 1</div>
<div>
Content 2</div>
<div>
Content 3</div>
</div>
</div>Accordion
<div class="tl-accordion-w zd-acc">
<span class="zdbutton">Button 1</span>
<div>Content 1</div>
<span class="zdbutton">Button 2</span>
<div>Content 2</div>
<span class="zdbutton">Button 3</span>
<div>Content 3</div>
<span class="zdbutton">Button 4</span>
<div>Content 4</div>
</div>Drop Caps
Beautify your content with smart dropcaps
Dropcap style 1
<span class="tl-dropcap dcap1">M</span>Dropcap style 2
<span class="tl-dropcap dcap2">S</span>Dropcap style 3
<span class="tl-dropcap dcap3" style="color: #ff9900;">S</span>You can change the color of Dropcap style 3 with your own.
List Style
Below are some of the list styles that you can use in your post.
List style 1
<ul class='tl-custom-li tl-arrow-li'>
<li>First List Item</li>
<li>Second List Item</li>
......
</ul>List style 2
<ul class='tl-custom-li tl-check-li'>
<li>First List Item</li>
<li>Second List Item</li>
......
</ul>List style 3
<ul class='tl-custom-li tl-cross-li'>
<li>First List Item</li>
<li>Second List Item</li>
......
</ul>List style 4
<ul class='tl-custom-li tl-multi-li'>
<li><i class="fa fa-coffee"></i> First List Item</li>
<li><i class="fa fa-cloud-upload"></i> Second List Item</li>
......
</ul>Column
Below are some of the column that you can use in your post.
1 column
<div class="tl-cols">
<div class="col1">Col content ....</div>
</div>2 columns
<div class="tl-cols">
<div class="col2 pull-left">
<div class="tl-first-col">Col content ...</div>
</div>
<div class="col2 pull-right">
<div class="tl-second-col">Col content ...</div>
</div>
</div>3 columns
<div class="tl-cols">
<div class="col3 pull-left">
<div class="tl-col3-1">Col Content ...</div>
</div>
<div class="col3 pull-left">
<div class="tl-col3-2">Col Content ...</div>
</div>
<div class="col3 pull-left">
<div class="tl-col3-3">Col Content ...</div>
</div>
</div>4 columns
<div class="tl-cols">
<div class="col4 pull-left">
<div class="tl-col4-1">Col content ...</div>
</div>
<div class="col4 pull-left">
<div class="tl-col4-2">Col content ...</div>
</div>
<div class="col4 pull-left">
<div class="tl-col4-3">Col content ...</div>
</div>
<div class="col4 pull-left">
<div class="tl-col4-4">Col content ...</div>
</div>
</div>Ad Banner
<div style="text-align:center;">
<a href="#" target="_blank"><img class="tl-magimg" src="#" alt="AeroMag-banner-728×90" /></a>
</div>replace # with link and image URL respectively.
Best Location(s) for ad banner: TopWidgets-S, TopWidgets-S1,TopWidgets-S3,BottomWidgets-S1, BottomWidgets-S3,FullWidthWidget-Top,FullWidthWidget-Bottom
Credits
Here is the list of the awesome resources we used to create this template.