Home Responsive Magazine Axact V3.0 is a modern, clean, responsive and flat Blogger template suitable for magazine, news, sports, tech, games and multipurpose blog

di


 https://app.box.com/s/ergevs45jufiincg9d43yisd75m7le90

 https://app.box.com/s/lxe4o5k8b3i57amxvr2mxz9a00zhfpl2

 Demo Download

Introduction

Hey there, thanks for purchasing Axact Blogger Template!
Axact 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 Axact 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.
License note: All resources that come with this template (ex.: jQuery plugins) are under the MIT license. All images contained into the demo are the property of their respective owners (see credits); we contacted them for having permission to use their works only for demo purposes.

Browser compatibility

Axact 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


  • Under Settings >> Other change or keep the settings according to the below screenshot.

    • 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 Axact Blogger Template three times as in the below code with your blog title.
    • Save Template.
      •         <b:if cond='data:blog.pageType == &quot;index&quot;'>
                          <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 + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' itemprop='logo' style='display: block'/><span>Axact Blogger Template</span></a>
                            </h1>
<b:elseif cond='data:blog.pageType == &quot;archive&quot;'/>
<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 + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' itemprop='logo' style='display: block'/><span>Axact 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 + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' itemprop='logo' style='display: block'/><span>Axact Blogger Template</span></a></h2>            </b:if>

    Options

    Just change the Axact 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). Axact 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 // Setting Starts Here to find the below code/
    // Setting Starts Here
var DISQUS_SHORT_NAME='demoblog12';
var Related_Post_Num=6;
var interesting_pop=true;
var facebookComments=true;
var disqusComments=true;
var sidebarMode='right'; // left
var layoutMode='boxed'; // full
var stickySidebar=true;
var stickyMenu=true;
var headerModeCenter=false; // Set false if you want to make header on left

    var perPage=7;
    var numPages=6;
    var firstText ='First';
    var lastText ='Last';
    var prevText ='« Previous';
    var nextText ='Next »';

var RecentTab1= '<i class="fa fa-bar-chart"></i> Business';
var RecentTab2= '<i class="fa fa-star"></i> Featured';
var RecentTab3= '<i class="fa fa-globe"></i> World';
var RecentTab4= '<i class="fa fa-youtube-play"></i> Video';
var SidebarTab1= '<i class="fa fa-rss"></i> Recent';
var SidebarTab2= '<i class="fa fa-fire"></i> Popular';
var SidebarTab3= '<i class="fa fa-comment"></i> Comment';
var RecentNewsLabel= 'Recent News';
// Settings Ends 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
    var Related_Post_Num=6; Change 6 to your desired related post number
    var sidebarMode='right'; Change to left if you want to show sidebar on left
    var layoutMode='boxed'; change to full if you want full width look
    Also change the title of Recent tabs with your own titles.

    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). Transparent Header Background

    By default, header background is white, you can change to transparent from template designer as in the below screenshot.

    4). Boody background Image

    You can cahnge the body background image from template designer by choosing images from blogger or upload your own as in below screenshot.

    5). Change content width

    You can cahnge the content width from template designer as in below screenshot

    6). Full width Page

    Sometimes you need a full width page so here is the key to make a full width page in this template.
    To create a full width static or post page add the below css code in HTML mode of your post editor in the post or page that you want to make full width.
    <style>
#main-wrapper{width:100%}
#main-wrapper .main-inner{border:none;}
#sidebar-wrapper,.comments{display:none;}
</style>

    7). 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 code
    <b:includable id='tl-postAuth' var='post'>
    Here you will find the complete author box . Just change the Name, Text, Image and social icons links with your own and save the template.

    8). Template Designer

    Axact comes with complete support of blogger template designer . You can change the color , Adjust width and change the backgrounds easily with a single click.
    Axact is highly customizable theme into light , dark or any color that you like the most can apply to Axact.
    In our Dark demo we have used the different colors for backgrounds and text, heading, meta, border and icon. if you want to convert theme into dark skin than follow the below color combinations (or you can use any color you love) in blogger template designer. It will completely change the look of your template into dark.

    1. Go to template >> click customize and click on advance
    2. Under advance, you will find many options you need to choose the backgrounds and make changes to the colors of your choice.After changing the colors click Apply to blog
    3. Now, click on the Main colors and change the colors of your choice and click apply to blog
    4. View the blog with new look.
    It is super easy and in this way you can customize every element of this theme. Such as Header, footer, author box background, social icons background and many more in the template designer..

    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
    <div class="top-social">
