Adding FaceBook Share Count button for blogger posts.

Adding a Facebook share count button will show a neat count of how many times your blog post has been shared on Facebook.

Facebook Share Button Style  1

Code

<div style="float:left;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

Facebook Share Button Style 2

 Code

<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

Facebook Share Button Style 3

Code

<div style="float:left;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

Facebook Share Button Style 4

Code

<div style="float:right;padding:4px;">
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='box_count'/>
<script type="text/javascript" src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"/>
</div>

Select one of the Share Button Styles and copy the Corresponding Code.
Login To Blogger Go To > Design > Edit HTML.
and mark the tick box "Expand Widget Templates"
Now find (CTRL+F) this code in the template.

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

And immediately After it, place Facebook share button code(that you copied) :
If you were unable to find this code in your template,then look for this code in the template.

<data:post.body/>

And immediately Before it, Facebook share button code(that you copied):
Now click Save Template.

Animated Flash Tag/Label Cloud For Blogger

Installing Blogumus in your Blogger layout is surprisingly simple! You should only need to copy and paste a section of code to your Blogger template. :)

Login To Blogger Go To > Design > Edit HTML.

and mark the tick box "Expand Widget Templates"

Now find (CTRL+F) this code in the template

<b:section class='sidebar' id='sidebar' preferred='yes'>

And immediately after this code line, paste this code in new line:

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://www.yourjavascript.com/131890410571/RoyalTutortagcloud.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a> via <a href='http://www.royaltutor.net'>Royal Tutor</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

In this default installation, Blogumus includes the following preset variables:

    * Width is set to 240px

    * Height is set to 300px;

    * Background color is white

    * Test color is grey

    * Font size is “12″

Change height and width
Both of these options can be configured in the following line:

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

The width is 240px and the height is 300px. These numerical values specify the width and height in pixels, so you can alter these of you prefer.

Change background color
To change the background color, alter the hex value found in this line:

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

By default, this is set to white(#ffffff), but you can alter this to any value you prefer.

Change the color of text
The tag-links are black by default, though you can change this within the following line using the tcolor value:

so.addVariable("tcolor", "0x333333");

Be aware that "tcolor" is a Flash variable and doesn't include the usual hash symbol of hex color codes. Be sure to only replace the numbers!

To alter the size of tags/links
In the following line of code, the size of the tag links is "12" (proportionate to the size of the widget). You can change this value to a smaller or larger number depending on whether you prefer the links to appear smaller or larger in your widget.

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

You can alter this to ensure tags are displayed in a bigger or smaller font if you prefer by changing "12" to a larger or smaller number.

You are done.:)

Adding a Floating Back To Top Button

If you have very long posts or a long line of comments, your visitors find it difficult to surf through your blog. So that's when you need to add a back to top button, and it's configurations are very easy too.

Login To Blogger Go To > Design > Page Elements.

Simply add a Gadget of HTML/JavaScript type.

add this code in to it:

<!--BACK2TOP-STARTS-->

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwEXTA68u0trAL8gUFCpP1dEBrQe1YPciiG9y6L7pDkk6uIAmNOxuMSxfGGqvjWrehYkIkDniqnc45Z0IN6UZuJAX1YtoxScV9XtEyQYDNHC-qJGwwpSMIVa8ODSF3ELLeg0Gnlu_fRjg/s1600/up+b.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoWdGbOFDrjnJsr9hrPl62qKwe_qmeN0Zl7EEMatg5Qao68b3zs2UPjn9TOz15nMt8AhJNxXFOnzPD4ud3sROlMNymUcLWNNLOsRS-z3OypZrOLcJxku9k_YolYXw5ZmEG9DTqluFRfyA/s1600/up+s.png" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoWdGbOFDrjnJsr9hrPl62qKwe_qmeN0Zl7EEMatg5Qao68b3zs2UPjn9TOz15nMt8AhJNxXFOnzPD4ud3sROlMNymUcLWNNLOsRS-z3OypZrOLcJxku9k_YolYXw5ZmEG9DTqluFRfyA/s1600/up+s.png'"/></a>

<!--BACK2TOP-STOPS-->

you can change the pics if you wish to.The one ending with "up+b.png"(blue) should be replaced with your larger image and the other one(red) with the small image.

Just save your widget and view your blog with a floating Back-To-Top button at the bottom-right corner of your homepage.

How to remove the dotted border from Blogger links

I’m sure that many of you have noticed the dotted border that surrounds links when you click on them. It’s actually an accessibility feature and in most cases it’s fine, but in some cases that dotted border surrounding active links can be quite annoying and ugly. There is a very simple and easy way to hide the dotted border from active links. All it takes is a few lines of CSS and you’re done.

Just Login To Blogger Go To > Layout > Edit Html and Find for

]]></b:skin>

And just place the below code before it.

a { outline:none; }

And save your template and you are done now.Now whenever you will click on any link in blogger no dotted lines will appear.

How to add a favicon in Blogger

 favicon (short for favorites icon), also known as a website icon, shortcut icon, url icon, or bookmark icon is a 16×16, 32×32 or 64×64 pixel square icon associated with a particular website or web page.Most of the people use 16*16 pixel favicon with ".ico" format.But,you can also use gif,png(image formats) aswell.

There are plenty of sites out there that generates a favicon for you when you upload an image.Do a Google Search for "free favicon Generator" and plenty of sites would come up or use one of these free services:

• http://www.genfavicon.com/
• Favicon Generator (Blogger Buster) 
• FaviconGenerator.com (right click image and choose “Save image as”) 
• HTML-Kit favicon generator (download as favicon package) – Enables you to create a static or animated favicon; you can even create a favicon quickly using your Twitter username 
  
  

Then upload it to a free image hosting site like ImageBoo .After uploading the file select the direct link given at the very bottom which should look like "http://www.imageboo.com/files/m06hie3vf8gdban6cuq1.ico", add that as the "favicon url" given in the below instructions.

Now,go to your blogger dashboard>layout>Edit html and look for this code which at the top the template:

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

Just after that line add the following codes, substituting 'favicon url' for the URL where your favicon is hosted:

<link href='favicon url' rel='shortcut icon'/>
<link href='favicon url' rel='icon'/>

Then save your template. Now when you view your blog in your browser, you should see your favicon appear beside the web address.