How to Add Sticky Bar In Blogger

add sticky bar in blogger
One way of replacing your Blogger navigation bar is through adding a sticky bar on it.You can also add sicky bar in your blogger blog  if you want to show or notify  visitors of  recent and upcoming posts, offers, coupons or even  latest news and happenings. You can even add your RSS link there and ask you visitors to subscribe to your blog. Today, in this tutorial  we will create such a sticky bar widget with simple texts and image. See the demo first above to have an overview of what we are trying to accomplish.
add sticky bar in blogger


Make a Sticky Bar In Blogger


Step 1. Go To Blogger > Template > Edit HTML (have a back-up of it)
Step 2. Search for the code below,
]]></b:skin>
Step 3. Just above that code in Step 2, paste the CSS code below,
#btt-stickybar{
background:#158aee url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgohQA1YneFrQMXqBeEE24C1ZAvEOpxsPRA6MvXS_jZs5M1F8_YP_iPILKvNbyDsNk4dZ2xmFqPfawIKR720a19C7BC3oOG-rYT36sbKzlppxacAWLKS7MnAnPe4IyAnpNumKhN-b1ZoH8/s400/stickybar.png') repeat-x;
width:100%;
margin:0 auto;
text-align:center;
padding:0px 0;
border-bottom: 1px solid #888888;
  -moz-box-shadow: #666666 0px 1px 3px;
  -webkit-box-shadow: #666666 0px 1px 3px;
  box-shadow: #666666 0px 1px 3px;
  z-index: 999;
height: 28px; position:fixed;
line-height: 1.85em;
vertical-align: baseline;
letter-spacing: 1px;
}
#btt-stickybar a{
text-decoration:none;
color:#fff;
font-size:13px;
font-weight:bold;
font-family: arial,"Helvetica",sans-serif;
line-height: 24px;
}
#btt-stickybar a:hover{
text-decoration:underline;
}
#btt-stickybar p {margin:0; list-style:none;}
#btt-stickybar img {vertical-align: middle;
      margin-right: 6px;}


Short Customization:


  • To change the background color of your stickybar, simply change 158aee with your desired hexadecimal color. You may use our color code generator.

Step 4. Now look for the code below,
</head>

Step 5. And just below that code in step 4, place the code below,
<div id='btt-stickybar'><a href='http://www.bloggingtipsandtrix.blogspot.com' style='margin-top:1px; margin-left:7px; color:#666666; float:left;' target='_blank'><img src=' https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnGlgl709fygIOMZETbz8L4PK1Cj9CBRPzSCs2WyjZCqLeOOirt_sJ7390oAGHoVwW_n0LXD4Mw6FvewHTk1UWa-5BIBgxGG_tldtZKsRSHMbHMfJU90Hsn5KSzfAs56yO10yErO5lPAQ/s1600/blogger+sticky+bar.png  '/></a>
<strong><font color='#F906AC'>Recent Event: </font></strong>
<a href='#'>HOME </a>
<strong><font color='#DF013A'>Upcoming Post: </font></strong>
<a href='#'>Contact Us</a>
<strong><font color='#FFFF00'>Stay Connected: </font></strong>
<a href='# '>See My Sitemap</a>
</div>


Short Customization:


  • Replace the image link in bold blue text with your own logo image link. Click here on how to get the  URL of your uploaded image in Blogger.
  • F906AC, DF013A and FFFF00 are the colors of the "Recent Event", "Upcoming Post" and Stay Connected". You may change the hexadecimal colors by clicking this link and the words respectively.

Step 6. Save your Template and Congrats! : =)
Thank You and hope that you like this little innovation from the codes of MBT.

Best Alternatives Ads For Google Adsense

