March 2018 - YouTuber | Blogger | Internet Marketer

Blogger Template: Suitable for Magzine, news, blog and multipurpose blog.

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
click anywhere in the template and press CTRL+Fand find 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='India' 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'/>

Options

In the above meta tags, you can place your own info in place of below highlighted portion
xxxxx
India
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'/>

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 MagPress 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>MagPress 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>MagPress 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>MagPress Blogger Template</span></a></h2>            </b:if>

Options

Just change the MagPress Blogger Template with your blog title three time as in the code and save your template.

In this section we are going to analyze how the header menu works and its configuration options.

To edit the top page menu and social media icons in this theme follow the below steps:

1. Page Menu

On your blogger dashboard go to layout
on the very left side you will see a StaticPages

In the StaticPages click edit and setup your page menu easily.

2. 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 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-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 300px width and 90px height. The big dimension logo will automatically be adjust in the logo space.
The recommended ad size is 728X90.

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></a></li>
        <li><a href='#' itemprop='url'><span itemprop='name'>Menu</span></a></li>
        
        <!-- Simple 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>
            </ul>
        </li>
         <!-- Simple 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>
            </ul>
        </li>
      <!-- Multi-level sub menu End -->
      
<!-- Mega Menu Recent posts Start -->
<li class='tl-menuRecent' data-label='Design'><a href='#' itemprop='url'><span itemprop='name'>Design</span></a></li>
<li class='tl-menuRecent' data-label='Technology'><a href='#' itemprop='url'><span itemprop='name'>Technology</span></a></li>
<li class='tl-menuRecent' data-label='Photoshop'><a href='#' itemprop='url'><span itemprop='name'>Photoshop</span></a></li>
<!-- Mega Menu Recent posts End -->

        <!-- Mega Menu 5 col Start -->
<li class='megamenu'><a href='#'>Mega Menu</a>
            <ul>
            <div class='megamenu-items'>
                 <h4>Title 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>
                </div>
            </ul>
            <ul>
            <div class='megamenu-items'>
                <h4>Title 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>
                </div>
            </ul>
            <ul>
            <div class='megamenu-items'>
                 <h4>Title 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>
                </div>
            </ul>
            <ul>
            <div class='megamenu-items'>
                 <h4>Title 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>
                </div>
            </ul>
            <ul>
            <div class='megamenu-items last-child'>
                 <h4>Title 5</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>
                </div>
            </ul>
        </li>
        <!-- Mega Menu 5 col End -->
        
        <!-- Hot News Right Menu Start -->
        <li class='submenu choose-cat'><a href='#' itemprop='url'><span itemprop='name'>Hot News</span></a>
            <ul>
                <li><a href='#' itemprop='url'><span itemprop='name'>World News</span></a></li>
                <li><a href='#' itemprop='url'><span itemprop='name'>Travel</span></a></li>
                <li><a href='#' itemprop='url'><span itemprop='name'>Entertainment</span></a></li>
                <li><a href='#' itemprop='url'><span itemprop='name'>Sports</span></a></li>
                <li><a href='#' itemprop='url'><span itemprop='name'>Music</span></a></li>
                <li><a href='#' itemprop='url'><span itemprop='name'>Fashion</span></a></li>
                <li><a href='#' itemprop='url'><span itemprop='name'>Gallery</span></a></li>
                <li><a href='#' itemprop='url'><span itemprop='name'>Video</span></a></li>
            </ul>
        </li>
        <!-- Hot News Right Menu End -->
        
    </ul>
</nav>

Location In Admin Panel: MainNavigation

Note

Please change the below parameters in the widgets as required in the below widgets.
Also, there is a description with each widget about the location of that widget in Layout (Admin Panel).
data-label="Destination"Change the Destination 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.

1) News Ticker

<div class='news-ticker' data-results='5'></div>

Location in Admin Panel (Layout): NewsTicker

2) Featured Widgets

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

1) Please putt the below code in each featured widget above. Except FeaturedXLarge-2

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

2) In featured FeaturedXLarge-2 putt the below slider code.

<div class="tl-recentMag tl-postCarousel topCar" data-label="Gallery" data-results="6"></div>

Recomended Location in Layout: FeaturedXLarge-2
In this widget Do not: add any title in HTML/Javascript Widget.

Note

You can add this slider only one time in widget of your choice in layout.

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

So, get started With Main section Widgets.

1. Recet Post Headline

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

Note: You can put this widget in any of the below mentioned locations in layout.

Location (s) in Admin Panel (Layout): TabContent-1,TabContent-2,TabContent-3,TabContent-4,TopWidgets-S1,TopWidgets-S3,BottomWidgets-S1 and BottomWidgets-S3
In this widget Do not: add any title in HTML/Javascript Widget.

2. Recent Post Big Gallery

