iTechno Planet: Button

Showing posts with label Button. Show all posts

August 13, 2011

How To Add Yahoo! Buzz Button to blogger

Hi! dear visitors. yahoo is the second popular search engine in world. google is the first. yahoo is provide us a cool stuffs like a yahoo mail, yahoo games,auto insurance and more stuffs, so yahoo buzz is a new tool on yahoo. yahoo buzz use for send your blog posts to your yahoo friends using mail. so this is very good gadget for bloggers. so i hope you really like this gadget. please add your comments to this post..thanks for visiting my blog.

Now guys follow the simple steps below to do it:

1.Log in to your dashboard--> Design- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this.

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

4.Now add below code right after above line.

<div style='float:right;padding:5px;'><script badgetype='square' src='http://d.yimg.com/ds/badge2.js' type='text/javascript'><data:post.url/></script></div>

5.Now save your template and you are done.

How To Add jQuery Scroll To Top Button To Blogger

Hey! here is the beautiful jquery code for you :) this posts i'm gonna show you how to add scroll to top (back to top) button using jquery. this tute hava the 8 steps only.so we are ready! let's go! thank you for visiting my blog!

Now Follow the simple steps below to do it:

1.Login to your blogger dashboard--> Desing- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

$(function(){

$('a[href*=#top]').click(function() {

if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'')
&& location.hostname == this.hostname) {

var $target = $(this.hash);

$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');

if ($target.length) {

var targetOffset = $target.offset().top;

$('html,body').animate({scrollTop: targetOffset}, 1000);

return false;

}

}

});

});
//]]>
</script>
<!-- end scrolltop -->

4.Now scroll down where you see <body> tag

5.Replace <body> tag with <body id='top'>

6.Now again scroll down where you see </body> tag

7.Copy below code and paste it just before </body> tag

<div id='goingtop'>
<a href='#top' title='Go Top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgk6rHA0qJ4Hd9iUM2_pElcy3ie-_UJkCyHzsbTQLAipwS09dRBuZPNC_YAzhwq09gA18Ccqe2D1dahyOwYkP_3a8T8XOf5vn2k_w6xpYdLF7dotUkyAxPrDTNwjhForyuVrOc2fIyBejU/' style='right:20px; bottom:20px; position: fixed;'/></a></div>

8.Click on save template and you are done.

Picture From http://viralpatel.net/blogs/2009/05/implement-drag-and-drop-example-jquery-javascript-html.html

How To Add Automatic Read More With Thumbnail For Blogger

Hi friends. are you like to show summary of post on front page of blogger. is it too complicated ?? ok then go for this step.. this step really works!... Read More Function helps us to reduce the loading time of our blog.Look at my home page you can find a difference in the posts showing here and when you visit on the post item page. its automatically generates thumbnail for the post based on the images inside the posts which is quite cool. ok Friends... I think all you guys will love this blogger hack! read below steps to do this cool blogger hack..we will meet again in next post.Thank you.

How To Add Automatic Read More With Thumbnail For Blogger

1. Login To Your Blogger Dashboard--> Desing--> Edit HTML

2. Scroll Down To Where You See </head> tag .

3. Now Add Below Code Before </head> tag.

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

4. Scroll down to where you see <data:post.body/> tag.

5. Copy below code and paste it just after <data:post.body/>.

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi05n482HB_9ZMZjxTb0wEHzOnEn8waMHrhJaAw5mSktqogwyx3yXTQ_PVKTV_vAYDhFUwpVrhWbIVs_o5Myn8P69uUGtvkdmpSgCWSK4jRgS01FjANKljMEi51_zTYooajl_UvmUU8Yak/'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Note : Adjust description shown
summary_noimg = 430;
summary_img = 340;

Change The Height And Width of Image Thumbnail
img_thumb_height = 100;
img_thumb_width = 120;

6. Now Click On 'SaveTemplate' You are done...

Save And Share Blogger Posts Social Bookmarking Widget

Save And Share Blogger Posts Social Bookmarking Widget

1.Log in to your dashboard--> Desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see ]]></b:skin> tag.

4.Copy below code and paste immediately before it ]]></b:skin>