The most interesting part of blogging is when you know how to monetize your blog content well. Speaking of making money  from your blog no one can beat Google Adsense when it comes to revenue sharing program. Your's truly is also an active Adsense Publisher, but wait for  getting their  approval is not very easy, and specially for a newbie blogger, it’s  really a difficult journey in your blog career. However, there are solutions for that problem, since there are best alternatives to  Google Adsense .
best adsense ad alternatives
Below I will share to you 10 advertising sites that would also generate money to your pocket depending upon your niche and site's traffic. To mention those few AdSense alternative sites are Infolinks, Chitika, and BuySellAds will work better.Take note, Adsense is a contextual ad networking, meaning you will generate money on it through the texts or from words in your quality articles  but all Google Adsense alternatives sites that will be mentioned below are not contextual ad program. For example, BuySellads offers direct advertisement platform, and similarly Infolinks is In-text link program.

10 Best alternative Ads to Adsense:


1. Infolinks:


alternative to adsense

If we speak on In-line text ads programs, Infolinks is one of the best  especially if your blog is receiving a huge amount of traffic. You can customize their ads according to your preferences and they will provide relevant ads to your blog which helps you to increase the clicks.
See also:
How to apply Infolinks Ads Publisher

2. Chitika:


chitika as adsense alternative

Many bloggers  like Chitika because of some reasons. It always place ads relevant to your blog niche or to your blog  content, which helps you to get more clicks. You can edit  the text color, URL color, border color in order to blend with your blog design.  Chitika is probably one of the top choice when publishers come to seek for an Adsense alternative. Chitika’s ads are search query driven, that means your visitors will not see the ads unless they are coming into the website via search engine.

3. BuySellAds


buysellads as adsense alternative

BuySellAds is one of the best alternatives to Google Adsense. After submitting your blog to BuySellAds, it will automatically gather your blog stats which includes PR, Alexa rank , Technorati, Del.Icio.us, Yahoo inbound links etc.  In order to win their hearts for an approval for BuySellAds , your site(s) must have an organic quality traffic.  Now if they will approve your application you can setup an area on your blog for BuySellAds.

4. Kontera:


kontera as adsense alternative

Kontera is another In-line text program aside from Infolinks. The same with other advertising company, Approval of your blog in kontera needs  quality organic page impressions . Kontera uses the in-text advertising model. In a nutshell, in text ads do not take up additional ad spaces, rather, they analyse your site’s content and turn relevant keywords or phrases into hyperlinked text ad. Sometimes, visitors will be distructed since Ads will appear in-line with the texts of your blog posts.

5. Adbrite:


adbrite as adsense alternative
The good thing of Adbrite is it allows you to set-up your Ad space price on weekly, monthly basis etc. You have the right  to choose or reject any advertisement for your blog; this  manner helps you to choose advertisement relevant to your blog, since visitors will tend to click ads if they are related to your content.

Adbrite Shutdown, See update here

6. Clicksor


clicksor as adsense alternative

A their company says that "Clicksor's objective is to provide entrepreneurs with knowledgeable information and the best customer service in achieving their advertising needs". When you fill in the campaign suggestion form, their Clicksor sales representative will provide you practical campaign-planning advice and discover ad solutions that meet both your budget and your advertising objectives. Clicksor has a range of different types of ad formats. The two popular ones you may want to look into are their text ads (Google AdSense alike) and in-text ads (Kontera alike).

7. Vibrant Media


vibrant media as adsense alternative

Similar to Kontera and infolinks, Vibrant Media is another ad network notable for their in-text ads. They  launched recently two types of ad formats for extra revenue streams, respectively the in-image ads which integrate text ads within images, and display ads which works on a Cost per-thousand Impressions (CPM) model.

8. AdSlide


adslide as adsense alternative

AdSide’s banner ad format looks very similar to Google AdSense with one exception – it has a thumbnail on the left side of each row of ad.

9.  Bidvertiser


bidvertiser as adsense alternative