<ul class="tl-social-icons icon-flat icon-zoom list-unstyled list-inline" itemscope="" itemtype="http://schema.org/SiteNavigationElement">
<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>
    Location In Admin Panel: Socialicons
    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 285px width and 90px height. The big dimension logo will automatically be adjust in the logo space.
    The recommended ad size is 728X90.

    DropDown Menu

    1. 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.
      
<nav class='mainnavs'>
    <ul class='leftmenus'>
        <li class='homelink'><a href='/'><i class="fa fahome fa-home"></i> Home</a></li>
        <li><a href='#' itemprop='url'><span itemprop='name'>Menu</span></a></li>
        
        <!--Sub Menu Start-->
        <li class='submenu'><a href='#' itemprop='url'><span itemprop='name'>Sub Menu</span></a>
            <ul>
                <li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 1</span></a></li>
                <li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 2</span></a></li>
                <li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 3</span></a></li>
                <li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 4</span></a></li>
                <li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 5</span></a></li>
                <li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 6</span></a></li>
                <li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 7</span></a></li>
            </ul>
        </li>
        <!--Sub Menu End-->
        
        <!--Multi Level Sub Menu Start-->
        <li class='submenu'><a href='#' itemprop='url'><span itemprop='name'> Mult-Level Sub</span></a>
            <ul>
                <li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 1</span></a></li>
                <li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 2</span></a></li>
                <li class='submenu2'><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 3</span></a>
                    <ul>
                        <li><a href='#' itemprop='url'><span itemprop='name'>Sub sub Menu 1</span></a></li>
                        <li><a href='#' itemprop='url'><span itemprop='name'>Sub sub Menu 2</span></a></li>
                        <li><a href='#' itemprop='url'><span itemprop='name'>Sub sub Menu 3</span></a></li>
                        <li><a href='#' itemprop='url'><span itemprop='name'>Sub sub Menu 4</span></a></li>
                    </ul>
                </li>
                <li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 4</span></a></li>
                <li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 5</span></a></li>
                <li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 6</span></a></li>
                <li class='submenu2'><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 7</span></a>
                    <ul>
                        <li><a href='#' itemprop='url'><span itemprop='name'>Sub sub Menu 1</span></a></li>
                        <li><a href='#' itemprop='url'><span itemprop='name'>Sub sub Menu 2</span></a></li>
                        <li><a href='#' itemprop='url'><span itemprop='name'>Sub sub Menu 3</span></a></li>
                        <li><a href='#' itemprop='url'><span itemprop='name'>Sub sub Menu 4</span></a></li>
                    </ul>
                </li>
                <li><a href='#' itemprop='url'><span itemprop='name'>Sub Menu 8</span></a></li>
            </ul>
        </li>
        <!--Multi Level Sub Menu End-->
        
      <!--Menu Recent four col start-->
      <li class='tl-menuRecent' data-label='Foods'><a href='#' itemprop='url'><span itemprop='name'>Foods</span></a></li>
      <!--Menu Recent four col End-->
        
        <!--Menu Recent Tabs start-->
        <li class='tl-menuRecentTab'><a href='#' itemprop='url'><span itemprop='name'>Gallery</span></a>
            <ul class='tab-outer'>
                <div class='tl-tabLiMenu'>
                    <li data-label='Fashion'>Fashion</li>
                    <li data-label='Gallery'>Gallery</li>
                    <li data-label='People'>People</li>
                    <li data-label='World News'>World News</li>
                    <li data-label='Tech'>Tech</li>
                </div>
            </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-->
    </ul>
    <li class='rpost'><a class='randompost tl-headlinks' id='rbutton'><i class="fa fa-random"></i>
</a>
    </li>