#bookmarks-footer {
padding: 0px 10px 0px 0px;
text-align: center;
overflow: hidden;
}
#bookmarks-footer a {
text-decoration:underline;
font-size:80%;
}
#bookmarks-footer a:hover {
text-decoration:none;
}
#bookmarks-footer span {
font-size: 27px;
line-height: 48px;
font-weight: bold;
padding-right: 5px;
}
#bookmarks-footer .stumble { background: url(http://i45.tinypic.com/20ua5j4.jpg) center top no-repeat;padding-top: 50px; display: block; width: 48px; float: left;margin-right:10px; }
#bookmarks-footer .digg{ background: url(http://i48.tinypic.com/30ldvmd.jpg) center top no-repeat;padding-top: 50px; display: block; width: 48px; float: left;margin-right:10px; }
#bookmarks-footer .tweet { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfFwxeJM62B1sOQDmFY1aO7oxYX1pAQnRZlE2u0S9rLadoK7QUxcBhEwZoIPVq7fYxIGlac_labIKipz9hDl0UNwN4Y2iiLa_wWW7LvBsT0awkZv-xpJ7K6BMUOD4ahEw22cKKk8D77u4/) center top no-repeat;padding-top: 50px; display: block; width: 48px; float: left;margin-right:10px; }
#bookmarks-footer .save { background: url(http://i48.tinypic.com/jl3v3q.jpg) center top no-repeat;padding-top: 50px; display: block; width: 48px; float: left;margin-right:10px; }
#bookmarks-footer .reddit { background: url(http://i45.tinypic.com/xgmwdf.jpg) center top no-repeat;padding-top: 50px; display: block; width: 48px; float: left;margin-right:10px; }
#bookmarks-footer .more { background: url(http://i49.tinypic.com/2mxeds8.jpg) center top no-repeat;padding-top: 50px; display: block; width: 48px; float: left; }

5.Now find this code: <data:post.body/> and replace it with the bellow code

<data:post.body/>

<div id='bookmarks-footer'>
<h3>Save and Share!</h3>
<a class='save' expr:href='&quot;http://del.icio.us/post?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on del.icio.us'>Save iT</a>
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Digg this!'>Digg this</a>
<a class='stumble' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'>Stumble It</a>
<a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Reddit'>Reddit It</a>
<a class='tweet' expr:href='&quot;http://twitter.com/home?status=Reading: &quot; + data:blog.title + &quot; - &quot; + data:post.url + &quot; (@BBW)&quot;' rel='nofollow' title='Tweet This!'>Twitter</a>
<a class='more' href='http://www.addtoany.com/share_save'>More</a>
</div>

6. Click on "Save Template" You are Done.

Cheers.!

Add Delicious Bookmark Buttons With Counter For Blogger

Add Delicious Bookmark Buttons With Counter For Blogger

1.Log in to your dashboard--> desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this <data:post.body/> Tag.

4.Copy below code and paste it just after the line <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='share-delicious'>
<div class='delicious' id='delic'>0</div>
<div class='delicious-b'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='blank'>delicious</a></div>
<script type='text/javascript'>
function delic(info) { 
if(!info[0]) return;
var num = info[0].total_posts;
if(!num) return; 
var delic = document.getElementById(&#39;delic&#39;);
delic.innerHTML = &#39;&#39; + num;
delic.style.textIndent = 0;
delic.style.paddingRight= &#39;6px&#39;;
}
</script>
<script expr:src='&quot;http://badges.del.icio.us/feeds/json/url/data?url= &quot; + data:post.url + &quot;&amp;callback=delic&quot;'/>
</div>
</b:if>
<div class='clear'/>

5.Now Scroll down to where you see ]]></b:skin> tag .

6.Copy below code and paste it just before the ]]></b:skin> tag.

Style 1:

.share-delicious{
width:50px;
height:63px;
text-align:center;
}

