Google Buzz Buttons [With Share-Counter]

Instructions to add these official Google-Buzz buttons (to Blogger Blogs):

STEP #1

Visit this page: Google-Buzz Stuff

Click on the link "Post To Buzz" and in the next page,

select the type of button you want to use on your blog.

URL To Post       - Containing Page

Image To Post     - Let it be None.

STEP #2
Log in to Blogger, go to Layout -> Edit html and tick the tick-box "Expand Widget Tempaltes".
And find (CTRL+F) this code in the tempalte:

<data:post.body/>

Immediately Before that paste this code below,

<!--BUZZ-STARTS-->
<div style='border:0px !important;text-align:right;margin-top:-42px;'>
Google Buzz Code Here</div>
<!--BUZZ-STOPS-http://youtrickz.blogspot.com-->

Make sure to change the Google Buzz Code with the code you got from the step 1

Then Save.

StumbleUpon Buttons [With Counter]

STEPS TO FOLLOW:

STEP #1
Go to this page StumbleUpon Buttons and select the type of button you want to use on your blog.

STEP #2
Now log in to Blogger, go to Layout -> Edit HTML and mark the tick box "Expand Widget Templates". Then find (CTRL+F) this code in your template:

<data:post.body/>

And immediately ABOVE/BEFORE it, paste the code you just got from StumbleUpon, with two more additional lines of code (highlighted as BOLD, below) to hide these buttons in your blogs homepage.

<!--SU-BUTTON-STARTS-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
&lt;script src=&quot;http://www.stumbleupon.com/hostedbadge.php?s=2&quot;&gt;&lt;/script&gt;
</b:if>
<!--SU-BUTTON-STOPS-->

Save the template and Show off your big numbers!

Add Digg Button

Log in to your blogger account
Go to edit html
Make sure to back up your template first
Now find this 
<data:post.body/>


Immediately before that paste this code
<!-- DIGG -->
<div style='float:right;'><script type='text/javascript'>digg_url = '<data:post.url/>';</script><script src='http://digg.com/tools/diggthis.js' type='text/javascript'/></div>

Then Save.

Credits

Tweets Button

Log in to your blogger account

go to Edit html
Before we proceed Backup your Templates first
Now find this piece of code
<data:Post.body/>

Immediately before that paste this code:

For Upper Right  Side of the blog here;

<div style="float:right;padding:4px;">
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'Your Twitter Username here';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

For Upper Left side of the blog here;

<div style="float:left;padding:4px;">
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'your_twitter_user_name';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

The Save.  you successfully have

Facebook Like Button

Log in to your blogger account
Go to edit html
Back up your template first
Find this
<data:post.body/>

Immediately after that paste this code
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=recommend&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>
</b:if>
If you want to show everywhere, the Line in Red.

Try changing "action=like" to "action=recommend" 
Try changing "layout=button_count" to "layout=standard" a
Try changing "colorscheme=light"  to "colorscheme=dark" or "colorscheme=evil"


Preview whats Suits you, then Save.

AddThis Inside Post

I tried adding the "cool" new version of the AddThis bookmarking widget to this blog and found that it did not work as advertised. It was shown to have a dropdown menu, but that was not the case.

This is most likely due to the new lingo blogger's new templates use.

I searched for a bit until my patience timer ran out and having found no information with a fix -- I wrote one myself.

Rather than have a lot of people ask me how to make it work I thought I'd save myself a ton of time and just post a short HOWTO right here where you can see it working.

First register yourself with AddThis if you haven't already.

Now follow these instructions:

1.) Log into your Blogger account
2.) Go to 'Edit HTML'
3.) Click 'Expand Widget Templates'
4.) Search for: <!-- quickedit pencil -->
5.) Add the following code immediately above it -- no edits required

<!-- AddThis Bookmark Button BEGIN -->
<div class="snarf-border">
<script type = 'text/javascript'>
  addthis_url   = '<data:post.url/>';
  addthis_title = '<data:post.title/>';
  addthis_pub   = '<data:blog.url/>';