</nav>
      Location In Admin Panel: MainNavigation 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='Foods' Replace Foods and other label name in this menu with your own blog label name.
      <li data-label='Fashion'>Fashion</li>
      <li data-label='Gallery'>Gallery</li>
      <li data-label='People'>People</li>
      <li data-label='World News'>World News</li>
      <li data-label='Tech'>Tech</li>
      2. Change Fashion, Gallery, People, world News and Tech 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 class='recent-post-carousel' data-label='Fashion' data-num='5'></div>

    What you can change or add?

    You can change the below parameters:
    data-label="Fashion"Change the Fashion with your exact label name.
    data-results="5" you can change the results to any value but, 5 is good for most of the widgets.
    You can add the below parameter if you want to change the view more text with your own custom text:
    data-vmt="View More" You can change View More to any text such as view all posts
    Such as:
    <div class='recent-post-carousel' data-label='Fashion' data-num='5' data-vmt='View All Posts'></div>

    1) Featured Widgets

    There is featured widget section that you can easily setup by following the below description.

    News Ticker

    In NewsTicker putt the below code

    <div class='tl-ticker-outer'>
<div id="tl-ticker">
</div>
 <div class='tl-ticker-con'>
    <span class='down'><i class='fa-caret-down'></i></span>
    <span class='pp'><i class='fa-pause'></i></span>
    <span class='up'><i class='fa-caret-up'></i></span>
  </div>
