Beautiful Blogger Template Installation Documentation, a step to step guide to help you out to set up your blog easy way.

First of all, Thank you for Downloading our template if you haven’t done yet you can get it from here: Beautiful Blogger Template. You check the live demo through the button below and also Please Read this documentation carefully in order to set up your blog and please note that there’s no support for free users.

We also Provide Blogger Template Installation Service. Our Installation service gives you a simple, quick and secure way of getting your template setup without hassle. We have created a service package that gives you everything you need to have your theme and your content setup in no time.

Live Demo   Installation service

Blogger Template Installation Steps:-

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 “Beautiful-xxxx-version.xml” file location.
  5. Then Click Upload.
  6. Edit mobile Preview. (follow images)

1-768x404

 

2. Blog Setting

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

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

 

4-768x481

 

3. Logo Setup

1. In your dashboard Select “Layout”.

2. Upload Your Logo Header : In You Blog (Header), Click on “Edit” and applicate all settings below :

10

 

4. Navigation Menu

  4.1 Menu Setup ( navigation-wrapper )

top-menu

To Edit Top Menu in this theme you can follow this step:

1. Go to -> Blogger Dashboard- >layout -> Top navigation- > press edit button.

2. Now choose ( check mark ) those pages you want to show on menu and press save. You can also add the external link just press ADD external Link and add you link then save it..

<iframe width=”850″ height=”450″ src=”https://www.youtube.com/embed/jTJFPhispoU” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

Go to Blogger Dashboard > Template > “Edit HTML”

Now Search the below mention code ( ctrl + f ), then replace the # with your navigation urls.

Main Navigation :

 

<nav class='pi-navigation' data-menu-responsive='992'>
          <div class='container'>

 <div class='open-menu'>
              <span class='item item-1'/>
              <span class='item item-2'/>
              <span class='item item-3'/>
            </div>
            <div class='close-menu'/>
            <ul class='navlist'>
              <li><a href='/'>Home</a></li>
              <li><a href='/p/about.html'>About us</a></li>
              <li><a href='#'>Drop Down</a>
                <ul class='sub-menu'>
                  <li><a href='/search/label/Shooter'>Minimal</a></li>
                  <li><a href='#'>Sub Menu with Subs</a>
                    <ul class='sub-menu'>
                      <li><a href='#'>Feminist</a></li>
                      <li><a href='#'>Persona</a></li>
                      <li><a href='#'>Expose</a></li>
                    </ul>
                  </li>
                  <li><a href='#'>Powergame</a></li>
                  <li><a href='#'>Fashion</a></li>
                </ul>
              </li>
              <li><a href='#'>Restaurant</a></li>
              <li class='megamenu col-5'><a href='#'>Mega menu</a>
                <script class='java' type='text/javascript'>//<![CDATA[
                  var numposts = 5;
                  var outerclass = "sub-menu";
                  var starttag = "<li>";
                  var endtag = "</li>";
                  var intag = "div";
                  //]]>
                </script>
                <script class='java' src='/feeds/posts/default?alt=json-in-script&callback=labelthumbs' type='text/javascript'/>
              </li>
              <li><a href='#'>Download</a></li>
            </ul>
 <div class='search-box'>
              <span class='icon-search'>
                <i class='fa fa-search'/>
              </span>
              <form action='/search' method='get'>
                <input name='q' type='search' value='Search and hit enter'/>
              </form>
            </div>
          </div>
        </nav>

 

5. MEGA MENU

In above you will see this below mention code , that is for MEGA MENU
<script class='java' type='text/javascript'>//<![CDATA[ 
var numposts = 5; 
var outerclass = "sub-menu"; 
var starttag = "<li>"; 
var endtag = "</li>"; 
var intag = "div"; 
//]]></script> 
<script class='java' src='/feeds/posts/default/-/LABEL?alt=json-in-script&callback=labelthumbs' 
type='text/javascript'/>

1. Change the word LABEL with your label for posts

2. Change the number “5” inside numposts = 5; with your needed number of posts

Page Navigation :

Go to Blogger Dashboard > Template > “Edit HTML”