.delicious{
width:50px;
height: 45px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRBGYErGZY4OAGO0Z0ZWQlf1LjZVZyykAZTM3ECkZMHo1UuZVFaDpxy_p3XChMxgupNP1ZimsyJKE-kK3aDBmmK9zxOTQFkdH9DmFd0G2oZVBSGc11mgexBN10fsnpO731XWI-fQRBHFI/s1600/del+above.png) no-repeat;
font-weight: bold;
font-size: 16px;
font-family:arial;
color:#adadad;
margin:0 auto;
line-height:36px; 
}
.delicious-b{
font-size:10px;
text-transform:none;
color:#FFF;
margin:0 auto;
width:50px;
height:17px;
line-height: 17px;
}
.delicious-b a:link, .delicious-b a:visited{
color:#FFF;
font-weight:normal;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQTKl10faX-8E8J8cLljpVXH6lTdA7z09o5kf2SPpsJLFc_W3Tiv8iwr53Z7A3IW78Tc0dsojKxz5t8HBWGb07sxnVh3P6JKM18i82xc4BAS9AacGYa0uArsEY4JwtIJYNzA-Xz6PqF3E/s1600/del+new.png) no-repeat;
display: block;
text-decoration:none;
}
.delicious-b a:hover{
color:#11788b;
font-weight:normal;
text-decoration:none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQTKl10faX-8E8J8cLljpVXH6lTdA7z09o5kf2SPpsJLFc_W3Tiv8iwr53Z7A3IW78Tc0dsojKxz5t8HBWGb07sxnVh3P6JKM18i82xc4BAS9AacGYa0uArsEY4JwtIJYNzA-Xz6PqF3E/s1600/del+new.png) no-repeat center -17px;
display: block;
}

Style 2:

.share-delicious{
width:100px;
height:19px;
text-align:center;
font-family:arial;
}
.delicious{
width:46px;
height: 19px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRvIdDj9bBzH1ksgLSXzZckgEg0g8jaMaSRHc9qOBpl0Tm3jOko2PAqEFUO-ucoWOX2W-C5On6ZR8VtUOJ1iZEX1PU3p0D9nPus2OwJlPbDGS_LJ1GMQtO1PWIfRKqrx1pPcqn2DfdSs4/s1600/comp+del.png) no-repeat;
font-weight: bold;
font-size: 13px;
color:#999;
margin:0 auto;
line-height:18px; 
float:left;
}
.delicious-b{
font-size:10px;
text-transform:none;
color:#FFF;
margin:0 auto;
width:50px;
height:17px;
line-height: 17px;
float:left;
}
.delicious-b a:link, .delicious-b a:visited{
color:#FFF;
font-weight:normal;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQTKl10faX-8E8J8cLljpVXH6lTdA7z09o5kf2SPpsJLFc_W3Tiv8iwr53Z7A3IW78Tc0dsojKxz5t8HBWGb07sxnVh3P6JKM18i82xc4BAS9AacGYa0uArsEY4JwtIJYNzA-Xz6PqF3E/s1600/del+new.png) no-repeat;
display: block;
text-decoration:none;
}
.delicious-b a:hover{
color:#11788b;
font-weight:normal;
text-decoration:none;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQTKl10faX-8E8J8cLljpVXH6lTdA7z09o5kf2SPpsJLFc_W3Tiv8iwr53Z7A3IW78Tc0dsojKxz5t8HBWGb07sxnVh3P6JKM18i82xc4BAS9AacGYa0uArsEY4JwtIJYNzA-Xz6PqF3E/s1600/del+new.png) no-repeat center -17px;
display: block;
}

7.Now click on "Save template" you are done.

Cheers.

How To Add the Feedback Button to Your Blogger

1.Log in to your dashboard--> Desing- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this </head> Tag

4.Copy below code and paste it just after above code.