</div>

    1) FeaturedSlider-1

    In featuredslider-1 putt the below code

    <div class='recent-post-carousel' data-label='Fashion' data-num='5'></div>

    2) FeaturedXLarge-2

    In FeaturedXLarge-2 putt the below code

    <div class='recent-single-slider' data-label='People'></div>

    3) Remaining Featured widgets

    Please putt the below code in each featured widget except (NewsTicker), (FeaturedSlider-1) and (FeaturedXLarge-2).

    <div class="featuredContent tl-featuredMag" data-label="Destination"></div>

    2) Main Widgets

    In the below layout you can put the following widgets.Below is the list of all the available widgets.
    So get started!

    1) Recent Scroll

    Add the following code in any one or multiple recomended place/s in layout

    <div class='tl-recent-scroll'></div>
    you can add this widget in layout widget sections: HeaderCarousel, NewsTicker, FullWidthWidget-Top, FullWidthWidget-Bottom In this widget Do not: add any title in HTML/Javascript Widget.

    2. Recet Post Headline

    Add the following code in any one or multiple recomended place/s in layout

    <div class="tl-recentMag tl-recentHeadline" data-label="Travel" data-results="5"></div>
    Location (s) in Admin Panel (Layout): TabContent-1, TabContent-2, TabContent-3, TabContent-4, TopWidgets-S, TopWidgets-S1, TopWidgets-S3, BottomWidgets-S1 and BottomWidgets-S3 In this widget Do not: add any title in HTML/Javascript Widget.

    3. Recet Headline S

    Add the following code in any one or multiple recomended place/s in layout

    <div class='tl-recent-headline' data-label='Travel'></div>

    Note

    This Widget supports the youtube videos with high quality thumbs. So, you can use this widget for Video label too.
    Location (s) in Admin Panel (Layout): TabContent-1, TabContent-2, TabContent-3, TabContent-4, TopWidgets-S, TopWidgets-S1, TopWidgets-S3, BottomWidgets-S1 and BottomWidgets-S3 In this widget Do not: add any title in HTML/Javascript Widget.

    4. Recet Posts PW

    Add the following code in any one or multiple recomended place/s in layout

    <div class='tl-feature-style' data-label='Travel'></div>
    Location (s) in Admin Panel (Layout): TabContent-1, TabContent-2, TabContent-3, TabContent-4, TopWidgets-S, TopWidgets-S1, TopWidgets-S3, BottomWidgets-S1 and BottomWidgets-S3 In this widget Do not: add any title in HTML/Javascript Widget.

    5. Recet Post Grid 2

    Add the following code in any one or multiple recomended place/s in layout

    <div class='tl-cards' data-label='Travel'></div>
    Location (s) in Admin Panel (Layout): TabContent-1, TabContent-2, TabContent-3, TabContent-4, TopWidgets-S, TopWidgets-S1, TopWidgets-S3, BottomWidgets-S1 and BottomWidgets-S3 In this widget Do not: add any title in HTML/Javascript Widget.

    6. Recent Post News

    Add the following code in any one or multiple recomended place/s in layout

    <div class='tl-recentMag tl-recentHeadline tl-recentH-S2' data-label='Travel' data-results="5"></div>
    Location (s) in Admin Panel (Layout): TabContent-1, TabContent-2, TabContent-3, TabContent-4, TopWidgets-S, TopWidgets-S1, TopWidgets-S3, BottomWidgets-S1 and BottomWidgets-S3 In this widget Do not: add any title in HTML/Javascript Widget.

    7. Recet Post Carousel


    <div class='recent-post-carousel' data-label='Fashion' data-num='5'></div>
    In this widget, you can adjust number with any number data-num='5'. For example if you want to show 3 post items, you can change 5 to 3.
    Location (s) in Admin Panel (Layout): TopWidgets-S, TopWidgets-S1, TopWidgets-S3, BottomWidgets-S1 and BottomWidgets-S3, FullWidthWidget-Top, FullWidthWidget-Bottom, FooterSlider, FeaturedSlider-1, HeaderTicker, SidebarWidgets-S1, SidebarWidgets-S2, stickyWidget In this widget Do not: add any title in HTML/Javascript Widget.

    8. Multi Categories

    Add the following code in any one or multiple recomended place/s in layout

    <div class='home-top' data-label1='Fashion' data-label2='Gallery' data-label3='People' data-label4='Foods'></div>
    Location (s) in Admin Panel (Layout): FullWidthWidget-Top and FullWidthWidget-Bottom In this widget Do not: add any title in HTML/Javascript Widget.

    9. Recent Post Big Gallery

    Add the following code in any one or multiple recomended place/s in layout

    <div class="tl-recentMag tl-galleryMag" data-label="Entertainment" data-results="10"></div>
    Location (s) in Admin Panel (Layout): FullWidthWidget-Top, FullWidthWidget-Bottom 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 class='recent-post-straight' data-label='Travel'></div>
    Location (s) in Admin Panel (Layout): top-grid3-1, top-grid3-2, top-grid3-3, TopWidgets-S2L, TopWidgets-S2R, BottomWidgets-S2L, BottomWidgets-S2R, bottom-grid3-1, bottom-grid3-2, bottom-grid3-3, sidebarWidgets-S1, sidebarWidgets-S2 In this widget Do not: add any title in HTML/Javascript Widget.

    11. Recent Post Col

    Add the following code in any one or multiple recomended place/s in layout

    <div class="tl-recentMag tl-recentHeadline tl-recentH-S1" data-label="Travel" data-results="4"></div>
    Location (s) in Admin Panel (Layout): top-grid3-1, top-grid3-2, top-grid3-3, TopWidgets-S2L, TopWidgets-S2R, BottomWidgets-S2L, BottomWidgets-S2R, bottom-grid3-1, bottom-grid3-2, bottom-grid3-3, sidebarWidgets-S1, sidebarWidgets-S2 In this widget Do not: add any title in HTML/Javascript Widget.

    12. Recent Post Col Simple

    Add the following code in any one or multiple recomended place/s in layout

    <div class="tl-recentMag tl-recentPost" data-label="Gallery" data-results="5"></div>
    Location (s) in Admin Panel (Layout): top-grid3-1, top-grid3-2, top-grid3-3, TopWidgets-S2L, TopWidgets-S2R, BottomWidgets-S2L, BottomWidgets-S2R, bottom-grid3-1, bottom-grid3-2, bottom-grid3-3, sidebarWidgets-S1, sidebarWidgets-S2, Footer1, Footer2, Footer3,Footer4 In this widget Do not: add any title in HTML/Javascript Widget.

    13. Recent Post

    Add the following code in any one or multiple recomended place/s in layout

    <div class="tl-recentMag tl-recentSimple" data-results="5"></div>
    Location (s) in Admin Panel (Layout): SidebarWidgets-S1, SidebarWidgets-S2, Footer1, Footer2, Footer3, Footer4

    14. Random Post

    Add the following code in any one or multiple recomended place/s in layout

    <div class="tl-recentMag tl-randomSimple" data-results="5"></div>
    Location (s) in Admin Panel (Layout): SidebarWidgets-S1, SidebarWidgets-S2, Footer1, Footer2, Footer3, Footer4

    15. Recent Comment

    Add the following code in any one or multiple recomended place/s in layout

    <div class="tl-recentMag tl-recentComments" data-results="5"></div>
    Location (s) in Admin Panel (Layout): SidebarWidgets-S1, SidebarWidgets-S2, Footer1, Footer2, Footer3, Footer4

    16. Social Icons

    Add the following code in any one or multiple recomended place/s in layout

    <div class="tl-socialicons">
