DOCUMENTACION VOGUE

Version: 1.0 | Dated: 5 Jan 2016

• Get Support
• Themes
• Contact

• Start
  • Installation
  • Blogger Setting
  • Solve Undefined Problem
  • Top Navigation Pages
  • Setting Up Meta Tags
  • Social Footer Links
  • Setting Up main Blog Setting
  • Setting Up Navigation Menu
  • Setting Up Featured Slider
  • Custom Featured Widget
  • Custom Featured/Random Post Widget
  • Instagram Widget
  • Jet SEO Tools

Thank you for Downloading my template. Please Read the documentation carefully, If you still have any problem contact me at http://www.bthemez.com. Thanks so much
Follow the steps below to get started with your Site Template:

1. Backup & Uploading

1. Unzip the Template.zip file.
2. On Blogger Dashboard Click Template.
3. Click on Download Full Template to keep your old template.
4. Click Browse... button. Find where the “Memento-premium.xml” file location.
5. Then Click Upload.
6. Edit mobile Preveiw. (follow images).

Blogger Setting

After installing the theme, there are minimun settings to make all widgets work fine in this template.

2. Blog Feed

1. On Blogger Dashboard Click Settings.
2. Click Other.
3. In Site Feed > Allow Blog Feed Choose Full.
4. Then Click Save settings.

Undefined undefined Problem

2. Date undefined problem

1. On Blogger Dashboard Click Settings.
2. Click Language and formatting.
3. change Time Stamp > only Choose mm/dd/yyyy.
4. Then Click Save settings.

Setting Main Blog Part

On Blogger Dashboard Click Layout.
Click Edit on Blog Posts Widget.
Change it to look like that image.
Click Save.

Top Navigation Pages

On Blogger Dashboard Click Layout .
Click Edit on pages.
and just click on external link and add the links
Click Save.

Setting Up Meta Tags

For SEO Purpose, Meta Tags are very important for your site. Search robots use this tags to index better and display better on search result.
If you don't know what these tags are and how you can use it in theme. Just follow this simple guide, we recommend you to use free online tool like Jetseotools.com to generate your Meta tags.

1. It's very simple, all you have to do is visit the link above and fill all the necessary details that describes your site and what keyword you want.
2. Click Generate Meta tags.
3. Copy all generated code & paste in your template head section. we have leave the space for that.
4. Then Click Save Template.

Social Footer Links

On Blogger Dashboard Click Template .
Click Edit Edit HTML.
and just click on Jump Widget and Click on PageList1
Click Save.

1. Once you find just replace the our link with your social link

Adding Navigation Menu

On Blogger Dashboard Click Layout.
Click Edit on Menu Widget.
and add the following code
Click Save.

<div class="menu-container" id="sticky">
    <div class="container">
        <div class="sixteen columns">

            <!-- Navigation List -->
            <div class="table">
                <nav id="primary_nav_wrap">
                    <ul class="bt-nav navlist submenu">
                        <li><a href='/'>Home</a></li>

  <li><a href='http://vogue-bthemez.blogspot.in/'>Pages</a>
              <ul class="submenu"><li><a href='http://vogue-bthemez.blogspot.in/p/about.html'>About us</a></li>
<li><a href='#'>Page 1</a></li>
</ul>
</li>

<li class='megamenu col-no'><a href='#'>MegaMenu</a><!-- Megamenu Starts-->
                <script class='java' type='text/javascript'>//<![CDATA[
                  var numposts = 4;
                  var outerclass = "sub-menu";
var starttags = "<li class='menu-small-post col-3-12'>";
                  var endtags = "</li>";
                  var intag = "div";
                  //]]>
                </script>
                <script class='java' src='/feeds/posts/default/-/fashion?alt=json-in-script&callback=labelthumbs' type='text/javascript'></script>
              </li><!-- Megamenu Ends-->


<li class='megamenu col-no'><a href='#'>Fashion</a><!-- Megamenu Starts-->
                <script class='java' type='text/javascript'>//<![CDATA[
                  var numposts = 4;
                  var outerclass = "sub-menu";