Bidvertiser is an internet advertising company offering site-targeted pay-per-click (PPC) text ads and image ads. It provides site-targeted placement by asking both advertisers and website publishers to specify categories for their ads and websites. The action is to make sure an advertisement only appear in relevant websites instead of any website that have the same keywords as the ads. Since Google and Yahoo! used two different advertising services where one is just for advertisers and another is just for publishers (eg. AdWords and AdSense), BidVertiser simply combined all services for advertisers and publishers in one system.

10. Viglink


viglink as adsense alternative
VigLink’s content monetization solution connects potential consumers to products by hyperlinking particular keywords in a website’s content.The company’s technology, VigLink Insert, scans a page for words that could be potentially profitable to the publisher of the page, and connects the keyword with a product from an affiliate program.The publisher is paid when a reader clicks a link contained in the content to buy or learn more about a service or product.

Final Words


They are just some of the close and best alternatives to Google Adsense program.  You can choose one of them or mix it one or two ads. For example, along with contextual ad use Infolinks or Viglink. You can also use Buysellads to maximize your blog sidebar. If you looking for contextual ads only, you can also try Bidvertisers, which is said to be working good for many bloggers. Clicksor provides the best return for Advertisers, Marketers and Ad Agencies through the delivery of quality services, affordable prices and unique customization that will fulfill the specific needs of today and tomorrow.

Note:

Blog monetization is just a way  in order to reward our hardwork but we should not forget that blogging doesn't bound merely on it. Blogging is interaction of you and  to your readers that's the main purpose of having a  blog.

How To Add Numbers To Blogger Threaded Comments

Customizing your comment box is somewhat tricky in order to let your readers drop a comment to your post.One of my previous post features on how to customize author's comments background  comments box but it doesn't contain any numbers to distinguish how comments being dropped in that particular post.  Today I will share to you  a  simple CSS tweak which will add numbers to your threaded comments inside a comment bubble.It will add numbers like this way 3,3.a,3.b & 4 here 3,4 are the main comments and 3.a,3.b are the replies. In order to apply this trick in your threaded comments, you just simply follow the simple steps below!

blogger threaded comment bubble


Add Numbers To Blogger Threaded Comments


Step 1. Go to Blogger Dashboard
Step 2. Hit the Template buttom (have  a copy of your template and save it in a safe place)
Step 3. Click On Edit HTML
Step 4. Now search or Control F for the code below
]]></b:skin>
Step 5. Just above that code in step 4 place the following code below
.comment-thread ol {
    counter-reset: countcomments;
}

.comment-thread li:before {
    content: counter(countcomments,decimal);
    counter-increment: countcomments;
    float: right;
    font-size: 22px;
    color: #555555;
    padding-left: 10px;
    padding-top: 3px;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUnwmT_NvmM4LZmzIyvXQy7GufnX9yDju79oP48oaAfAlwmRZEvnR3qHrylXjKE95if2XYFuu9LZG4Y1MsJtl__nA5SFDQfkreOzAvDsRFoInRrEE_o5RPzX8atADZHBGjVKRaRA_ZIDNF/s1600/comment+bubble2.png) no-repeat;
    margin-top: 7px;
    margin-left: 10px;
    width: 50px;
 /*image-width size*/
    height: 48px;
 /*image-height size*/
}

.comment-thread ol ol {
    counter-reset: contrebasse;
}

.comment-thread li li:before {
    content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin);
    counter-increment: contrebasse;
    float: right;
    font-size: 18px;
    color: #666666;
}

Step 6. Save your template and congrats! Enjoy ;-)