</script><script
 src='http://s7.addthis.com/js/addthis_widget.php?v=12'
 type='text/javascript' />
</div>
<!-- AddThis Bookmark Button END -->

If your template adds borders to images and you don't want this widget to have a border then go to the top of the template and search for:

body {

then find the closing brace '}' for the 'body {' block and right beneath it add the following code:

.snarf-border a img { border: none; }

Create a MultiTab

Having multi tab on your blog will decrease space and its more portable.try to click image at your left side to see the original image of Multi tab.

Do you want to have a multi tab for your blogger?

Login to blogger, go to Layout > Edit HTML

Then find this code

</head>

Immediately before that paste the following codes below.

<script src='http://files.trickstutor.co.cc/uploads/2/1/4/1/2141293/tabber.js' type='text/javascript'/>
<link MEDIA='screen' TYPE='text/css' href='http://files.trickstutor.co.cc/uploads/2/1/4/1/2141293/example.css' rel='stylesheet'/>

Then save it.

ok now go to page element > add a gadget > Html/javascript

and paste the follow code for your tab,

<div class="tabber">

    <div class="tabbertab">
    <h2>Tab 1</h2>
    <p>Tab 1 content.</p>
    </div>

    <div class="tabbertab">
    <h2>Tab 2</h2>
    <p>Tab 2 content.</p>
    </div>

    <div class="tabbertab">
    <h2>Tab 3</h2>
    <p>Tab 3 content.</p>
    </div>
    </div>

The text in blue color is the tab Menu names,

While the text in red is the Menu contents

Create Vertical Menu

We will make a vertical menu like the image. Ok let's do it 

Login to blogger then choose "Layout-->Edit HTML"
Find this piece of code

]]></b:skin>

Immediately before that paste this code

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/blue2.gif');
}

* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }

You can change the menu color, look at the red text (blue1.gif and blue2.gif). Change it with some color menu below. 

For example, if you want to choose red color, then the code would be like this :

.glossymenu li a{
background: white url('http://blog.superinhost.com/vertical/red.gif') repeat-x bottom left;

Then

.glossymenu li a:hover{
background-image: url('http://blog.superinhost.com/vertical/red.gif');

Sharing is Caring Bookmarks

Social networking buttons widget is a must for blogs and moreover you must be very creative while adding these buttons.
To make your work easier, here's an attractive bookmarking widget, that by default partially hides the buttons and shows them only when a visitor hovers his mouse-cursor over the icons.

Screenshot:

Log in to your blogger account

go to design > edit html

Find this piece of code

</head>

Immediately before that paste this code

<!-- Sharing is caring -->
<style type='text/css'>
div.sexy-bookmarks {
height:54px;
background:url(&#39;http://img714.imageshack.us/img714/57/sharing.png&#39;) no-repeat left bottom;
position:relative;
width:540px;
}
div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url(&#39;http://i43.tinypic.com/2ueii3t.png&#39;) no-repeat right bottom;
position:absolute;
right:-17px;
}
div.sexy-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}
div.sexy-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}
div.sexy-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;
}
.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
background:url(&#39; http://img688.imageshack.us/img688/3998/sexybookmarksbuttons.png&#39;) no-repeat !important;
}
.sexy-furl {
background-position:-300px top !important;
}
.sexy-furl:hover {
background-position:-300px bottom !important;
}
.sexy-digg {
background-position:-500px top !important;
}
.sexy-digg:hover {
background-position:-500px bottom !important;
}
.sexy-reddit {
background-position:-100px top !important;
}
.sexy-reddit:hover {
background-position:-100px bottom !important;
}
.sexy-stumble {
background-position:-50px top !important;
}
.sexy-stumble:hover {
background-position:-50px bottom !important;
}
.sexy-delicious {
background-position:left top !important;
}
.sexy-delicious:hover {
background-position:left bottom !important;
}
.sexy-yahoo {
background-position:-650px top !important;
}
.sexy-yahoo:hover {
background-position:-650px bottom !important;
}
.sexy-blinklist {
background-position:-600px top !important;
}
.sexy-blinklist:hover {
background-position:-600px bottom !important;
}
.sexy-technorati {
background-position:-700px top !important;
}
.sexy-technorati:hover {
background-position:-700px bottom !important;
}
.sexy-myspace {
background-position:-200px top !important;
}
.sexy-myspace:hover {
background-position:-200px bottom !important;
}
.sexy-twitter {
background-position:-350px top !important;
}
.sexy-twitter:hover {
background-position:-350px bottom !important;
}
.sexy-facebook {
background-position:-450px top !important;
}
.sexy-facebook:hover {
background-position:-450px bottom !important;
}
.sexy-mixx {
background-position:-250px top !important;
}
.sexy-mixx:hover {
background-position:-250px bottom !important;
}
.sexy-script-style {
background-position:-400px top !important;
}
.sexy-script-style:hover {
background-position:-400px bottom !important;
}
.sexy-designfloat {
background-position:-550px top !important;
}
.sexy-designfloat:hover {
background-position:-550px bottom !important;
}
.sexy-syndicate {
background-position:-150px top !important;
}
.sexy-syndicate:hover {
background-position:-150px bottom !important;
}
.sexy-email {
background-position:-753px top !important;
}
.sexy-email:hover {
background-position:-753px bottom !important;
}
</style>
<!-- /Sharing is caring -->

 Now find this code

