Allure | Documentation [ Bthemez.com ]

• Header Logo.
• Pages
• Featured Slider
• Instagram

1. Setting Main Blog Part

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

2. Navigation Menu

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

<div class='menu-container' id='sticky'>     
<nav class='nav-collapse' id='primary_nav_wrap'> 
<ul> 
  <li><a href='#'>Home</a></li> 
  <li><a href='#'>Menu 1</a>
    <ul> 
      <li><a href='#'>Sub Menu 1</a></li>
      <li><a href='#'>Sub Menu 2</a></li>
      <li><a href='#'>Sub Menu 3</a></li>
      <li><a href='#'>Sub Menu 4</a>
        <ul> 
          <li><a href='#'>Deep Menu 1</a>
            <ul> 
              <li><a href='#'>Sub Deep 1</a></li>
              <li><a href='#'>Sub Deep 2</a></li>
              <li><a href='#'>Sub Deep 3</a></li>
                <li><a href='#'>Sub Deep 4</a></li>
            </ul> 
          </li> 
          <li><a href='#'>Deep Menu 2</a></li>
        </ul> 
      </li> 
      <li><a href='#'>Sub Menu 5</a></li>
    </ul> 
  </li> 
  <li><a href='#'>Menu 2</a>
    <ul> 
      <li><a href='#'>Sub Menu 1</a></li>
      <li><a href='#'>Sub Menu 2</a></li>
      <li><a href='#'>Sub Menu 3</a></li>
    </ul> 
  </li> 
  <li><a href='#'>Menu 3</a>
    <ul> 
      <li class='dir'><a href='#'>Sub Menu 1</a></li>
      <li class='dir'><a href='#'>Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?</a> 
        <ul> 
          <li><a href='#'>Category 1</a></li>
          <li><a href='#'>Category 2</a></li>
          <li><a href='#'>Category 3</a></li>
          <li><a href='#'>Category 4</a></li>
          <li><a href='#'>Category 5</a></li>
        </ul> 
      </li> 
      <li><a href='#'>Sub Menu 3</a></li>
      <li><a href='#'>Sub Menu 4</a></li>
      <li><a href='#'>Sub Menu 5</a></li>
    </ul> 
  </li> 
  <li><a href='#'>Menu 4</a></li>
  <li><a href='#'>Menu 5</a></li>
  <li><a href='#'>Menu 6</a></li>
  <li><a href='#'>Contact Us</a></li> 
</ul> 
</nav> 

  </div>

3. Featured Slider

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

featured

4. 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'>  
        <div class='container inner'>  

<h3 class='section-title'><img src="http://webagate.com/demos/alia/loop-one-page-multipurpose-website-template/light-version/images/instagram/instagram.png"/></h3>  
          
      <div class='clear'/>  
      <ul id='instafeed'/>  
</ul></div>  
</div></div>  

<script type='text/javascript'>//<![CDATA[  

var feed = new Bthemezinsta({  
 get: 'user',  
 userId: 1531863919,  
  limit:8,  
  sortBy:'random',  
accessToken: '1531863919.1677ed0.23d238bc564249e799095d060c750218',  
  template: '<li><a href="{{link}}" target="_blank"><img src="{{image}}" /><div class="likes">&hearts; {{likes}}</div></a></li>',  
 resolution: 'standard_resolution'  
 });  
 feed.run();  


//]]>  
</script>

5. Footer Widgets

• Author widget
• facebook

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

<div class="post-thumb clearfix"> 
    <figure class="featured-thumbnail thumbnail large"> 
        <div class="hider-page" style="display: none;"></div> 
        <a class="image-wrap image-popup-no-margins" href="http://3.bp.blogspot.com/-3cJ3ohL992U/VEEKvsr7gQI/AAAAAAAABRo/7qs6ukK76Y4/s1600/16450962391.jpg" data-rel="Photo"> 
            <img src="http://3.bp.blogspot.com/-3cJ3ohL992U/VEEKvsr7gQI/AAAAAAAABRo/7qs6ukK76Y4/s1600/16450962391.jpg" alt="photo" /> 
            <span class="zoom-icon"></span> 
        </a> 
    </figure> 
    <div class="clear"></div> 
</div> 
<p>Hi, I am the author Allure Blog.This blog is to provide you with daily outfit ideas and share my personal style.</p>

Image Url	Change the image url
Description	Change the description of yours

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

<script type="text/javascript">
var nopost = 10;
</script>
<script src="/feeds/posts/default/-/LABEL_NAME?alt=json-in-script&amp;callback=galposts"></script>

LABEL_NAME	Change it with the label name of posts to be shown.
numpostsq	Number of posts to be shown. It must be lower or equal to the number of posts that have the label name.

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

Go to this url Facebook Like Box

Facebook Page Url	Add Your FB Url in box
Color Scheme	Choose light color scheme

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

<script type="text/javascript">
var nopostb = 5;
</script>
<script src="/feeds/posts/default/-/LABEL_NAME?alt=json-in-script&amp;callback=blockposts"></script>

LABEL_NAME	Change it with the label name of posts to be shown.
nopostb	Number of posts to be shown. It must be lower or equal to the number of posts that have the label name.

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

<script type="text/javascript">
var nopostr = 5;
</script>
<script src="/feeds/posts/default?alt=json-in-script&amp;callback=recentposts"></script>

nopostr

Number of posts to be shown. It must be lower or equal to the number of posts in your blog.

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

<div id="random-posts">

<script style="text/javascript">
 var numposts_gal = 4;
</script>

<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=99"></script>
</div>

numposts_gal

Number of posts to be shown.

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