Customization:


  • To adjust the position of text (number) from left position, edit the value (padding-left: 10px)
  • By editing the value ( padding-top: 3px ) you can adjust the position of text (number) inside bubble from top position.
  • By editing the value attributes ( margin-top: 7px ) you can adjust the position of bubble from the  top position.
  • Increase or decrease the value ( margin-left: 10px ) as per your requirements in order to adjust the position of the bubble from the left position.
  • If you want to change the bubble image then simply replace image URL with yours. Or you choose one of the url below to replace your comment bubble image.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglyaAEf0G66O1CvudnWV8a05hT_zSowr65AzZ9AFh8JB3ANkBudrkTqe3GwCjww-Ed9tW-9LVfURqRYh00Y_dXlJ4Fxv1ASaH38l9lqMf_Bk_phTaKscFpVHjdOUrx2MHIIJtT0SVYbPU/s1600/devil+comment+bubble.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheNX3IS6xZOYOiYfaXS8cMsdtD7iHk-WM1MbIC44gjkH2ZRR_e2qPHpZzcA-CVoB5SWara1BAUPG-3xAkgjtvrGC01Zigeyd0QZ471cQK_8JlN4Q86yWDf3LQBJJ92oGiChOt9FD2HNhY/s1600/text_comment_bubble_comments.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht999MNM0JO-WvVgEfMTDqpXB2COaVGeQJr0uUI2zA_6AErRee8MAFvB5bsvNDPPaLxUZCGIYW44BWqh29CVQZlnknkZfbz9WjLk9kdpXvpAj-J6aU3zsLBJcbnI9RiEDyQLUKydKOhZg/s1600/comment_bubble.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF14o0Rs3ghlfu5ivRE-ILyTHIbPtFuyYWYMdVu_QaJ6NYKHMkPOZyw0pHbYBloaxW56B-DIWJieICOqtk25eox2u5IrZ4dvi0TJiy2zLQeEKDTNahQpAFNCcdZlgYjLGQWf5M_q6zpjs/s1600/bubble+comment.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidC7eadQ3na6umIPFBmIm8Wb1Dzdt-XGF1oiFdQlme7IEHVSwH7W2GdbCiBH30-JpmzGX2YMYqE4GmYMgOxFKZxExvFYJCoX3XmlDzb2MLZQUhURK0T6-i2PiTJF53WgHNoXTBSZAdXGU/s1600/comment+bubble+red.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgssmIkywtS7thyZsu6zAOu2yCjM2Roy8_Q02L8_AiMJG6PROARFy365yv0jfBC81d6kg0KMaGhv6Ls-feOSiZHXmckjxZ2F5stuCkiyomFbNnItpcgccShDzGTgeiEzAfxB3Se8ixlL9k/s1600/heart+1.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgb3uG-bSsUQgSsUTznUUNHhh8PwM0dgIurJCXP0VPWHXnVk1L-aTik-Z6FKoZ7S4pVcb6maKh6ib8n5OJ8_bn7OvphahIEVYngPI1Kqzlq4I2xE3N3hz-JW8vZ4ZfPwH8Omk9cg97APvk/s1600/pink+bubble+icon.png

I would say thanks  to helperblogger for the initial codes in this tutorial.




How to Add Fancy CSS3 & jQuery Lavalamp Menu For Blogger

In my previous tweak, I have shared to you on how to add Drop down menu and it is useful especially if you have many clutters that disturbed the eyes of your readers. Today , I will share a  menu bar which I hve learnt across my research in the web. I believe you will find it more interesting than before.This trick uses  an amazing CSS3 & jQuery lavalamp .You can use this menu in six (6) different colors by just changing the div class word in the HTML code.This menu is originally designed by Insidesigns and Helperblogger made it bloggerized  to work perfectly with any blogger templates. With no so much word, let's us now go to the tutorial and see how to add this menu to your blogger blog.
jquery lavalamp menubar


How to Add Fancy CSS3 & jQuery Lavalamp Menu For Blogger


Step 1.  Adding the Script

A. Go to your Blogger Dashboard >> Template Click
B. Hit the  Edit HTML button
C. Find or Control F the code below in your template
</head>
D. After finding the above code, place the code below code just above the code in Step 1 C.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://code.helperblogger.com/lavalamp-menu.js" type="text/javascript"></script>

