How To add a Floating Share Button on Blogger..

Share buttons are very popular among the bloggers, and with the popularity the presentation of the share buttons has really changed alot. Now in this post, I'll teach you how to create an Floating Share Buttons for your blog.

Floating share buttons has now been very popular as it is preferred by many big site like Mashable. As these buttons are very good looking and effective on attracting readers to share buttons, these buttons have been in demand for long.

So regarding that I've written this post to teach you how to add it to your blog. Just follow these steps:

1. First go to your blogger account, sign in and go to Design>>Edit HTML. Then click on Expand Widgets and Search for following code:

]]></b:skin>

Then Just before that Paste these Codes:

#sharebuttons {
background-color:#FFFFFF;
border-color:#C1CDCD;
border-style:solid;
border-width:1px;
left:103px;
bottom:40px;
margin-top:10px;
position:fixed;
width:64px;
}

#sharebuttons .float {margin:7px}
.FBConnectButton_Text
{
font-size: 8px;
padding:2px 4px 3px ;
}

2. Now you'll need to search for this code:

<div class='post-header-line-1'/>

And immediately before it paste the following code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='sharebuttons'>
<div class='float'>Your Twitter Script: </div>
<div class='float'><a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a>Your Facebook Script:<div class='clear'/></div>
<div class='float'><a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='Post on Google Buzz'/>
Your Buzz Script:</div>
<div class='float'><script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/></div>
</div>

</b:if>

Your Twitter Script:  

<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>

 Your Facebook Script:

<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>

Your Buzz Script: 

<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/> 

 Now Save your work and enjoy :)..

9:06 PM by Anonymos · 0

Add Customized Comment To Post Titles in Blogger

Customized comment is very attractive for a blog. It actually can be designed to any sort of display that will match your blog.

In this post I am just going to give you some tutorial on Customizing the comment counter. You just need to follow these simple steps :

6:47 AM by Anonymos · 6

Get a Post Rating Widget for blogger...

Every blogger is keen to know how the readers thinks of their posts. And it can even be inspiring for a blogger to know how the readers reacts to their post. You must have seen the post rating feature in WordPress but now its available for blogger too. 

Out Brain.com provides you this feature to add the content ratings and recommendations in blog. You can simply visit the site, choose your platform (Type Pad, Blogger, Word Press) and simply copy the code give. No registrations are require. Or else you can simply copy the code give below:

1.Goto your Dashboard.
2. Edit Layout > Edit HTML
3. Copy and Paste the code below.


<script language="JavaScript">var OB_platformType = 1; var OB_demoMode = false;var OB_langJS ='http://widgets.outbrain.com/lang_en.js';</script><script src="http://widgets.outbrain.com/OutbrainRater.js" type="text/javascript"></script>

5:26 AM by Anonymos · 11

Floating Twitter Badge For Blogger

Twitter is a famous Social Networking Site which promises you lots of traffics and lots of money. So, it is very important for a blog to have followers to visit their site. Getting followers is not an easy task to do. And in this post I'll teach you one of the strongest method to earn followers in twitter.

Floating Twitter badges are found in many popular blogs and seem very useful to attract followers. So I'll guide you and provide you some codes that you need to create this badge for your blog.

First, log in to your blogger account. Go to Layout and then to Edit HTML page. Then search for ]]></b:skin> and add these codes just above this:

.followme_r .followme{
background: #59B7FF url(http://i45.tinypic.com/upvdc.png) no-repeat scroll left top;
position: fixed;
top: 150px;
width: 30px;
height: 130px;
z-index: 5555;
cursor: pointer;
right: 0pt;
}
.followme_l .followme{
background: #59B7FF url(http://i45.tinypic.com/upvdc.png) no-repeat scroll right top;
position: fixed;
top: 150px;
width: 30px;
height: 130px;
z-index: 5555;
cursor: pointer;
left: 0pt;
}
.followus_r .followme{
background: #59B7FF url(http://i45.tinypic.com/upvdc.png) no-repeat scroll left top;
position: fixed;
top: 150px;
width: 30px;
height: 130px;
z-index: 5555;
cursor: pointer;
right: 0pt;
}
.followus_l .followme{
background: #59B7FF url(http://i45.tinypic.com/upvdc.png) no-repeat scroll right top;
position: fixed;
top: 150px;
width: 30px;
height: 130px;
z-index: 5555;
cursor: pointer;
left: 0pt;
}

Then you'll just need to do a little work. Now save the work and go to Page Elements and select add a widget and paste these codes there:

 
<div class="followme_r">
<div class="followme" onclick="window.open('http://twitter.com/bloggossips')"></div>
</div> 

Then save your work and the badge will be displayed on your blog.

*Note: Donot forget to replace 'http://twitter.com/bloggossip' with your own twitter account.

If there's anything more you need to know then just drop your comment. 

4:00 AM by Anonymos · 5

Create Static Pages for your blog

Blogger never allowed us to create pages as we create posts. Creating additional pages (like 'contact us'...) for our blog was always troublesome. But no more.

After the continuous demands from blogger around the globe blogger now allows you to create Static Pages for your blog. Well, it has not yet been added to our main blogger site but has been added in Blogger Draft.

So, now if you want to create a page for your blog, you can just follow the easy steps below to do so:

Step 1 :  Log on to Blogger Draft and goto 'Edit Posts' then 'Edit Pages'. So by now you might have guessed it.  Now you will be able to create your pages with simple easy steps.

Step 2 : Click on the 'Create a page' link which will guide you to a section where you will be able to create blog pages like you used to create posts. Its simple as that.