<div class="tl-socialInner">
  <!--Facebook-->
    <div class="tl-social">
  <div class="tl-facebook tl-sinn">
      <a href='#' target='_blank' title="Facebook">
      <span class="tl-sicon"><i class="fa fa-facebook"></i></span>
      <span class="tl-scount">3.1K</span>
      </a>
      </div>
      </div>
  <!--Google Plus-->
    <div class="tl-social">
  <div class="tl-googleplus tl-sinn">
      <a href='#' target='_blank' title="Google Plus">
      <span class="tl-sicon"><i class="fa fa-google-plus"></i></span>
      <span class="tl-scount">2K</span>
      </a>
    </div>
    </div>
  <!--Twitter-->
  <div class="tl-social">
  <div class="tl-twitter tl-sinn">
      <a href='#' target='_blank' title="Twitter">
      <span class="tl-sicon"><i class="fa fa-twitter"></i></span>
      <span class="tl-scount">1.4K</span>
      </a>
    </div>
    </div>
  <!--Instagram-->
  <div class="tl-social">
  <div class="tl-instagram tl-sinn">
      <a href='#' target='_blank' title="Instagram">
      <span class="tl-sicon"><i class="fa fa-instagram"></i></span>
      <span class="tl-scount">2K</span>
      </a>
    </div>
    </div>
  <!--Pinterest-->
  <div class="tl-social">
  <div class="tl-pinterest tl-sinn">
      <a href='#' target='_blank' title="Pinterest">
      <span class="tl-sicon"><i class="fa fa-pinterest"></i></span>
      <span class="tl-scount">4.5K</span>
      </a>
    </div>
    </div>
  <!--Youtube-->
  <div class="tl-social">
  <div class="tl-youtube tl-sinn">
      <a href='#' target='_blank' title="YouTube">
      <span class="tl-sicon"><i class="fa fa-youtube"></i></span>
      <span class="tl-scount">2.8K</span>
      </a>
    </div>
    </div>
  <!--Vine-->
  <div class="tl-social">
  <div class="tl-vine tl-sinn">
      <a href='#' target='_blank' title="Vine">
      <span class="tl-sicon"><i class="fa fa-vine"></i></span>
      <span class="tl-scount">3.3K</span>
      </a>
    </div>
    </div>
  <!--SoundCloud-->
  <div class="tl-social">
  <div class="tl-soundcloud tl-sinn">
      <a href='#' target='_blank' title="SoundCloud">
      <span class="tl-sicon"><i class="fa fa-soundcloud"></i></span>
      <span class="tl-scount">3.9K</span>
      </a>
    </div>
    </div>
    
      <!--VK-->
      <div class="tl-social">
  <div class="tl-vk tl-sinn">
      <a href='#' target='_blank' title="VK">
      <span class="tl-sicon"><i class="fa fa-vk"></i></span>
      <span class="tl-scount">3.9K</span>
      </a>
    </div>
    </div>
      <!---->
      <div class="tl-social">
  <div class="tl-foursquare tl-sinn">
      <a href='#' target='_blank' title="Foursquare">
      <span class="tl-sicon"><i class="fa fa-foursquare"></i></span>
      <span class="tl-scount">3.9K</span>
      </a>
    </div>
    </div>
      <!--GitHub-->
      <div class="tl-social">
  <div class="tl-github tl-sinn">
      <a href='#' target='_blank' title="GitHub">
      <span class="tl-sicon"><i class="fa fa-github"></i></span>
      <span class="tl-scount">3.9K</span>
      </a>
    </div>
    </div>
      <!--Dribbble-->
      <div class="tl-social">
  <div class="tl-dribbble tl-sinn">
      <a href='#' target='_blank' title="Dribbble">
      <span class="tl-sicon"><i class="fa fa-dribbble"></i></span>
      <span class="tl-scount">3.9K</span>
      </a>
    </div>
    </div>
    
    </div>
