Showing posts with label Blog Tricks. Show all posts
Showing posts with label Blog Tricks. Show all posts

Thursday, 19 April 2012

How to Remove Navbar from Blogger

http://www.miditate.witnesstoday.org/wp-content/uploads/2011/01/blogger_navbar.png

So you have a web blog on Blogger.com and you want to remove the Navbar on the navigation bar that goes with it.
The Navbar is sometimes annoying and is just eating up space on your blog pages that it is reasonable to just remove it.
Quick Instruction: Edit you BlogSpot blog’s HTML template and paste the following code just before the </head> tag and you’re done:
<style type="text/css">
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
#navbar {
height:0px;
visibility:hidden;
display:none;
}
</style>
Step-by-step Instruction: 1. Sign-in to your account in Blogger.com
2. Click the Design link on your blog you want to edit.
3. Click the Edit HTML link.
4 Search for </head> on the textarea containing HTML line of codes.
5. Copy and paste the following code just before </head>:
<style type="text/css">
#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}
#navbar {
height:0px;
visibility:hidden;
display:none;
}
</style>
6. Click the SAVE TEMPLATE button.
7. Open your blog and see if the Navbar was really removed. You may have to refresh the page if it is already opened by the time you clicked the SAVE TEMPLATE button.
It worked for me and I’ll be glad to help if you have any problem with the instructions above.

Monday, 16 April 2012

Add Floating Share Button on your Site

To improve your traffic rank SEO can contribute a lot. Few years back SEO was somewhat difficult. But at present time SEO is little bit easier by the grace of social sites like twitter, facebook, google + etc.

Today I will show you how to add floating social share button to blogspot website. This code will provide you facebook like, googe + 1, reddit, stumble upon and digg.

To add these floating buttons to your blog, just follow the steps below:


  1. Sign in to your blog
  2. Click design from the upper right corner 
  3. Click on layout and hit on Add a Gadget option
  4. Now you'll see a list of gadget and you need to select html/ java script gadget. It will show you  Configure HTML/JavaScript window
  5. Now copy the following code and paste it into the content box of Configure HTML/Java Script window
  6. Now save this gadget
Note: Make sure your blogger dashboard is set to the new look. Click here for more info. 


<!--SideBar Floating Share Buttons Code Start-->

<style>
#pageshare {position:fixed; bottom:15%; left:3px; float:left; border: 1px solid black; border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;background-color:#eff3fa;padding:0 0 1px
0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:3px 3px 0 3px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="Share This With Your Friends">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class="sbutton" id="reddit"><script type="text/javascript" src="http://www.reddit.com/static/button/button2.js"></script><!-- AddThis Button BEGIN --><div class="addthis_toolbox addthis_default_style "><a class="addthis_counter"></a></div>

<!--SideBar Floating Share Buttons Code End--></div></div>

If everything is correct then you will be able to see the floating share button box like this site on the left side of your blog.

 
Blogger Gadgets