How To Backup Or Download Full Blogger Template

How to back up your blog template or download it to your computer so you have an copy of your template design always if you needed that design in future or many of us loose the design setting while we are trying to edit our template.
Its very important to save a copy of your template before you do any customization on it ( Any change in template ).

It's very easy to do. It's such a small file, so you can keep it forever.

Follow these simple steps to download / Backup your Blogger Template:

Step 1.   First of all login to your blogger account, click on Drop-Down menu and then click on Template.

Posted by ASAD on 9:56 pm in Blog Tips, Blogger, How To

How to Disable Blogger Official Lightbox

Follow these simple steps to disable LightBox

Step 1.  Login to your blogger account. Click on your blog.

Step 2.   On left side click on Settings and under Settings tab click on Posts and Comments. Then Scroll to the option Showcase images with Lightbox?  and set to NO.

Step 3.  Save the settings and all you done.

Drop your comments.

Posted by ASAD on 7:36 am in Blog Tips, Blogger, Blogger Tricks, How To

Add Smooth Scroll To Top Button To Blogger

Follow Simple steps to add a Button for smooth scrolling to top.

Step 1.   login to your blogger account, click on drop down menu, click on template and then click on Edit HTML.

 

Step 2.   Search for </head>  tag ( Press CTRL+F for a search bar to help find the tag ).

Step 3.   Add below code Before / above </head> tag. ( Ignore this step if your blog have already a jquery Plugin )

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

Step 4.   Now search for </body> tag.

Step 5.   Add below section of code Before </body> tag.

<!--Smooth back to top by IACTips.blogspot.com-->
<style type='text/css'>
#w2btoTop {display:none;text-decoration:none;position:fixed;bottom:10px;right:10px;overflow:hidden;width:51px;height:51px;border:none;text-indent:-999px;background:url(http://2.bp.blogspot.com/-oVa1ImctF7c/Tdouv3K7NyI/AAAAAAAAA38/xT4bu8uKM3M/way2blogging.org.ui.totop.png) no-repeat left top;}
#w2btoTopHover {background:url(http://2.bp.blogspot.com/-oVa1ImctF7c/Tdouv3K7NyI/AAAAAAAAA38/xT4bu8uKM3M/way2blogging.org.ui.totop.png) no-repeat left -51px;width:51px;height:51px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0);}
#w2btoTop:active, #w2btoTop:focus {outline:none;}
</style>
<script src='http://bloggerblogwidgets.googlecode.com/files/w2b_jquery.ui.totop.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){ $().UItoTop({ easingType: &#39;easeOutCirc&#39; }); });
</script>
<!--Smooth back to top by IACTips.blogspot.com-->

Step 6.   Click on Save Template and all you done.

Leave your Comment about this Widget.

Posted by ASAD on 7:31 am in Blogger, Blogger Tricks

Animated Sexy Social Bookmarks V3 for Blogger

The arrow messages abailable are Sharing Is Sexy, Sharing Is Caring, Sharing Is Caring with Hearts, Share The Love Share The Wealth, Share And Enjoy, Share The Knowledge and even an arrow message in German !

The Bookmarking Icons In the Gadget are for Twitter, Facebook, Linkedin , Stumble Upon, Delisious, Digg, Google Buzz, Blogger, Yahoo Mail, Gmail, Google Bookmarks, Google Reader, Rss, Orkut, Design Bump, Reddit, Design Float, Friend Feed, Dzone, Web Blend, Propeller, Tumblr, Squidoo, Posterous, Technorati, Bebo, Hotmail, Blinklist, Blog Engage, Blog Marks, Box.Net, Current, Diigo, Ekudos, Evernote, Hacker News, Hives, Identica, Jumptags, Email, Memeame, Mister wong, My Link Vault, Myspace, Netvibes, Netvouz, Newsvine, Ning, Ping FM, Plaxo, Plurk, Print Friendly, Slashdot, Sphinn, Techmeme and Tipd.

OK lets add it to your blog

Follow These Simple Steps:

Step 1.   Login to your Blogger account, click on dropdown menu and click on template.

 Step 2.    Click on "Edit HTML" and then Tick the Expand Widget Templates Box.

 

Step 3.   Find the following piece of code in your blogs code: ( Press "CTRL+F" for search bar to help find the code )

</head>

Posted by ASAD on 7:41 am in Blogger

How To Hide Blogger Nav Bar And Have It Reappear When You Hover Over It

Follow these steps:

First of all log into your blogger account.

Posted by ASAD on 9:29 am in Blogger

How to change Blog Template on Blogger

In this article I am going to tell  you how to change your blog on Blogger with a new downloaded template. First of all login to your Blogger account
After entering the Dashboard page click on drop-down menu and then click on template.

Remember to backup a copy of your current Blogger template. If something goes worng of if the new template isn't that great after all, it is possible you might like to change back to your current template. For this purpose click on "Backup / Restore" and then click on "Download Full Template".

For uploading your new template click on "Choose File" on the same page , choose your template and click on "Upload" and it is done.
Hope this post is useful and works out.

If you have any confusion, Comment Here.

Posted by ASAD on 10:11 am in Blog Tips, Blogger

How to delete a Blogger Blog

Many bloggers do not know how to delete a Blogger's blog. The method depends on whether you are using the Old Blogger Interface of the new Interface. It is not difficult if you know where to click. The problem is, it is not obvious where to click, but this post will show you where and how. Below are the instructions to delete a blog with screenshots (Pictures) to make the task easier for you.

Old User Interface


To delete a blog is a more straight forward. First of all Sign In to your blogger account to access the Dashboard, Click on the SETTINGS tab and the default sub-tab will be BASIC, click DELETE BLOG and it is done.

New User Interface


As Above, First Sign In to your blogger account. Click on drop-down menu and then click SETTINGS.

On the left sidebar, click on OTHER and option to delete blog will be under the default BLOG TOOLS. Click DELETE and it is done.

If you have any confusion, Comment.

Posted by ASAD on 8:28 am in Blogger

How to Add Page Peel Effect in Blogger

Sometime you can see some blogs at the top corner when you can move cursor to that flipped page that corner flipped page animate and you can see the notes behind that. Most of people understand that this effect is make by any flash content but its not true. You can also put that type of effect in your blogger. In this post you can see how to add that type of animated content in your blog.
Instruction to Install
Step 1: Log into your blogger.com account.
Step 2: Open your blog in which you want to intall this page peel effect.
Step 3: Go to template and click on Edit HTML.
Step 4: Now search for </head>. For this purpose Press CTRL+F  , type </head> and press Enter. Put this code before </head> tag.

<style type='text/css'>
img { behavior: url(iepngfix.htc) }
#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(http://3.bp.blogspot.com/-IfvJKcSYc8A/T5fOcTMgD7I/AAAAAAAAAKU/AcrhSGkFL80/s1600/subscribe.png) no-repeat right top;
}
</style>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Page Flip on hover

$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .msg_block&quot;).stop()
.animate({
width: &#39;307px&#39;,
height: &#39;319px&#39;
}, 500);
} , function() {
$(&quot;#pageflip img&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;52px&#39;
}, 220);
$(&quot;.msg_block&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;50px&#39;
}, 200);
});


});
</script>

Step 5: Now put code in body for display page peel effect for that press Ctrl+F , type <header> and press Enter. Put this code above / before <header> tag. OR put this code just below </head>.

<div id='pageflip'>
<a href='http://feeds2.feedburner.com/IACtips'><img alt='' src='http://4.bp.blogspot.com/-cQuWhOWI6hk/T5fObdQZf4I/AAAAAAAAAKM/cFuYjQk1yPk/s1600/page_flip.png'/></a>
<div class='msg_block'></div>
</div>

Replace YOUR FEED URL with your original feed url and then paste that code.


If you have any confusion , comment here.

Posted by ASAD on 8:32 am in Blog Tips, Blogger