</div>
    Location (s) in Admin Panel (Layout): SidebarWidgets-S1, SidebarWidgets-S2,, Footer1, Footer2, Footer3, Footer4

    Axact Demos

    In this section we will illustrate how to set up different demos of Axact.
    There are multiple widgets placements that will allow you to make your blog flexible and look different.
    I have made some demos with single axact template. The demos look different from each other. So, you can also make the blog look like the demos.

    Note

    This is optional and just for demo purpose only to show the flexibility of Axact to make different look of a blog. You can follow the complete instructions and usage of all widgets in the Blog widgets section of documantation and use widgets according to their instructions as you like to make any look of your blog :)

    Axact Tech

    Although, there is complete description with each widget to place in layout. In the below section you will find how, axatly the demo of Axact Tech is designed with the above widgets.
    This is helpful for those who, want to make the blog/website as the demo of Axact Tech.
    Demo: Axact Tech

    Get started!

    Note

    Suppose, You have setup your header (Including the top nav, logo & ad and main menu). Follow the below instructions to setup other widgets and settings to make Blog looks like Axact Tech.

    Instructions:

    For Example, When i say, Add below code in layout "FeaturedXLarge-2". You need to go to layout and look for FeaturedXLarge-2 widget. When you found it just click edit and place the code in it.
    So, get started and add the below widgets according to their mentioned placement to make your blog look like Axact Tech.

    1) Add below code in layout NewsTicker

    <div class='tl-ticker-outer'>
<div id="tl-ticker">
</div>
 <div class='tl-ticker-con'>
    <span class='down'><i class='fa-caret-down'></i></span>
    <span class='pp'><i class='fa-pause'></i></span>
    <span class='up'><i class='fa-caret-up'></i></span>
  </div>