<div class="tl-recentMag tl-galleryMag" data-label="Entertainment" data-results="10"></div>

Note: You can put this widget in any of the below mentioned locations in layout.

Location (s) in Admin Panel (Layout):FullWidthWidget-Top,FullWidthWidget-Bottom,FeaturedSlider-1
In this widget Do not: add any title in HTML/Javascript Widget.

3. Recent Post News

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

Note: You can put this widget in any of the below mentioned locations in layout.

4. recent Post Gallery

<div class="tl-recentMag tl-recentGallery" data-label="Gallery" data-results="8"></div>

Note: You can put this widget in any of the below mentioned locations in layout.

5. Recent Post carousel

<div class="tl-recentMag tl-postCarousel topCar" data-label="Gallery" data-results="6"></div>

Recomended Location in Layout: FeaturedXLarge-2

Note: You can put this widget in any of the below mentioned locations in layout.

Location (s) in Admin Panel (Layout): TopWidgets-S1,TopWidgets-S3,BottomWidgets-S1 and BottomWidgets-S3
In this widget Do not: add any title in HTML/Javascript Widget.

Note

You can add this slider only one time in widget of your choice in layout.

6. Recent Post Col

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

Note: You can put this widget in any of the below mentioned locations in layout.

Location (s) in Admin Panel (Layout): TopWidgets-S2L, TopWidgets-S2R, BottomWidgets-S2L, BottomWidgets-S2R,sidebarWidgets-S1,sidebarWidgets-S2
In this widget Do not: add any title in HTML/Javascript Widget.

7. Recent Post Col Simple

<div class="tl-recentMag tl-recentPost" data-label="Gallery" data-results="5"></div>

Note: You can put this widget in any of the below mentioned locations in layout.

8. Recent Post

<div class="tl-recentMag tl-recentSimple" data-results="5"></div>

Note: You can put this widget in any of the below mentioned locations in layout.

Location (s) in Admin Panel (Layout): SidebarWidgets-S1, SidebarWidgets-S2, Footer1, Footer2, Footer3

9. Random Post

<div class="tl-recentMag tl-randomSimple" data-results="5"></div>

Note: You can put this widget in any of the below mentioned locations in layout.

Location (s) in Admin Panel (Layout): SidebarWidgets-S1, SidebarWidgets-S2, Footer1, Footer2, Footer3

10. Recent Comment

<div class="tl-recentMag tl-recentComments" data-results="5"></div>

Note: You can put this widget in any of the below mentioned locations in layout.

Location (s) in Admin Panel (Layout): SidebarWidgets-S1, SidebarWidgets-S2, Footer1, Footer2, Footer3

11. Full width carousel slider

<div class="tl-postCarousel-F fouritem" data-label="Gallery" data-results="8"></div>

Note: You can put this widget in any of the below mentioned locations in layout.

Location (s) in Admin Panel (Layout): FooterSlider,FeaturedSlider-1, FullWidthWidget-Top, FullWidthWidget-Bottom
In this widget Do not: add any title in HTML/Javascript Widget.

Note

You can add this carousel post widget only one time in the best widget location of your choice.

12. Sidebar social

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

Note: You can put this widget in any of the below mentioned locations in layout.

Location (s) in Admin Panel (Layout): SidebarWidgets-S1, SidebarWidgets-S2

13. Search Widget

<form action="/search" class="SearchForm" method="get">
<input class="SearchText" name="q" onblur="if (this.value == '') {this.value = 'Type Keywords Here...';}" onfocus="if (this.value == 'Type Keywords Here...') {this.value = '';}" placeholder="Type Keywords Here..." type="text" value="Type Keywords Here..." />
<button type="submit"><i class="fa fa-search"></i></button>
</form>

14. Footer Social Icons

<div class="top-social">
<ul class="tl-social-icons icon-flat 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-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 (Layout): FooterSocialIcons
In this widget Do not: add any title in HTML/Javascript Widget.

Note

In this social widget if you need the colored social icons then please change the <ul class="tl-social-icons with<ul class="tl-colored-social

15. Contact form Popup

<div class='tl-contactpop'><i class="fa fa-envelope-o"></i> Contact Us</div>

Best Location: FooterContactPopup
In this widget Do not: add any title in HTML/Javascript Widget.

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>

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>

Let’s take a look at the shortcodes provided by this template.

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="MagPress-banner-728×90" /></a>
</div>

replace # with link and image URL respectively.
Best Location(s) for ad banner: TopWidgets-S1,TopWidgets-S3,BottomWidgets-S1, BottomWidgets-S3,FullWidthWidget-Top,FullWidthWidget-Bottom

Let’s take a look at the other elements provided by this template.

1) MagPress 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 /* Comment Settings */ OR /* MagPress Template Options */ to find the below code/


