Backpack- Clean & Responsive Traveling 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: Best 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 “Backpack-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 )

 

 

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 add link to your categories.

3. Setting Up The Top Social Menu

 

Screenshot_2

 

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

    1. On Blogger Dashboard
    2. And Click Layout
    3. Top Social Widget Click Edit button

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

top-social-1

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

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

Screenshot_5

 

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

side-so

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

top-social

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

Video Guide : –

6. Setup the Slider

 

Slider Works automatically with the 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 of settings -> other -> blog feed.
  3. Your blog post has at least One label in your latest (5) posts.

At least one label example: Sport is just an example.

 

6. How To Set Date On Post

 

Screenshot_3

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

21

Save it

7. Widget

7.1 About Me

Screenshot_4

 

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

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

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

4. Save It

 

<div class="about-widget"><img alt="About Me" src="https://1.bp.blogspot.com/-DmPRDCbQC2A/WJoToqY-gPI/AAAAAAAAAL8/CMgWRh6OFVoy7elrJJWlL1dnOuMsrmrrQCLcB/s1600/about.jpg" / /><p>Aenean sollicitudin, lorem quis bibendum auctor, nisi elit conseat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amei.</p></div>

 

7.3 Instagram Widget

Screenshot_7

Access your blog Layout > click Edit link on Footer 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 class=’insta-wrap’>
<div class=’my-insta-box’>
<a class=’btn-style’ href=’https://www.instagram.com/stella_edward_wedding/?hl=en’ rel=’me’>FOLLOW ME @INSTAGRAM</a>
</div>
</div>
<ul id=’instafeed’ class=’insta-slick’>
</ul>

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