</div>

    2) Add below code in layout FeaturedXLarge-2

    <div class='recent-single-slider' data-label='Technology'></div>

    3) Add below code in layout FeaturedSmall-3, FeaturedSmall-4, FeaturedSmall-5, FeaturedSmall-6

    <div class="featuredContent tl-featuredMag" data-label="Science"></div>

    4) Add below code in layout FullWidthWidget-Top

    <div class='tl-recent-scroll'></div>

    5) Add below code in layout TabContent-1, TabContent-2, TabContent-3, TabContent-4

    <div class="tl-recentMag tl-recentHeadline" data-label="Business" data-results="5"></div>

    6) Add below code in layout TopWidgets-S1

    <div class='recent-post-carousel' data-label='Apple' data-num='2'></div>

    7) Add below code in layout TopWidgets-S2L, TopWidgets-S2R

    <div class="tl-recentMag tl-recentHeadline tl-recentH-S1" data-label="Google" data-results="4"></div>

    8) Add below code in layout TopWidgets-S3

    <div class='tl-cards' data-label='Technology'></div>

    9) Add below code in layout BottomWidgets-S1

    <div class='tl-recentMag tl-recentHeadline tl-recentH-S2' data-label='Technology' data-results="5"></div>

    10) Add below code in layout BottomWidgets-S1

    <div class='tl-recent-headline' data-label='Video'></div>

    11) Add below code in layout FullWidthWidget-Bottom

    <div class='recent-post-carousel' data-label='Gadgets' data-num='5'></div>

    12) Add below code in layout bottom-grid3-1, bottom-grid3-2, bottom-grid3-3

    <div class='recent-post-straight' data-label='Technology'></div>

    13) Add below code in layout FooterSlider

    <div class='tl-recent-scroll'></div>

    14) Add below code in layout Footer3

    <div class='recent-post-carousel' data-label='Gadgets' data-num='1'></div>

    Axact Blog

    Although, there is complete description with each widget to place in layout. In the below section you will find how, axatly the demo of Axact Blog is designed with the above widgets.
    This is helpful for those who, want to make the blog/website as the demo of Axact Blog.
    Demo: Axact Blog

    Get started!

    Note

    Suppose, You have setup your header (Including the top nav, logo & ad and main menu). Follow the below instructions to setup other widgets and settings to make Blog looks like Axact Blog.

    Center Logo

    In your dashboard, go to template edit HTML click anywhere in the template and then press CTRL+F to find the below code.
    var headerModeCenter=false;
    change false to true to make logo center.
    So, get started and add the below widgets according to their mentioned placement to make your blog look like Axact Blog
    .

    1) Add below code in layout FeaturedSlider-1

    <div class='recent-post-carousel' data-label='People' data-num='5'></div>

    2) Add below code in layout TabContent-1, TabContent-2, TabContent-3, TabContent-4

    <div class='tl-recent-headline' data-label='Travel'></div>

    3) Add below code in layout TopWidgets-S3

    <div class='tl-cards' data-label='People'></div>

    4) Add below code in layout FullWidthWidget-Bottom

    <div class="tl-recentMag tl-galleryMag" data-label="People" data-results="10"></div>
    5) Lastely, Remove the footer widgets

    3) Axact Sports

    Although, there is complete description with each widget to place in layout. In the below section you will find how, axatly the demo of Axact Sports is designed with the above widgets.
    This is helpful for those who, want to make the blog/website as the demo of Axact Sports.
    Demo: Axact Sports

    Get started!

    Note

    Suppose, You have setup your header (Including the top nav, logo & ad and main menu). Follow the below instructions to setup other widgets and settings to make Blog looks like Axact Sports.
    So, get started and add the below widgets according to their mentioned placement to make your blog look like Axact Sports
    .

    1) Add below code in layout HeaderCarousel

    <div class='tl-recent-scroll'></div>

    2) Add below code in layout TopWidgets-S

    <div class='recent-single-slider' data-label='Sports'></div>

    3) Add below code in layout TabContent-1, TabContent-2, TabContent-3, TabContent-4

    <div class='tl-feature-style' data-label='Sports'></div>

    4) Add below code in layout TopWidgets-S3

    <div class='tl-cards' data-label='Sports'></div>

    5) Add below code in layout BottomWidgets-S2L, BottomWidgets-S2R

    <div class="tl-recentMag tl-recentHeadline tl-recentH-S1" data-label="Athlete" data-results="4"></div>

    6) Add below code in layout FullWidthWidget-Bottom

    <div class='home-top' data-label1='Sports' data-label2='football' data-label3='Racing' data-label4='Athlete'></div>

    7) Add below code in layout Footer1

    <div class="tl-recentMag tl-recentPost" data-label="football" data-results="4"></div>

    8) Add below code in layout Footer2

    <div class="tl-recentMag tl-recentPost" data-label="Racing" data-results="4"></div>

    9) Add below code in layout Footer3

    <div class="tl-recentMag tl-recentPost" data-label="Sports" data-results="4"></div>

    10) Add below code in layout Footer4

    <div class="tl-recentMag tl-recentPost" data-label="Athlete" data-results="4"></div>

    11) Add below code in layout SidebarWidgets-S1

    <div class='recent-post-carousel' data-label='Soccer' data-num='1'></div>

    12) Add below code in layout SidebarWidgets-S3

    <div class='recent-post-straight' data-label='Athlete'></div>

    4) Axact Games

    Although, there is complete description with each widget to place in layout. In the below section you will find how, axatly the demo of Axact Games is designed with the above widgets.
    This is helpful for those who, want to make the blog/website as the demo of Axact Games.
    Demo: Axact Games

    Get started!

    Note

    Suppose, You have setup your header (Including the top nav, logo & ad and main menu). Follow the below instructions to setup other widgets and settings to make Blog looks like Axact Games.

    Center Logo

    In your dashboard, go to template edit HTML click anywhere in the template and then press CTRL+F to find the below code.
    var headerModeCenter=false;
    change false to true to make logo center.

    Transparent Header background

    To transparent header background, Go to template customize >> Advanced >> Middle Header. Now, in Middle Header Background select transparent color as in below screenshot.
    So, get started and add the below widgets according to their mentioned placement to make your blog look like Axact Games
    .

    1) Add below code in layout FullWidthWidget-Top

    <div class='tl-recent-scroll'></div>

    2) Add below code in layout FullWidthWidget-Top

    <div class='home-top' data-label1='Featured' data-label2='Reviews' data-label3='Windows' data-label4='PS4'></div>

    3) Add below code in layout TopWidgets-S

    <div class='recent-single-slider' data-label='Xbox'></div>

    4) Add below code in layout TabContent-1, TabContent-2, TabContent-3, TabContent-4

    <div class='tl-recentMag tl-recentHeadline tl-recentH-S2' data-label='PS4' data-results="5"></div>

    5) Add below code in layout TopWidgets-S2L, TopWidgets-S2R

    <div class="tl-recentMag tl-recentHeadline tl-recentH-S1" data-label="PS4" data-results="4"></div>

    6) Add below code in layout TopWidgets-S3

    <div class='recent-post-carousel' data-label='PC' data-num='3'></div>

    7) Add below code in layout TopWidgets-S3

    <div class='tl-cards' data-label='Fighting'></div>

    8) Add below code in layout bottom-grid3-1, bottom-grid3-2, bottom-grid3-3

    <div class="tl-recentMag tl-recentHeadline tl-recentH-S1" data-label="PS4" data-results="4"></div>

    9) Add below code in layout FooterSlider

    <div class='recent-post-carousel' data-label='Fighting' data-num='3'></div>

    10) Add below code in layout Footer1, Footer2, Footer3

    <div class="tl-recentMag tl-recentPost" data-label="Xbox" data-results="4"></div>

    11) Add below code in layout SidebarWidgets-S1

    <div class='recent-post-carousel' data-label='Reviews' data-num='1'></div>

    Template Designer And Dark Example

    You can easily change the colors to dark or any color that you like.
    In Blogger dashboard, go to template click customize and follow the below screenshots

    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"

    Contact Us widget


    <style>