<data:post.body/>

 Immediately After that paste this code

<!-- Sharing is caring -->
        <div class='sexy-bookmarks'>
        <ul class='socials'>
        <li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
        <li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
        <li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
        <li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
        <li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
        <li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
        <li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
        <li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
        <li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
        <li class='sexy-syndicate'><a href='FeedBurner URL' title='Subscribe to RSS'/></li>
        <li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
        </ul></div>
        <!-- /Sharing is caring -->

Replace FeedBurner URL with your blog RSS feed url.

Then Save.

Facebook Like for Blogger

Having Facebook like button under or even before your post makes your blog cool and hot, so come on and get start now to have your dream Facebook like button






Log in to your blogger account
Go to edit html
Back up your template first
Find this

<data:post.body/>

Immediately after that paste this code

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

</b:if>

If you want to show everywhere, Remove the Line in Red.

Try changing "action=like" to "action=recommend" 
Try changing "layout=button_count" to "layout=standard" a
Try changing "colorscheme=light"  to "colorscheme=dark" or "colorscheme=evil"


Preview whats Suits you, then Save.

Tweet This

Want some tweet button on every post?

so you know if your reader like your post

you can see a Number of every click on it.

How to Install to your blog?

Log in to your blogger account

Go to Edit html
Before we proceed Backup your Templates first
Now find this piece of code

<data:post.body/>

Immediately before that paste this code:

For Upper Right  Side of the blog here;
 

<div style="float:right;padding:4px;">
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'Widgetscorner';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

For Upper Left side of the blog here;

<div style="float:left;padding:4px;">
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
tweetmeme_source = 'Widgetscorner;
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>
</div>

Make sure to change the Widgetscorner  username with your own.
Then Save.

Bouncing Bookmarks

Bouncing Website Bookmarks for your Blog.
to spice up your blog now.

How to Implement to your blog?

Log in to your blogger account
Go to Edit Html
Make sure to back up your templates first okies
Now find this code.

</head>

Immediately before that paste this code

<!--BOUNCING-ICONS-START-->
<link href='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/screen2.css' media='all' rel='stylesheet' type='text/css'/>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script src='http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/execute.js' type='text/javascript'/>
<!--BOUNCING-ICONS-STOP-Help-http://YouTrickz.blogspot.com-->

Next Find this

<data:post.body/>

Immediately After that paste this