/* FEEDBACK SIDE TAB START http://btricks-tools.blogspot.com /* 
#fadeinbox {
  display:scroll;
  position:fixed;
  center:5px;
  left:0px;
  top:200px;
  }
/* FEEDBACK SIDE TAB End http://btricks-tools.blogspot.com/*

5. Save your template.

6.Now go to Desing --&-- Page Elements.

7.Click on 'Add a Gadget' on the sidebar.

8.Select 'HTML/Javascript' and add the one of code given below

<div id='fadeinbox'>
<a href='Your link' target='blank' title='Feedback or Requests'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-dBHEQuIoc2QYKfuNFsfBbOAfPjO_k_R7LWKKtrDDTR5hdmVkTAutOQwVePS-GszXRtTNl8iztj5OJDcsF-SuXGdJuDY6yQiMrXMWH8NMQxyOp8p1SMKGwG5HUMPTOVM59wCZek4Y5WA/'/></a>
</div>

9.Click on Save Javascript you are done..

Cheers..

How To Add Back to Top Button for Blogger

How To Add Back to Top Button for Blogger

1.Login to your blogger dashboard and go to Desing --& Page Elements.

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below and click save.

<!--Back to top Start bloggertricksandtoolz.com--><a alt="Back to Top" style="display:scroll;position:fixed;bottom:25px;right:5px;" href="#" title="Back to Top"><img onmouseover="this.src=&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzMK4JJknB4zvTGxG2RTW8yiMX-gxnJEjz8-4-HcKsjpxBEXE3CPZCwckKSOnq-6JHy_rGJbVlUkrzSO6DYVSMrinQ4uhGF3CI5W9RHSeqUIBPWFNInt5UgGOeU15r-GTdL5zl8_Vefw/&#39;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_UjadZlSmtKYiCTb3pgPK3G9utkR9lM28CIEtfI_kL2ae8nqtp01s59ML8RSIDesw08KMPuU1OgosoOLUVh1cn3Npz0cLCbiAs4vZaiuhyY1gZ6j6Y-gsHgmFZ39QLFUzA6oaOO_G4Bs/s1600/B2T_Small.jpg" onmouseout="this.src=&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDhyphenhyphenLsXQ81r-D99kT-dMyI8_iItETfYxLoM0_xe8MSPqbyoX46CUZ5xS7Ji9Rbs81ei2TbW_pnKB89p5g6G3b1JewmLYX1fgk9qIkIs8fWGTEJI-wIOUyRwHrSFGmBoI8fI96N6DcTrRQ/&#39;" /></a><!--BACK2TOP-IMAGE-STOPS--> 
<!--Back to top End bloggertricksandtoolz.com-->

Note: Change Back to Top Button name as you like

4.Now You are done.

Cheers

How To Create "Scroll to Top" Button to Blogger

How To Create "Scroll to Top" Button to Blogger

1.Log in to your dashboard--> Design- -> Edit HTML

2.Scroll down to where you see this:

]]></b:skin>

3.Now add below CSS code before ]]></b:skin> tag

/* to top */

#toTop { width:100px;background:#F4FFBF;border:1px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }

4.Now add below code before </body> tag:

<a href="#" id="toTop">^ Scroll to Top</a>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

<script type='text/javascript'>

/*-----------------------

* jQuery Plugin: Scroll to Top

* by Craig Wilson, Ph.Creative (http://www.ph-creative.com)

* Bring to you by Zen from http://zenplate.blogspot.com

* Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling.

* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx

* Do not delete these infomation

* Version: 1.0, 12/03/2009

-----------------------*/

$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});

$(function() {

$("#toTop").scrollToTop();

});

</script>

5.Now save your template and you are done.Look at the picture below.

How to Add FaceBook Like Button For Blogger

Facebook is most popular social network in world. facebook come with most important social plugins. " Facebook Like" is one of them. so otday i'm gonna show you how to add this LIKE BUTTON to your blog. i'm search this topic in google and; i have a most resualts. but not work any gadget. so i think write a right way to add FACEBOOK LIKE button to your blog. so this is your turn.. please add your comments, trouble and any in below comment form! Thank you!

follow the simple steps below to do it:

1.Login to your blogger dashboard--> Desing- -> Edit HTML

2. Scroll down to where you see <div class='post-header-line-1'/> tag

3.Copy below code and paste it just before the <div class='post-header-line-1'/> tag

<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=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>
</b:if>

4.click Save Template and you are done.

How To Add New Official Google +1 Button to Blogger

This tutorial I will explains, how to add blogger new Official google +1 button to blogger.This will more helpful if your template is a highly customized blogger template.But your template is a blogger default template, then you can add this share buttons editing the Blog Posts widget and enabling Show +1 Button in Page Elements section.

But this method does not work for you, follow the steps given below to add google +1 button to your blog

How To Add New Official Google +1 Button to Blogger

1.Login to your blogger dashboard--> Design- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this </Head> tag

4.Copy below code and paste it just before the </Head> tag

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

5.Now Scroll down to where you see this <div class="post-header-line-1"> tag

6.Copy below code and paste it just before the <div class="post-header-line-1"> tag

+1 Button Small (15px)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-share-buttons' style='float:right;margin-right:10px;'>
<g:plusone size="small"></g:plusone>
</div>
</b:if>

+1 Button Medium (20px)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-share-buttons' style='float:right;margin-right:10px;'>
<g:plusone size="medium"></g:plusone>
</div>
</b:if>

+1 Button Standard (24px)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-share-buttons' style='float:right;margin-right:10px;'>
<g:plusone></g:plusone>
</div>
</b:if>

+1 Button Tall (60px)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-share-buttons' style='float:right;margin-right:10px;'>
<g:plusone size="tall"></g:plusone>
</div>
</b:if>