$(document).ready(function(){
var feed = new Instafeed({
get: ‘user’,
userId: 13371393773,
limit:14,
sortBy:’random’,
accessToken: ‘13371393773.1677ed0.3247ba96fbc54dac8e1b72c0bfb8b79d’,
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:false,
slidesToShow: 7,
slidesToScroll: 2,
autoplay: true,
draggable:true,
infinite:true,
autoplaySpeed: 1000,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
dots: false
}
},
{
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”><div class=”zoom-out-effect left”><div class=”img-box”><img src=”{{image}}” /></div></div></div></a></li>’,
resolution: ‘standard_resolution’
});
feed.run();

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

Generate your Instagram Access token by clicking on button from http://www.jetseotools.com/instagram

16

Now enter the access token here in Layout:

accesstoken

ALSO CHANGE THE USERID with yours to show your INSTAGRAM PHOTOS.

access

 

10. Theme Customization

Access your blog Template > click Customize.

Here you can change the background, and apply pre-defined colors

Clicking Advanced You will see the official option to change the Main Color

GCeJQD2

11. Top Navigation

 

Go to Blogger Dashboard > Layout > Navigation-wrapper > click on edit button > Edit Html

Put this Code with your Url’s 

<li>
<a href=”#” class=”destination”><img width=”24″ height=”20″ src=”https://1.bp.blogspot.com/-Us6GIgTEh-w/XVghuC-01TI/AAAAAAAAKoM/JyuNaEMPOmAaEbLr3i4L-rFDD6fCjtycQCLcBGAs/s1600/centred-with-logo-top-heder.png” class=”image wp-image-880 attachment-full size-full” alt=”o” style=”max-width: 100%; height: auto;” /><div> destinations </div></a>
<ul class=”sub-menu”>
<li>
<a href=”https://backpack-themexpose.blogspot.com/search/label/Paris” class=” destination 1″><span>UK </span></a>
</li>
<li>
<a href=”https://backpack-themexpose.blogspot.com/search/label/Canada” class=” destination 1″><span>Australia</span></a>
</li>
<li>
<a href=”https://backpack-themexpose.blogspot.com/search/label/Zlatibor” class=”destination1″><span>Italy</span></a>
</li>
<li>
<a href=”https://backpack-themexpose.blogspot.com/search/label/Paris” class=”destination1″><span>Spain</span></a>
</li>
<li>
<a href=”https://backpack-themexpose.blogspot.com/search/label/Canada” class=”destination1″><span>Serbia</span></a>
</li>
<li>
<a href=”https://backpack-themexpose.blogspot.com/search/label/Brazil” class=”destination1″><span>Brazil</span></a>
</li>
<li>
<a href=”https://backpack-themexpose.blogspot.com/search/label/Perth” class=”destination1″><span>Peru</span></a>
</li>
<li>
<a href=”https://backpack-themexpose.blogspot.com/search/label/India” class=”destination1″><span>India</span></a>
</li>
</ul>
</li>

 

Then Save It.

12. Left category

Go to Blogger Dashboard > Layout > Left-cat > click on edit button > Edit Html

Put this Code with your Url’s 

 

<div class=”Cat-child-position-left”>
<div class=”Cat-child–position-left-inner”>
<a itemprop=”url” href=”https://backpack-themexpose.blogspot.com/search/label/Brazil” target=”_self” rel=”noopener noreferrer”><div class=”widget_text mkdf-centered-logo-down-menu-left-widget”> <div class=”textwidget”><div style=”margin-top: 9px;”><div class=”Cat-iwt clearfix Cat-iwt -icon-top Cat-iwt -icon-medium”>
<div class=”Cat-iwt-icon”>

<img width=”62″ height=”59″ src=” https://1.bp.blogspot.com/-7q96BeBaDDA/XUQmGMfMc6I/AAAAAAAAKng/aws1I8lRggMzzoLBqru3nyEK8OOaymcgACLcBGAs/s1600/header-img-1.png ” class=”attachment-full size-full” alt=”a” />
</div>
<div class=” Cat-iwt -content” style=”padding-top: 0px”>
<p class=” Cat-iwt -text” style=”color: #232323;margin-top: 3px”>Get Inspired</p>
</div>
</div></div></div></div></a>

<a itemprop=”url” href=”https://backpack-themexpose.blogspot.com/search/label/Canada” target=”_self” rel=”noopener noreferrer”><div class=”Cat-iwt clearfix Cat-iwt -icon-top Cat-iwt -icon-medium”>
<div class=” Cat-iwt -icon”>

<img width=”62″ height=”59″ src=” https://1.bp.blogspot.com/-pJ5eCZM_Cys/XUQmSQKyGnI/AAAAAAAAKnk/BTuMPpl0NUQVSciedfwdwZgBYk5dpX4sgCLcBGAs/s1600/header-img-2.png ” class=”attachment-full size-full” alt=”a” />
</div>
<div class=” Cat-iwt -content” style=”padding-top: 0px”>
<p class=” Cat-iwt -text” style=”color: #232323;margin-top: 3px”>My Books</p>
</div>
</div></a></div>
</div>

Then Save It.

13. Right category

 

 

Go to Blogger Dashboard > Layout > Right-cat > click on edit button > Edit Html

 

Put this Code with your Url’s 

<div class=”Cat-child-position-right “>
<div class=” Cat-child –position-right-inner”>
<a itemprop=”url” href=”https://backpack-themexpose.blogspot.com/search/label/Paris” target=”_self” rel=”noopener noreferrer”><div class=”widget_text mkdf-centered-logo-down-menu-right-widget”> <div class=”textwidget”><div style=”margin-top: 1px;”><div class=” Cat-iwt clearfix Cat-iwt -icon-top Cat-iwt -icon-medium”>
<div class=” Cat-iwt -icon”>

<img width=”62″ height=”59″ src=” https://1.bp.blogspot.com/-sNIKkBpRP0Y/XUQmdRqqJCI/AAAAAAAAKno/gZ2LY3-CfgoGAOXyKcc2taSFdQJaapUWgCLcBGAs/s1600/header-img-3.png” class=”attachment-full size-full” alt=”a” />
</div>
<div class=” Cat-iwt -content” style=”padding-top: 0px”>
<p class=” Cat-iwt -text” style=”color: #232323;margin-top: 3px”>Travel Guides</p>
</div>
</div></div></div></div></a>

<a itemprop=”url” href=”https://backpack-themexpose.blogspot.com/” target=”_self” rel=”noopener noreferrer”>
<div class=” Cat-iwt clearfix Cat-iwt -icon-top Cat-iwt -icon-medium”>
<div class=” Cat-iwt -icon”>

<img width=”62″ height=”59″ src=” https://1.bp.blogspot.com/-IAqYLKVLoo0/XUQmrlrhANI/AAAAAAAAKns/28QDXTT8rkgys81XIz8skq9pahaGQPnqgCLcBGAs/s1600/header-img-4.png ” class=”attachment-full size-full” alt=”a” />
</div>
<div class=” Cat-iwt -content” style=”padding-top: 0px”>
<p class=” Cat-iwt -text” style=”color: #232323;margin-top: 3px”>About Me</p>
</div>
</div></a></div>
</div>

Then Save It.

15. Top category

 

Go to Blogger Dashboard > Layout > Categories > click on edit button > Edit Html

 

 

Put this Code with your Url’s 

<p class=”category” style=”color: #838383;font-size: 18px;line-height: 34px;font-weight: 400;margin-top: 13px”>
We are That Backpacker, SARAH NELSON (that’s us!) </p>

<div class=”vc_empty_space” style=”height: 50px”><span class=”vc_empty_space_inner”></span></div>
<div class=”cat-destination-category-list-holder cat-grid-list cat-six-columns cat-normal-space”>
<div class=”category-bottom-inner cat-outer-space clearfix”>
<a itemprop=”url” class=”category-bottom-link” href=”https://backpack-themexpose.blogspot.com/search/label/Brazil”><article class=”category-bottom-item category-item-space”>

<div class=”category-bottom-item-inner”>
<div class=”category-bottom-image”>
<img width=”110″ height=”75″ src=” https://1.bp.blogspot.com/-sh0Se4cnHWA/XUQU5VMV4FI/AAAAAAAAKmo/R8_GB17gvds5-P4ErmcZAMqbfjWGd9FZQCLcBGAs/s1600/beach-category.png ” class=”attachment-full size-full” alt=”o” /> </div>
<div class=”category-bottom-text-holder”>
<div class=”category-bottom-text-wrapper”>
<div class=”category-bottom-text”>
<h4 itemprop=”name” class=”category-bottom-title entry-title”>Beaches</h4> <p class=”category-bottom-count”>4 destinations</p> </div>
</div>
</div>
</div></article></a>

<a itemprop=”url” class=”category-bottom-link” href=”https://backpack-themexpose.blogspot.com/search/label/United%20Kingdom”>
<article class=”category-bottom-item category-item-space”>
<div class=”category-bottom-item-inner”>
<div class=”category-bottom-image”>
<img width=”110″ height=”75″ src=”https://1.bp.blogspot.com/-rOFc7hSJgxA/XUQVNEKg2nI/AAAAAAAAKmw/IuTZFjOHxfALvdqlynZBd3Mgekf8Y2JzgCLcBGAs/s1600/dog-category.png ” class=”attachment-full size-full” alt=”o” /> </div>
<div class=”category-bottom-text-holder”>
<div class=”category-bottom-text-wrapper”>
<div class=”category-bottom-text”>
<h4 itemprop=”name” class=”category-bottom-title entry-title”>Dog-friendly</h4> <p class=”category-bottom-count”>2 destinations</p> </div>
</div>
</div>
</div>
</article></a>

<a itemprop=”url” class=”category-bottom-link” href=”https://backpack-themexpose.blogspot.com/search/label/Canada”>
<article class=”category-bottom-item category-item-space”>
<div class=”category-bottom-item-inner”>
<div class=”category-bottom-image”>
<img width=”110″ height=”75″ src=” https://1.bp.blogspot.com/-71j4I9N0WKM/XUQVdd4fIeI/AAAAAAAAKm4/rkDoUiIuza4Uh96fFTs30tYlNRZ9GiJIgCLcBGAs/s1600/restorant-category.png ” class=”attachment-full size-full” alt=”o” /> </div>
<div class=”category-bottom-text-holder”>
<div class=”category-bottom-text-wrapper”>
<div class=”category-bottom-text”>
<h4 itemprop=”name” class=”category-bottom-title entry-title”>Restaurants</h4> <p class=”category-bottom-count”>3 destinations</p> </div>
</div>
</div>
</div>
</article></a>

<a itemprop=”url” class=”category-bottom-link” href=”https://backpack-themexpose.blogspot.com/search/label/India”>
<article class=”category-bottom-item category-item-space”>
<div class=”category-bottom-item-inner”>
<div class=”category-bottom-image”>
<img width=”110″ height=”75″ src=” https://1.bp.blogspot.com/-Edzuu4KqD-o/XUQWpdTGOFI/AAAAAAAAKnE/oxHDvkp5Pf0QGc1dqP53NclakihbPOM7ACLcBGAs/s1600/night-category.png ” class=”attachment-full size-full” alt=”o” /> </div>
<div class=”category-bottom-text-holder”>
<div class=”category-bottom-text-wrapper”>
<div class=”category-bottom-text”>
<h4 itemprop=”name” class=”category-bottom-title entry-title”>Overnight</h4> <p class=”category-bottom-count”>3 destinations</p> </div>
</div>
</div>
</div>
</article></a>

<a itemprop=”url” class=”category-bottom-link” href=”https://backpack-themexpose.blogspot.com/search/label/Paris”>
<article class=”category-bottom-item category-item-space”>
<div class=”category-bottom-item-inner”>
<div class=”category-bottom-image”>
<img width=”110″ height=”75″ src=” https://1.bp.blogspot.com/-z7DCtHVjPAk/XUQW2C5aZOI/AAAAAAAAKnI/1bBoBDeEDaod-5sc27N5LyYyhIvgvVmNgCLcBGAs/s1600/camping-category.png ” class=”attachment-full size-full” alt=”o” /> </div>
<div class=”category-bottom-text-holder”>
<div class=”category-bottom-text-wrapper”>
<div class=”category-bottom-text”>
<h4 itemprop=”name” class=”category-bottom-title entry-title”>Camping</h4> <p class=”category-bottom-count”>3 destinations</p> </div>
</div>
</div>
</div>
</article></a>

<a itemprop=”url” class=”category-bottom-link” href=”https://backpack-themexpose.blogspot.com/search/label/Perth”>
<article class=”category-bottom-item category-item-space”>
<div class=”category-bottom-item-inner”>
<div class=”category-bottom-image”>
<img width=”110″ height=”75″ src=”https://1.bp.blogspot.com/-yiNwMrDbqzw/XUQXEFihQjI/AAAAAAAAKnQ/mGSoZfW3IgY7unBAJwigrsyjbG8tVd5TQCLcBGAs/s1600/low-budget-category.png ” class=”attachment-full size-full” alt=”o” /> </div>
<div class=”category-bottom-text-holder”>
<div class=”category-bottom-text-wrapper”>
<div class=”category-bottom-text”>
<h4 itemprop=”name” class=”category-bottom-title entry-title”>Low budget</h4> <p class=”category-bottom-count”>2 destinations</p> </div>
</div>
</div>
</div>
</article></a></div></div>

 

Then Save It.

 

Thank you.