Social Bookmarking Widget With Search Bar

Social networks play an important role in increasing you blogs traffic, visitors and rankings. So that's the reason why you use social bookmarking or social sharing widgets in your blog. This social bookmarking widget will provide your visitor a simple way to follow you on Facebook, Twitter and Google plus. This Social Bookmarking Widget have a search bar and a Subscribe button with the help of these features you visitor can search posts and subscribe your blog. This Social Bookmarking Widget with Search Bar is a simple black & white widget with simple hover effect.

Demo

Follow these simple steps to add this Social Bookmarking Widget in you blog.

Don't Forget to backup you blogger template.

Step 1.   First of all go to your Blogger Dashboard and on left side you will see Template click on Template.

Posted by ASAD on 12:00 pm in Blogger, Blogger Tricks, Blogger Widget

Add Beautiful CSS Social Bookmarks With Hover Effect

Add a beautiful css social bookmarks with cool hover effect is an awesome widget for blogger. This social bookmarking widget will show at the bottom of each post. With the help of this widget your readers can easily share your post to social networking site ( Facebook, Twitter, Google buzz, StumbleUpon, Digg, Linked in etc. ).
Click To see DEMO

Follow these steps to add this cool social bookmarking widget for you blog.

Don't forget to Backup Your Template before Editing.

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

Posted by ASAD on 5:18 am in Blogger, Blogger Tricks, Blogger Widget

Related Posts Widget for Blogger

Related Post Widget is a cool widget. Related post widget with images after each post will increase the beauty of your blog. Displaying the related post at the end of your post will help you to increase the page views.

Just Follow These Simple Steps to Add Related Post Widget:

Don't Forget to BackUp Your Template.

Posted by ASAD on 5:50 am in Blogger, Blogger Tricks, Blogger Widget

Add About The Author Widget For Blogger

In this post I will show you how to add About The Author widget for blogger. This widget will add a beautiful About The Author box after the each blog post. In About The Author widget you will have some information about the author. In this way your blog look like profession blog.

Just follow these simple steps to add the About The Author widget in blogger.

Posted by ASAD on 8:57 am in Blogger, Blogger Tricks, Blogger Widget

How to Remove/Hide Blogger Top Navigation Bar

 
Many people use blogger default templates, these template have a navigation bar on the top. People want to Remove/Hide this useless top navigation bar so that there blogs look like professional. This post is important for those how want to remove/Hide blogger Top Navigation Bar.

Just Follow These Simple Steps To Remove/Hide Top Navigation bar.

Posted by ASAD on 3:55 am in Blogger, Blogger Tricks, Blogger Widget

Facebook LikeBox Popup With Timer

When a visiter open your site facebook likebox popup and after some time popup box disapper. This popup has a like button that links to your page and an image that also links to your facebook page. Your visiter will be able to like your page or visit your fan page. Popup will disappear after some time you can set that time.
It's very easy to add this widget to your blog.


Just follow these simple steps:-

Posted by ASAD on 3:22 am in Blogger, Blogger Tricks, Blogger Widget

Replace Older, Newer And Home Naviagtion Links With Button Images

In this tutorial I'll show you that how to replace older, newer and home Navigation links with button images. These Navigation links are located at the bottom of posts section.

Just Follow these simple steps:

Note: Backup Your Template before making any changing in Template.

Step 1.  Login to your blogger account. click on drop-down menu and then click on template.

Posted by ASAD on 5:22 am in Blogger, Blogger Tricks

How To Backup Your Blogger Posts And Comments

Backup your blogger posts and comments regularly. This is blogger tip I think every blogger should follow for its safety. Backup your posts regularly. Very less amount of bloggers would have been using this tip. So lets follow this tip and start backing up your blog posts from now.
How to backup bloggers posts for all bloggers including blogspot users.

Just Follow These Steps:


Step 1.   Login to your blogger account, click on drop-down menu and then click on Setting.

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

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