Now Search the below mention code ( ctrl + f ), then replace the pageCount=9;(Post Per page) and displayPageNum=3;( No. of pages in page navigation)

 var pageCount=9;
var displayPageNum=3;
var upPageWord ="<i class='fa fa-angle-left'></i>";
var downPageWord ="<i class='fa fa-angle-right'></i>";


How to Set Date On Post

Go to Blogger Dashboard > Settings > Language and Formatting > Formatting > Timestamp Format > set it to date instead of time

Save it


Setup the Slider
Slider Works automatically with latest post.

But you need to make sure few things :

1. Your Blog Must be public from settings

2. Your Blog Feed Set to be full from settings -> other -> blog feed.

3. Your blog post has at least One label in you latest (5) posts.


6. Widget

About Me

1. Go to Blogger Dashboard > Layout > About me widget > click on edit button

2. Now copy the below mention code and paste into widget.

3. Change the image url with author image url, description, # with social url

4. Save It

<img src="http://1.bp.blogspot.com/-zpDNZacsDcI/VfBSCr_qORI/AAAAAAAAG6U/gHTIJ6z5_Sg/s1600/profile.jpg"/><h3>Jessica Jackson</h3><p>
A short description about yourself goes here. Lorem ipsum dolor sit amet. Adipisicing elit, sed do eiusmod tempor.</p>


Top Social widget

To Edit Top Social icons in this theme you can follow these steps:

    1. On Blogger Dashbord Click Layout
    2. Top Social Widget Click Edit button

 

Add your social media name and link >> ADD LINK >> Once you added all the links SAVE.

Use http:// or https:// where applicable.

AVAILABLE ICONS: Behance Facebook Twitter Bloglovin Dribbble Flickr GooglePlus Instagram Linkedin Pinterest Vimeo Youtube Vine Soundcloud Goodreads Deviantart Foursquare Reddit Tumblr Spotify Twitch Vk Mailto shop Rss Etsy


Sidebar Social widget

To Edit Sidebar Social icons in this theme you can follow these steps:

    1. On Blogger Dashbord Click Layout
    2. Sidebar Social Widget Click Edit button

Add your social media name and link >> ADD LINK >> Once you added all the links SAVE.

Use http:// or https:// where applicable.

AVAILABLE ICONS: Behance Facebook Twitter Bloglovin Dribbble Flickr GooglePlus Instagram Linkedin Pinterest Vimeo Youtube Vine Soundcloud Goodreads Deviantart Foursquare Reddit Tumblr Spotify Twitch Vk Mailto shop Rss Etsy

7.
Instagram Widget

1. Go to Blogger Dashboard > Layout > Instagram widget > click on edit button > Edit Html

2. Now copy the below mention code and paste into widget.

<div id='instafeed'/>


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

var feed = new Instafeed({
 get: 'user',
 userId: 10008029,
  limit:16,
  sortBy:'random',
accessToken: '1531863919.1677ed0.23d238bc564249e799095d060c750218',
template: '<li><a href="{{link}}" target="_blank"><img src="{{image}}" /><div class="insta-likes"><div style="display: table; vertical-align: middle; height: 100%; width: 100%;"><span style="display: table-cell; vertical-align: middle; height: 100%; width: 100%;">{{likes}} <i class="fa fa-heart"></i><br/>{{comments}} <i class="fa fa-comment"></i></span></div></div></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:


8. Mobile Version ( Responsive Design Option )

Mobile Responsive

After you apply mobile version for this template, Color changing option will not work. This is official bug of Blogger. So, please make sure, you used Color changing option before do this step.

As default, Blogger will use its own template for you blog on mobile. So if you want to use Fashion template on mobile devices, please enable it first.

Access your Template menu and click on Gear button of Mobile template.

In Choose mobile template window, check “No. Show desktop template on mobile devices.” option, then click Save button.

9. Top-banner

To start the top-banner carousel you just need to Blogger Dashboard > Layout >top-banner and put a label in the widget.

10. what’s new

To start the what’s new carousel you just need to Blogger Dashboard > Layout >top-banner and put a label in the widget.

11. bottom-banner

To start the what’s bottom-banner  you just need to Blogger Dashboard > Layout >top-banner and put a label in the widget.