7.Save Your Template and you are done..

Please checkout more info

How To Add Official Google +1 Button to Blogger (Without Counter)

How To Add Official Google +1 Button to Blogger (Without Counter)

How To Add Official Google +1 Button to Blogger (Without Counter)

1.Login to your blogger dashboard--> Design- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this </Head> tag

4.Copy below code and paste it just before the </Head> tag

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

5.Now Scroll down to where you see this <div class="post-header-line-1"> tag

6.Copy below code and paste it just before the <div class="post-header-line-1"> tag

+1 Button Small (15px) Without Counter

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-share-buttons' style='float:right;margin-right:10px;'>
<g:plusone size="small" expr:href="data:post.url" count="false"></g:plusone>
</div>
</b:if>

+1 Button Medium (20px) Without Counter

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-share-buttons' style='float:right;margin-right:10px;'>
<g:plusone count="false" expr:href="data:post.url"></g:plusone>
</div>
</b:if>

+1 Button Standard (24px) Without Counter

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-share-buttons' style='float:right;margin-right:10px;'>
<g:plusone size="medium" count="false" expr:href="data:post.url"></g:plusone>
</div>
</b:if>

+1 Button Tall (60px) Without Counter

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='post-share-buttons' style='float:right;margin-right:10px;'>
<g:plusone size="tall"></g:plusone>
</div>
</b:if>

7.Save Your Template and you are done..

Please checkout more info

40 Dev Com Network Icons Set

40 Dev Com Network Icons Set

Download Now

Creative Childish Web Development Icons Pack

Creative Childish Web Development Icons Pack

Download Now

Download Cool Social Bookmarks icon Set For Free

Download Cool Social Bookmarks icon Set For Free

Download Now

August 12, 2011

Download Bevel Dark Social Bookmark Icon Pack For Free

Download Bevel Dark Social Bookmark Icon Pack For Free

Download Now

How To Add Official Linkedin Share Button to Blogger

How To Add Official Linkedin Share Button to Blogger

1.Log in to your Dashboard--> Design- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this <div class='post-header-line-1'/> tag

4.Copy below code and paste it just before the <div class='post-header-line-1'/> tag

Button 1

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right;margin-left:10px;'>
<script src='http://platform.linkedin.com/in.js' type='text/javascript'/><script data-counter='top' expr:data-url='data:post.url' type='in/share'/>
</div>
</b:if>

Button 2

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right;margin-left:10px;'>
<script src='http://platform.linkedin.com/in.js' type='text/javascript'/><script data-counter='right' expr:data-url='data:post.url' type='in/share'/>
</div>
</b:if>

Button 3

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right;margin-left:10px;'>
<script src='http://platform.linkedin.com/in.js' type='text/javascript'/><script expr:data-url='data:post.url' type='in/share'/>
</div>
</b:if>

5.Now Save Your Template and you are done..

Google Has Release of a New Social Button / +1 Button (plus one)

Google Has Release of a New Social Button / +1 Button (plus one)

Google has recently announced the release of a new social button it called +1 (plus one) Google +1 button is pretty much similar in purpose to the Facebook “Like” button, yet +1 buttons let people who love your webpage recommend it on Google search results. Please checkout more info

Enjoy New Social Button / +1 Button (plus one)

Cheers..

How To Add Search Box to Search in Your Blogsite(Website)

Hi my dear visitors. today im gonna show you how to a search box to blogger, I my self find out that Blogger Search engine is not good . Its result is not accuracy . I search for a term but it give me some posts that is not related to what I search . so here is the custom search box to blogger. i hope you really like my bpost. thank you for visitng my blog! we will meet again in next post.!

1.Login to your blogger account.Go Design--> Add a Gadget --> Select “HTML/JavaScript

2.Copy below code and paste it.Click save and refresh your site

<p align="left">
<form id="searchthis" action="YOUR BLOG URL/search" style="display:inline;" method="get">
<strong>NAME OF YOUR BLOG<br/></strong>
<input id="b-query" maxlength="255" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/>
</form></p>

Note: Remember to replace "YOUR BLOG URL" and "NAME OF YOUR BLOG" with your
details.
If you want to change the size of your search box than just change the value 20 to 35(any
value you like to get a bigger search box.
You can also change the “Search” button to say, “Hit” or “Go” or "Enter" or "Read more",
by changing the Value in the above html code.

3.You can see search box like below one.