<div id="comments-container"></div>
<script>
var cm_config = {
ct_id: "comments-container",
max_result: 5
};
</script>

max_result

Number of recent comments to be shown.

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

<script type="text/javascript">
var numpostso = 4;
var classo = "gallery_widget gallery_widget_posts owl-carousel owl-theme";
var ido = "footer_carousel";
</script>
<script src='/feeds/posts/default/-/slideshow?alt=json-in-script&amp;callback=ocarousel' type='text/javascript'/></script>

slideshow	Add This label name to posts you want them to be shown.
numpostso	Number of posts to be shown. It must be lower or equal to the number of posts that have the label name slideshow.

5. Social Icons

 <ul class='soc-icons-header'> 
    <li> 
        <a href='http://twitter.com/bthemez' target='_blank'><i class='fa fa-twitter' /> 
        </a> 
    </li> 
    <li> 
        <a href='http://facebook.com/bthemez' target='_blank'><i class='fa fa-facebook' /> 
        </a> 
    </li> 
    <li> 
        <a href='http://www.instagram.com/bthemez' target='_blank'><i class='fa fa-instagram' /> 
        </a> 
    </li> 
    <li> 
        <a href='http://www.youtube.com/bthemez' target='_blank'><i class='fa fa-play' /> 
        </a> 
    </li> 
    <li> 
        <a href='http://pinterest.com/bthemez' target='_blank'><i class='fa fa-pinterest' /> 
        </a> 
    </li> 
    <li> 
        <a href='http://plus.google.com/+bthemezsite' target='_blank'><i class='fa fa-google-plus' /> 
        </a> 
    </li> 
</ul>

1. Slider Setting

This is the slider setting used in Allure theme. There are many possibilities with the slider you can change it's look and design with just few changes. So choose whatever you feel would be the best for your blog

This is the setting i have used in demo, You can change it according to your need.

Demo Slider

1. On Blogger Dashbord Click Template.
2. Click Edit HTML.
3. Click Ctrl + F and Search for the following Code in the bottom



  <script type='text/javascript'>//<![CDATA[ 

$(document).ready(function(){ 
     


var slider1 = new skewSlider('#main-slider', { 
height: 450, 
imgAlign: 'xMidYMid slice', 
slidePercent: 60, 
visibleSiblings: 1, 
navigationArrows: false, 
siblingsNavigation: true, 
navigationDots: false,  
slideShow: 5000,  
navigationArrows: true, 
slideMargin: 0, 
skew:-15, 

breakpoints: { 
                          tablet: { 
                              maxWidth : 1024, 
                              slidePercent : 60, 
                            height:350, 
                              showCaption: false, 
                            skew:0 
                               
                          }, 
                          phone: { 
                              maxWidth : 600, 
                              slidePercent : 70, 
                            height:300, 
                            skew:0 
                               
                          } 
                      } 

}); 



  }); 
     

//]]> 
</script>




4. Click Save template.

2. SLider display setting 2

This is the another setting, you need to replace the above code with the following(below) one.

Demo Slider

1. On Blogger Dashbord Click Template.
2. Click Edit HTML.
3. Click Ctrl + F and Search for the following Code in the bottom



  <script type='text/javascript'>//<![CDATA[ 

$(document).ready(function(){ 
     


var slider1 = new skewSlider('#main-slider', { 
height: 450, 
imgAlign: 'xMidYMid slice', 
slidePercent: 40, 
visibleSiblings: 2, 
navigationArrows: false, 
siblingsNavigation: true, 
navigationDots: false,  
slideShow: 5000,  
navigationArrows: true, 
slideMargin: 0, 
skew:-15, 

breakpoints: { 
                          tablet: { 
                              maxWidth : 1024, 
                              slidePercent : 60, 
                            height:350, 
                              showCaption: false, 
                            skew:0 
                               
                          }, 
                          phone: { 
                              maxWidth : 600, 
                              slidePercent : 70, 
                            height:300, 
                            skew:0 
                               
                          } 
                      } 

}); 



  }); 
     

//]]> 
</script>




4. slidePercent: To increase or decrease the image width in slider.
5. Click Save template.

3. SLider display setting 3

This is the another setting, you need to replace the above code with the following(below) one.

Demo Slider

1. On Blogger Dashbord Click Template.
2. Click Edit HTML.
3. Click Ctrl + F and Search for the following Code in the bottom



  <script type='text/javascript'>//<![CDATA[ 

$(document).ready(function(){ 
     


var slider1 = new skewSlider('#main-slider', { 
height: 450, 
imgAlign: 'xMidYMid slice', 
slidePercent: 60, 
visibleSiblings: 1, 
navigationArrows: false, 
siblingsNavigation: true, 
navigationDots: false,  
slideShow: 5000,  
navigationArrows: true, 
slideMargin: 0, 
skew:0, 

breakpoints: { 
                          tablet: { 
                              maxWidth : 1024, 
                              slidePercent : 60, 
                            height:350, 
                              showCaption: false, 
                            skew:0 
                               
                          }, 
                          phone: { 
                              maxWidth : 600, 
                              slidePercent : 70, 
                            height:300, 
                            skew:0 
                               
                          } 
                      } 

}); 



  }); 
     

//]]> 
</script>




4. slidePercent: To increase or decrease the image width in slider.
5. Click Save template.

More SLider Setting

Like i said there are many possibilities with slider, Following are the few setting that'll give you knowledge about the options available with the slider.

You can change the only color of the template using blogger template designer.

Go to Blogger Dashboard -> Template -> Customize and then advance

Change the color value here and link color can also be change