If you have already added a jQuery library to your blog then delete the highlighted code in orange)

Step 2. Adding Cascading Style Sheet (CSS)

A. Look for the code below
]]></b:skin>
B. Add the following code below just above the code in Step 2 A.


/*LAVALAMP MENU BY http://www.bloggingtipsandtrix.blogspot.com/ STARTS here*/ 

.lavalamp { position: relative; border: 1px solid #d6d6d6; background: #fff; padding: 15px; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); border-radius : 10px; -moz-border-radius : 10px; -webkit-border-radius : 10px; background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204))); background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204))); height: 18px; font-family: calibri; 
}
.magenta { background : rgb(190,64,120); background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91))); background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91))); border: 1px solid #841144; 
}
 .cyan { background : rgb(64,181,197); background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187))); background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187))); border: 1px solid #2f8893;
 }
 .yellow { background : rgb(255,199,79); background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43))); background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43))); border: 1px solid #c08c1f;
 } 
.orange { background : rgb(255,133,64); background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24))); background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24))); border: 1px solid #c04f11; 
}
 .dark { background : rgb(89,89,89); background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54))); background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54))); border: 1px solid #272727;
 }
 .magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{ color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.40); 

.lavalamp a { text-decoration: none; color: #262626; line-height: 20px; 
}
 .lavalamp ul { margin: 0; padding: 0; z-index: 300; position: absolute; 
}
 .lavalamp ul li { list-style: none; float:left; text-align: center; 
} .lavalamp ul li a { padding: 0 20px; text-align: center;
 } .floatr { position: absolute; top: 10px; z-index: 50; width: 70px; height: 30px; border-radius : 8px; -moz-border-radius : 8px; -webkit-border-radius : 8px; background : rgba(0,0,0,.20); -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; 

/*LAVALAMP MENU BY http://www.bloggingtipsandtrix.blogspot.com/ ENDS here*/ 
C. You may now save your template

Step 3. Adding this widget on your blog

A. Now go back to your Blogger Dashboard
B. Click Lay-out  button >> Add a Gadget. Choose HTML/JavaScript
C. Copy the code below and paste it inside the empty space and drag it below Header section.


<div class="lavalamp dark">
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Free Templates</a></li>
<li><a href="#">Recipes</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
<div class="floatr"></div>
</div>

Customizations:


  • Replace # with your (URL) link
  • Replace Home, About, Contact. etc. with your link text which you want to appear on the menu.
  • If you want to change background color of the menu then replace <div class="lavalamp dark">  with one of the code below.
<div class="lavalamp dark">
<div class="lavalamp magenta dark">
<div class="lavalamp cyan">
<div class="lavalamp yellow">
<div class="lavalamp orange">
D. Click Save Arrangement

Adding Expandable Recent Comments Widget In Blogger

It's been a couple of days when  I was out in my blogging career and now I'm back with my computer's table to make another great post. Today, I will share to you a trick on how to make your recent comments more attractive and professional in its looks. I would say that the code that I am going to share with you is credited to helplogger and I made some sort of innovations in order to present it in a more unique manner.

This Expandable Recent Comments widget is a very accessible  for it can be collapsed or expanded through  your user's interaction, so that now, we don't have to click on the commenter or post title link in order to see the content of a comment.

The expanding content  of the comment can be shown or hidden by clicking on the plus/minus icon or by hitting the "Show all" or "Hide all" button at run time.
expadable recent comment widget


How To Add The Expandable Recent Comments Widget to Blogger


Step 1. Log in to your Blogger dashboard
Step 2. Hit the  Layout  button
Step 3. Click on "Add a Gadget" link
Step 4. In the pop-up window, scroll down and click on the HTML/JavaScript widget
Step 5. Copy and paste the code below and paste it inside the empty box
<style type="text/css" media="screen">
.row-aa {        background: #f2f2f3; }
.row-bb {        background: #F8F5F1; }
.row-div {
  margin:0px;
  padding:5px;
}
.comment-header {
  font-size:0.9em;
//  border:1px solid #E0E0E0;
//  background-color:#F3F3F3;
  padding:4px;
  margin-top:10px;
  margin-bottom:5px;
}
.comment-box {
  margin:0px;
  padding:0px;
  font-size:0.9em;
  height:500px;
  overflow:auto;
}
.comments1  {
//  background: #F3F3F3;
  padding:3px;
  border-left:1px dashed #A6A6A6;
  color: #888888;
  font-style: italic;
  padding-top:4px;
  margin-bottom:5px;
}
.comment-footer {
  text-align:center;
  font-size:0.9em;
  padding:4px;
  margin-top:5px;
}
</style>

<div style="text-align: center" class="comment-header"><input class="comment-button" id="commshowall" type="button" onclick="if (this.value == &#39;Show all&#39;) { unfold_all(this); this.value=&#39;Hide all&#39;; } else { fold_all(this); this.value=&#39;Show all&#39;; }" style="width:8em;font-size:1em;font-family:Verdana,sans" value="Show all" /></div>

<div class="comment-box">
<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/expandable-recent-comments.js"></script>
<script type="text/javascript"  src="http://bloggingtipsandtrix.blogspot.com/feeds/posts/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentposts">
</script>
<script type="text/javascript"  src="http://bloggingtipsandtrix.blogspot.com/feeds/comments/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentcomments">
</script>
</div>


Customizations:


  • Replace http://bloggingtipsandtrix.blogspot.com with your blog/site address.
  • Replace 1px  (font size) with your own desired font size, bigger number means bigger size of the font
  • Replace dashed  with your desired border styles, click link to see different border styles.
  • Replace #A6A6A6 with another hexadecimal color that would most fit your blog's theme.
  • And lastly, change the phrase Hide all and Show all with another synonyms related to that phrase. 



  • Step 6. Save your widget and you're done!
    Happy Blogging Buddies!!!

How to Upload New Template to Blogger

Blog customization to the professional bloggers will take a month depending on his desires and experiences to fully design his blog/site. For a newbie blogger, it is quiet impossible to do that within a short period of time since you need to understand and apply the basic of blogging language like HTML (Hypertext Mark-up Language), CSS (Cascading Style Sheet), Javascript, etc. However , there is a remedy on that problem since Blogger allows us to upload template from the external source and replace the Blogger default template. Furthermore, it is also necessary in restoring our previous template for  sometimes we did some mistakes or didn’t like the customization that we have done in our blog.
There are many sites like Rocking Template, Btemplates, etc. that could help you  choose the best template styles.
Before proceeding to the steps below be sure that you had already downloaded a template that would replace your old template  that you’re using now.

How to Upload New Template to Blogger


Also check:
How to use the new Blogger template

Step 1. Go to Blogger Dashboard >> Hit the  Template button
how to upload template

Step 2. Upon clicking the Template button, you will see a pop –up dialog box wherein you can choose to Back- up/Restore, CustomizeEdit HTML and close it if you want. Click first the Back-up/Restore button.

replace template in blogger

Step 3. Upon clicking the Backup/Restore button you will see a pop-up dialog box like in the screenshot below. Choose the  Download template button to have a back-up of your  current (being used) template and store it in a safe place. This is important for your reference.
change template in blogger


Step 4. Click the Choose File button and you will be directed to the document panel of your PC.
how to replace template

Choose from that panel where you  had stored your template which you had downloaded from the other sites. In  my case, I stored it in the download section of  that panel. See the screenshot below
how to upload template


Then click the template that you want to replace to your current template and hit the Open  and you will be directed back to  the dialog box in Blogger. Click now the Upload button  and wait for few seconds until you see the note Uploaded Successfully.
how to back up template


View your blog and see its new look. Enjoy!