var starttags = "<li class='menu-small-post col-3-12'>";
                  var endtags = "</li>";
                  var intag = "div";
                  //]]>
                </script>
                <script class='java' src='/feeds/posts/default/-/featured?alt=json-in-script&callback=labelthumbs' type='text/javascript'></script>
              </li><!-- Megamenu Ends-->


              <li><a href='#'>Categories</a>
                <ul class='sub-menu'>
                  <li><a href='http://vogue-bthemez.blogspot.in/search/label/featured'>Featured</a></li>
<li><a href='http://vogue-bthemez.blogspot.in/search/label/fashion'>Fashion</a></li>
                  
                </ul>
              </li>
              <li><a href='#'>Contact Us</a></li>
              
                              </ul>

           
            
            </nav>
        </div>

    </div>
</div></div>

Follow the steps shown in video. Below code is just for MegaMenu.It's a simple li markup. all you have to do is just simply copy the below code and paste it in menu code.

<li class='megamenu col-no'><a href='#'>Fashion</a><!-- Megamenu Starts-->
                <script class='java' type='text/javascript'>//<![CDATA[
                  var numposts = 4;
                  var outerclass = "sub-menu";
var starttags = "<li class='menu-small-post col-3-12'>";
                  var endtags = "</li>";
                  var intag = "div";
                  //]]>
                </script>
                <script class='java' src='/feeds/posts/default/-/featured?alt=json-in-script&callback=labelthumbs' type='text/javascript'></script>
              </li><!-- Megamenu Ends-->

How to change header social links

1. On Blogger Dashboard Click Template.
2. Press Ctrl+F or Command +f
3. Then Search for

   <div id='top-social'>

you'll see code something like this :

<div id='top-social'>

    <a href='http://facebook.com/bthemez' target='_blank'><i class='fa fa-facebook' /></a>
    <a href='http://twitter.com/bthemez' target='_blank'><i class='fa fa-twitter' /></a>
    <a href='http://instagram.com/bthemez' target='_blank'><i class='fa fa-instagram' /></a>
    <a href='http://pinterest.com/bthemez' target='_blank'><i class='fa fa-pinterest' /></a>
    <a href='http://bloglovin.com/bthemez' target='_blank'><i class='fa fa-heart' /></a>
    <a href='http://plus.google.com/bthemezsite' target='_blank'><i class='fa fa-google-plus' /></a>
</div>

Just change the href part of link according to your need.

Adding Featured Slider

1. On Blogger Dashboard Click Layout.
2. Click Add a Gadget.
3. Choose HTML/Javascript.
All you have to do is just add the "featured" (Without quotes ) in featured slider widget and you must have label of named featured for the post you want to show in slider.Please follow the screenshots below:

Step 1: Click on Edit Step 2: Add The word Featured in Widget Step 3: Add The label in your post named "featured"

Custom Widget On HomePage - Featured/Recent From Label

This Custom widget will work as featured/recent from label. Meaning It will fetch the latest post from any label of your blog.

1. On Blogger Dashboard Click Layout.
2. Click Box7 widget Section and edit the widget to add any label name there
First You have to choose which label you want to show in the widget section

Step 1: Click on Edit Step 2: Add Any Label in Widget Step 3: Choose any label you want. It is case sensative so make sure both label name in widget and in post must be same.

Custom Random Widget On HomePage/Recent From Label

In This section you can show two types of post 1. Random ( It will choose post randomly) and 2. Recent Post from label.
If you add the same code in sidebar then it will show the post in slider.

1. On Blogger Dashboard Click Layout.
2. Click Box8 widget Section and edit the widget and add the following code
Like I said earlier you can show two types of post in this section.

Step 1: Click on Edit on box 8 Widget Step 2: Add the following code for random post

<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" 
type="text/javascript"></script>

OR
In the same widget you can show recent post from label as well like BOX7 widget.
Step 1: Click on Edit on box 8 Widget Step 1: Click on Edit on box 8 Widget Step 2: Add The Following code in widget

<script src="/feeds/posts/default/-/featured?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=mythumb3"></script>

Step 3: Choose any label you want. It is case sensative so make sure both label name in widget and in post must be same. Step 4: Replace the word featured and add any label name there.

Adding Instagram widget

1. On Blogger Dashboard Click Layout.
2. Click Add a Gadget.
3. Choose HTML/Javascript.
4. Copy the following Code:




<div class='dark-wrapper'>   
         
<h3 class='section-title'>Follow @ Bthemez</h3>  
 
           
      <div class='cf'/>    
      <ul id='instafeed' class='insta-slick'>   
</ul>   
</div> 

<script type='text/javascript'>//<![CDATA[   
  
   $(document).ready(function(){
var feed = new Instafeed({ 
 get: 'user',   
 userId: 201616071,   
  limit:14,   
  sortBy:'random',  
  accessToken: '201616071.1677ed0.6137f81dad984a2a8dfb91c1821fd845', 
   after: function () {
     
     var owl = $('.insta-slick');
     owl.slick({
  dots: false,
  infinite: false,
  speed: 300,
prevArrow: '<button type="button" class="slick-nav slick-prev"><i class="fa fa-angle-left"></i></button>',
 nextArrow: '<button type="button" class="slick-nav slick-next"><i class="fa fa-angle-right"></i></button>',
  arrows:true,
  slidesToShow: 7,
  slidesToScroll: 2,
autoplay: true,
draggable:true,
infinite:true,
  autoplaySpeed: 3500,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
});

},
  
  
  template: '<li><a href="{{link}}" target="_blank"><img src="{{image}}" /></a></li>',   
 resolution: 'standard_resolution'   
 });   
 feed.run();   

 });
//]]>   
</script></div>









Note	just change the # with your instagram url
Generate Access Token	you need access token for instagram widget to work Go to this url-> http://instagram.pixelunion.net/ Generate access token
Sign In and Follow the steps	Then You'll be given an access token like this 1531863919.1677ed0.23d238bc564249e799095d060c750218
Follow The next step	Add Instagram User ID:

Instagram For Sidebar

For Sidebar Instagram Use the Code below. Above won't work in sidebar


<ul id='instaside'>   
</ul>   


<script type='text/javascript'>//<![CDATA[   
  
   $(document).ready(function(){
var instaside = new Instafeed({ 
 get: 'user',   
 userId: 201616071,
target:'instaside',  
  limit:9,   
  sortBy:'random',  
  accessToken: '201616071.1677ed0.6137f81dad984a2a8dfb91c1821fd845',
  template: '<li><a href="{{link}}" target="_blank"><img src="{{image}}" /></a></li>',   
 resolution: 'standard_resolution'   
 });   
 instaside.run();   

 });
//]]>   
</script>

Mailchimp Subscription Newsletter

This is Widget for Mailchimp Subscription

which will allow you to easily increase your subscription and send awesome email to your user for free.
If you don't wish to use this widget then do not add the following code.

1. On Blogger Dashboard Click Layout.
2. Click Mailchimp widget Section and edit the widget and add the following code

Step 1: Click on Edit on mailchimp Widget
Step 2: Add the following code for Subscription form

<div class='post_author'>
<!-- Begin MailChimp Signup Form -->
  

<h3 class='heading-border'><span>Join Our Madness- MailChimp Newsletter!</span></h3>
  <p>Join with Thousands Of Subscribers ! Get Our Latest Articles Delivered to Your email Inbox!</p>

<div id='mc_embed_signup'>
<form action="//bthemez.us8.list-manage.com/subscribe/post?u=1afddba24ae932c8dcadfeb1d&id=37420218d4" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
    <div id='mc_embed_signup_scroll'>
	
	<input class='email' id='mce-EMAIL' name='EMAIL' placeholder='email address' type='email' value=''/>
    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div aria-hidden='true' style='position: absolute; left: -5000px;'><input name='b_e7fd30673f6532475252841f7_7d8c36f9d2' tabindex='-1' type='text' value=''/></div>
<input class='button' id='mc-embedded-subscribe' name='subscribe' type='submit' value='Subscribe'/></div>
   
</form>
</div>


<div class='clear'/>
</div></div>

You can setting and read more about mailchimp form here: Mailchimp Signup Form

Step 1: Sign In mailchimp account & Create List First
Step 2: Copy All the code and paste it any notepad first and then copy the highlighted part and replace with ours.

Jet SEO Tools

The collection of free SEO tools for website, you can generate meta description and meta keywords from these free tools and integrate in your template. - Click Here To Use These Tools

Copyrights © 2014 All Rights Reserved by Bthemez