#main-wrapper{width:100%}
#sidebar-wrapper,.comments{display:none;}
#main-wrapper .bcreative-inner{border:0px;}
.page-contact {
  padding: 35px 0;
}
h2.post-title.entry-title {
  text-align: center;
}
</style>
<div class="col2 pull-left">
<div class="tl-col-inner custom-contact-form">
<div class="contact-us-form">
<form name="contact-form">
<div class="form-hint">
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">
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">
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">
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>
<div class="col2 pull-right">
<div class="tl-col-inner contact-address">
<div class="Contact-info">
<h2>Nice to Hear From You</h2>
<p class="contact-text">Suspendisse ut interdum lectus. Integer ac neque faucibus, venenatis nisl quis, pellentesque lacus. Integer et ipsum sit amet dui ultrices hendrerit. Pellentesque leo massa, suscipit a felis non, posuere convallis velit. Sed tincidunt lacinia velit et aliquam.</p>
 <div class="contact-social">
 <ul class="tl-colored-social icon-rounded 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-instagram"></i></a> </li>
       <li> <a href="#"><i class="fa fa-google-plus"></i></a> </li> 
       <li> <a href="#"><i class="fa fa-youtube"></i></a> </li> 
    </ul>
</div>
<h2>Contact Information</h2>
<p><strong><i class="fa fa-map-marker"></i> Our Location</strong><br />
31-33B Tan Thuan St, Tan Thuan EZ, East Tan Thuan Ward 11, District 7, Ho Chi Minh City, Vietnam.</p>
<p><strong><i class="fa fa-phone"></i> Phone Number</strong><br />
+84 935 815 989<br />
+84 935 815 989</p>
<p><strong><i class="fa fa-envelope-o"></i> Email Adress</strong><br />
we@gmail.com<br />
oursupport@gmail.com</p>
</div>
 </div>
 </div>
    Make a new page and add the above code in HTML mode and publish.

    Colorful sub titles

    To make colorful subtitles, you can appply html and styles in search Description of post, as below.
    You can add subtitles of whatever <span style="color:white;background:red">S</span><span style="color:white;background:darkgreen">T</span><span style="color:white;background:lightpurple">Y</span><span style="color:white;background:pink">L</span><span style="color:white;background:blue">E</span> you want.

    Post Carousel

    Add the carousel in your post and pages by adding the below code in HTML Mode of your post editor.
    <div id="post-carousel" class="owl-carousel owl-theme">
<div class="img-item"><img src="#" alt="The Last of us"></div>
<div class="img-item"><img src="#" alt="GTA V"></div>
<div class="img-item"><img src="#" alt="Mirror Edge"></div>
</div>
    Replace the # with ithe url of image and also change the alt.
    Note: You can upload the images in your post and then get the link to use in carousel.

    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-tabs">

<div class="tl-tabbtn">
<span class="tl-click">Button 1</span>
<span class="tl-click">Button 2</span>
<span class="tl-click">Button 3</span>
</div>

<div class="tl-tabcontent">
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
</div>

</div>

    Accordion

    <div class="tl-accordion">

<span class="tl-click">Button 1</span>
<div>Content 1</div>

<span class="tl-click">Button 2</span>
<div>Content 2</div>

<span class="tl-click">Button 3</span>
<div>Content 3</div>

<span class="tl-click">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="Axact-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

    Share To:
    Axact

    Ainun Nursahid

    ID Onesite
    Alamat : Jalan Soekarno - Hatta, No.004, Desa. Air Mas, F. 6, Kec. Singingi, Kab. Kuantan Singingi, Pekanbaru - Riau, Kode Pos 29563
    Handphone :
    0812 6703 7779 - 0812 7555 5509
    https://www.facebook.com/ainunesc
    https://twitter.com/ainun_esc

    Responsive Magazine

    Post A Comment:

    0 comments:

    Langganan: Posting Komentar (Atom)