Step 3 : Then now, when you will press the 'Publish Page' button.Then you will be given some options for your Page Gadget to appear which you've to decide. You can also deny the option and simply get the link for your page and add manually.

Its looks like this: View

So there you go. Your Static Page will be created. However if you need some further help please do not forget to comment. 

7:41 AM by Anonymos · 3

Microsoft offers Domain and Site hositng for free

Microsoft is also providing free domain and free web-hosting for the users to help them enjoy their business with better services. Microsoft says "having a website is as important as having a business card". But the intension is all clear. With all these recent web-hosting popularity of google, Microsoft also wants to make something out of it and gets toe-to-toe with google and its never easy.

Microsoft has started a Campaign for this work and named it 'Office Live Small Businesses Campaign'. They have also provided other services under it.

Microsoft has managed some very attractive offering in web-hosting:

 1. A free web-site.
 2.Free web-hosting with start of 500 MB space.
 3. Free website design, professional and easy to handle,
 4. Site traffic reporting for free

 5. A contact manager from Microsoft to increase your  business/sales.
 6. Business branded emails.

You can also register your domain under $14.95 per year

But if you want a bigger businesses, free hosting is available for first year and then you need to pay a reasonable price of $15 per year.

First 500 MB FREE
   
1GB    $4.95/month
2GB    $8.95/month
5GB    $14.95/month


First 5 users FREE

10 users    $14.95/month
25 users    $34.95/month
50 users    $64.95/month
75 users    $84.95/month

To get more info, follow the link:

smallbusiness.officelive.com

9:36 AM by Anonymos · 3

Add favicon to your blog :Complete Guide

Favicon is just a small pictorial display of your blog which you can notice at the begining of your address bar. Its generally of '.ico', 'png' format. In this post I'll guide you to add your very own favicon.

First you need your own favicon for your blog. So for that you can follow the link below and download a favicon:

Link > Free Favicons by TheBlogDog

After you have downloaded its, you need a host place your ico file in and get a url for your blog. Well, google also has its online directory (Google Page Creator). You can easily follow the link and upload your favicon. Then view the favicon and copy the url in the address box.

Now you just need to place that code in your blog to display your favicon. For that you need to goto to the blogger layout&amp;gt;Edit HTML. Click the 'Expand Widget' option and search for:

<title><data:blog.pagetitle></title>

and just after the code paste the code below:

<link href='icon file url ' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Replace the 'icon file url' with your own url (copied from Google Page Creator). And save , then you can view your blog and can notice the favicon.

10:10 PM by Anonymos · 0

How To get a toolbar for your site...for free!!

Effective Toolbar for your blog

Many bloggers and webpage owners have been using this tool. And its very effective too..The best part is that now you can get them for free. I also have been using this toolbar and have found it very effective. A very useful site Conduit have been providing this service to all users with flexible editing and adding feature.



Conduit is the most powerful community toolbar you can build. You don’t need a tech wiz to do it, and it’s FREE! You can have thousands of gadgets available for your toolbar. It automatically update your ar and also works on all platforms in the highest industry standards. Simply log on to : http://www.conduit.com and you can design or choose a toolbar for your site.

You can choose from thousands of popular components like online TV and radio, Twitter, community alerts, chat, social media tools, an e–mail notifier, local and global weather, a pop–up blocker and more.

3:48 AM by Anonymos · 0

Create recent posts using your feed.

Recent post widget is very useful and very common among the bloggers and in this post I'll teach you how to create such widget easily using feed. Well,this must be easiest method to create this widget and is effective too.

Just follow these simple few steps and install the widget in your blog :

1. First log on to your feed burner account.

2. Select your feed id.

3. Then select 'Publicize' tab where you can find

     several option.

4. Among them choose 'Buzz Boost'

5. Then you'll be provided some options(feed setting) regarding your post display.

 

So you can choose the options as your interest and copy the code given and paste it to your blogger account (blogger-layout-add widget and paste).

So there you go, your widget will be created. I'm also working on some codes that will let you create the recent posts with thumbnail. So wait for it I'll post that soon.

If there's anything you need to know just post your comment and enjoy..!!

10:04 PM by Anonymos · 0

Implement 'Read More' link in blogs..

Implementing read more link in the post is very important and yet very effective too. So, I have created this post for you to add "read more" link in your blog in some easy steps.

First you need to goto to your blogger account and to the layout section. Goto Edit HTML and select expand widgets tab. Then search for:

]]></b:skin>

and place this code immediatly above the previous code: 
 

<!--read more codes start (by www.bloggossips.co.cc)--!>

<style><b:if cond='data:blog.pageType == &quot;item&quot;'> span.fullpost{display:inline;}<b:else/>span.fullpost {display:none;}</b:if></style> 

<!--read more codes end (by www.bloggossips.co.cc)--!>

Now search for:

<data:post.body/>

and place this code below it

<!-- read more link begin (by www.bloggossips.co.cc) -->
<b:if cond='data:blog.pageType != &quot;item&quot;'><span><a expr:href='data:post.url'><u>read more..&gt;&gt;</u></a></span></b:if>
<!-- read more link end (by www.bloggossips.co.cc)-->

Now just goto Settings>Formatting:

And there at the bottom you will find Post Template form. In the form paste the code below:

Visible post
<span class="fullpost">
Expanded Post
</span>

And the work is nearly over. Now you just need to goto to Newpost and there you'll notice
 

Visible post
<span class="fullpost">
Expanded Post
</span>

code in your post. Then you just need to replace Visible post with your post you want to show(post before "read more"). And replace Expanded Post with the post you want to hide(post after "read more").
And save your post and you'll notice a read more link hiding your desired post.

6:49 PM by Anonymos · 1