/* Comment Settings  */
var facebookComments=true; // Change to false to hide facebook comment
var disqusComments=true; // Change to false to hide disqus comment
var DISQUS_SHORT_NAME='demoblog12'; // Change demoblog12 with your disqus user Name

/* MagPress Template Options  */
var RecentTab1= 'Technology';
var RecentTab2= 'Fashion';
var RecentTab3= 'Gaming';
var RecentTab4= 'Culture';
var SidebarTab1= '<i class="fa fa-rss"></i> Recent';
var SidebarTab2= '<i class="fa fa-thumbs-up"></i> Popular';
var SidebarTab3= '<i class="fa fa-comment"></i> Comment';

Just replace the tab text and other text with your own. For example Technology can be changed with Music etc.

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.

2) Boxed and Full width Template

By default, this template is boxed but you can make it full width with just a single code
so, if you are interested in full width template then go to your blogger dashboard >> Template >> Click Edit HTML and click anywher in the template and then press CTRL+F to find the below code

#outer-wrapper,.inner{max-width:$(content.width);}

Just remove the #outer-wrapper, from the above code and click save. The final code will look like the code below:

.inner{max-width:$(content.width);}

Now, enjoy the full width Magpress :)

3) Ad, post description and recent post below post title

You can configure the ad and recent posts by follwing the below descripton.

Ad Below Post Title

To show ad below each post title Search for the following code.
Go to template >> Edit HTML and click anywhere in the code and then press CTRL+F and find the below code

<!-- Ad Below Post title -->

Just Below the above code/comment add your adsense or banner ad.

4) Recent or Random Posts Below Post Title

There are two options to choose for posts that show to the right side of ad. You can specify recent or random posts with just a single code.
Go to template >> Edit HTML and click anywhere in the code and then press CTRL+F and find the below code

<div class='tl-topromote tl-recentSimple' data-results='5'/>

By default we have set the recent post but if you want to change recent to random then in the above code just replace the tl-recentSimple with tl-randomSimple.
You can change the data-results='5' with any number but 5 is recommended and it is default.

5) 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>

6) Related Posts

Change the related posts results to be show below each post by the following code.
Go to template >> Edit HTML and click anywhere in the code and then press CTRL+F and find the below code

var relatedPosts=6;

Change 6 to any number you want.

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 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.

8) Sticky Sidebar

You can change the below settings regarding sticky/floating sidebar according to your need.
Go to template >> Edit HTML and click anywhere in the code and then press CTRL+F and find the below code

$.stickysidebarscroll("#floatSidebar",{offset: {top: 10, bottom: 816}});

By default the top and bottom offset are 10and 816 respectively. You can change these valuse according to your need.

9) Template Designer

MagPress comes with complete support of blogger template designer . You can change the color , Adjust width and change the backgrounds easily with a single click.
MagPress is highly customizable theme into light , dark or any color that you like the most can apply to MagPress.

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.

Go to template >> click customize and click on advance
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
Now, click on the Main colors and change the colors of your choice and click apply to blog
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..

Here is the list of the awesome resources we used to create this template.

Pages

Blogger Template: Suitable for Magzine, news, blog and multipurpose blog.

Blogger Template: Suitable for Magzine, news, blog and multipurpose blog.

Meta Tags Setting

Options

Options

Header SEO

Header SEO

Options

Top Menu

1) Top Menu Bar

1. Page Menu

2. social icons

2) Logo options and Header Ad

Note

3) DropDown Navigation Menu

Setting up the main menu:

Recent posts in menu

Widgets

Note

1) News Ticker

2) Featured Widgets

Note

3) Main Section Widgets

1. Recet Post Headline

2. Recent Post Big Gallery

3. Recent Post News

4. recent Post Gallery

5. Recent Post carousel

Note

6. Recent Post Col

7. Recent Post Col Simple

8. Recent Post

9. Random Post

10. Recent Comment

11. Full width carousel slider

Note

12. Sidebar social

13. Search Widget

14. Footer Social Icons

Note

15. Contact form Popup

Sitemap

Contact Form

Shortcodes

Buttons

Button style 1

Button style 2

Button style 3

Alert Boxs

Code Boxs

Tabs And Accordion

Tabs

Accordion

Drop Caps

Dropcap style 1

Dropcap style 2

Dropcap style 3

List Style

List style 1

List style 2

List style 3

List style 4

Column

1 column

2 columns

3 columns

4 columns

Ad Banner

Theme Settings

1) MagPress Template Options

Facebook Comment Setting

2) Boxed and Full width Template

3) Ad, post description and recent post below post title

Ad Below Post Title

4) Recent or Random Posts Below Post Title

5) Full width Page

6) Related Posts

7) Author Box

8) Sticky Sidebar