<!--SOCIAL-BOOKMARKING-BUTTONS--><br/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<center>
<ul id='nav-shadow'>
<li class='button-color-1'><a expr:href='&quot;http://twitter.com/home/?status=Currently reading-&quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank' title='Tweet This Post'/></li>
<li class='button-color-2'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='button-color-3'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='button-color-4'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='button-color-5'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li></ul></center>
<a href="http://bloggerstop.net/2009/10/bounce-share-social-bookmarking-widget.html" target="_blank"><span style="font-size: x-small;">Get this widget</span></a>
</b:if>
<!--SOCIAL-BOOKMARKING-BUTTONS-http://widgetboxx.blogspot.com-->

Then Save.

Add Digg Button

Log in to your blogger account
Go to edit html
Make sure to back up your template first

Now find this 

<data:post.body/>

Immediately before that paste this code

<!-- DIGG -->
<div style='float:right;'><script type='text/javascript'>digg_url = '<data:post.url/>';</script><script src='http://digg.com/tools/diggthis.js' type='text/javascript'/></div>

Then Save. 

Digg Button appears like this:
 

SocioFluid Dock Bookmark

Do you want to have a Cool Bookmark on your blog? Go to SocioFluid ,it is a Dock Site Bookmark,

How to get Dock like Bookmark on your blog?

Go to SocioFluid and generate your own Website you want to add on your bookmark dock.

See Sample Image:

Click to see Full size,

Try this Sample Below:

GoogleBuzz Buttons [With Counter]

In this tutorial you will see and learn on how to get GoogleBuzz to your blogs...See instructions to add these official Google-Buzz buttons (to Blogger Blogs):

STEP #1

Visit this page: Google-Buzz Stuff

Click on the link "Post To Buzz" and in the next page,

select the type of button you want to use on your blog.

URL To Post       - Containing Page

Image To Post     - Let it be None.

STEP #2
Log in to Blogger, go to Layout -> Edit html and tick the tick-box "Expand Widget Tempaltes".
And find (CTRL+F) this code in the tempalte:

<data:post.body/>

Immediately Before that paste this code below,

<!--BUZZ-STARTS-->
<div style='border:0px !important;text-align:right;margin-top:-42px;'>
Google Buzz Code Here</div>
<!--BUZZ-STOPS-http://youtrickz.blogspot.com-->

Make sure to change the Google Buzz Code with the code you got from the step 1

Then Save.

StumbleUpon Buttons [With Counter]

Now you can add "Stumble It" buttons/badges to your blogs, along with a counter to show the number of stumblers stumbled on your site/post via StumbleUpon.com
The buttons are straight from StumbleUpon, with no modification required. Your readers will simply click these buttons to submit your pages to StumbleUpon and all the visitors coming to your page from SU will be counted by SU and the number of visitors will be shown in these buttons. Of all the social bookmarking sites I have ever used, I prefer StumbleUpon for the massive traffic it provides.




Step by step guide on how to implement to your blogs/websites.
First of all  click this page StumbleUpon Buttons and select the type of button you want to use on your blog and you will see on the page like this:

In the main site you will see this button,so just click and you will proceed to "Design Page"

Here is the Design Page,click on the button you want to they will give you the code

Assuming you choose this design:

 

The code you will get is:

<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>

Now log in to Blogger, go to Layout -> Edit HTML and mark the tick box "Expand Widget Templates". Then find (CTRL+F) this code in your template:

<data:post.body/>

And immediately ABOVE/BEFORE it, paste the code you just got from StumbleUpon, with two more additional lines of code (highlighted as BOLD, below) to hide these buttons in your blogs homepage.

<!--SU-BUTTON-STARTS-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
&lt;script src=&quot;http://www.stumbleupon.com/hostedbadge.php?s=2&quot;&gt;&lt;/script&gt;
</b:if>
<!--SU-BUTTON-STOPS-->

 After that Just Save it and start Stumble.