Thursday, April 14, 2011

How to add all social Bookmarking icons at the end of the blog

Hi friends ,i would like to explain the procedure of adding social bookmarking icons at the end of the posts in blog.here we are adding only 4 four important socail icons remaining will be added in the list
Just follow the steps
step1)click on the Design tab
Step2)click on the edit html tab
step3)first take the backup of your code before adding the button ,for back up click on the download full template button


step4) click on the Expan widgets check box

step5)click ctrl+f and enter <div class='post-footer'>

step6)just enter this code  after this line

<div class='social-links'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fl'>If you like this article, please sharing it!</div>

<div class='fr'>
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Bookmark at Delicious'><img alt='Icon' src='http://lh3.ggpht.com/_4_wf1DKMvX4/TMWtaDNdeLI/AAAAAAAABnQ/lXE_PBJ0jvs/ico-soc1.gif'/></a> 


<a expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Bookmark at Mixx'><img alt='Icon' src='http://lh3.ggpht.com/_4_wf1DKMvX4/TMWtajQHeKI/AAAAAAAABnY/mTcuJkKrXR4/ico-soc2.gif'/></a> 

<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Bookmark at StumbleUpon'><img alt='' src='http://lh6.ggpht.com/_4_wf1DKMvX4/TMWta08BilI/AAAAAAAABnc/KA2JKyrfQTA/ico-soc3.gif'/></a> 

<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Bookmark at Digg'><img alt='Icon' src='http://lh3.ggpht.com/_4_wf1DKMvX4/TMWtbAh1VeI/AAAAAAAABng/EuDEkRfHYnk/ico-soc4.gif'/></a> 
<a expr:href='&quot;http://dotnetshoutout.com/Submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' expr:id='data:widget.instanceId + &quot;_kickit&quot;' rel='nofollow' rev='vote-for'><img border='0' height='16' src='http://3.bp.blogspot.com/-aFxI8tNB4M4/TYNRQMC9GfI/AAAAAAAAAFY/48oVb-eNLmI/s320/dotnetshoutout.png' width='16'/></a>
<!-- AddToAny BEGIN -->
<a class='a2a_dd' href='http://www.addtoany.com/share_save'><img alt='Share/Bookmark' border='0' height='16' src='http://static.addtoany.com/buttons/share_save_171_16.png' width='171'/></a>
<p class='a2a_linkname_escape' style='display:none'><data:post.title/></p><script type='text/javascript'>var a2a_config = a2a_config || {};a2a_config.linkname_escape=1;a2a_config.linkurl=&quot;<data:post.url/>&quot;;</script><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/>
<!-- AddToAny END -->
</div>

step7)click on the ctrl+f and search for </head> and copy the following code before this line

/*- Social Links -*/
.social-links {
    background: url(http://lh5.ggpht.com/_4_wf1DKMvX4/TMWjWMQf2jI/AAAAAAAABmo/PGIYUdITVwU/box-bgr2.gif) #f1f1f1 repeat-x top;
    height: 42px;
    padding: 0 18px;
}
.social-links .fl {
    line-height: 42px;
}
.social-links .fl span {
    background: url(http://lh5.ggpht.com/_4_wf1DKMvX4/TMWm5e4uSUI/AAAAAAAABm4/HH-GXMtZcVA/comment_count_bg.gif) no-repeat center left;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    padding: 4px 0 8px 0;
    width: 33px;
    margin-right: 6px;
    display: inline-block;
    line-height: 32px;
}
.social-links .fr {
    padding: 9px 0 0;
}
.social-links .fr span {
    line-height: 21px;
}
.social-links img {
    margin: 0 0 0 2px;
}

step7)finally click on save template

That's it...this button will appear at the end of post in blogger
developercode
About the Author
Asha is an Engineering student at JNTU university from India.She loves to blog about SEO, Blogging Tricks, Software and anything related to Technology.

Labels: , , , ,

6 Comments:

At March 21, 2011 at 7:39 PM , Blogger Dotnet Tutorials said...

Thanks........

 
At March 29, 2011 at 1:03 PM , Blogger Tarun Dudhatra said...

Thanks tannu,


This is very informative tips and also it will help to share on popular site from where we can get noticed by other user as well.

DotNet Stuff

 
At March 30, 2011 at 8:45 AM , Blogger Tanisha said...

Welcome.........

 
At April 11, 2011 at 2:17 PM , Anonymous Anonymous said...

Good One Taanu

 
At June 28, 2011 at 10:17 AM , Anonymous Tanisha said...

Welcome.........

 
At June 28, 2011 at 10:17 AM , Anonymous Anonymous said...

Good One Taanu

 

Post a Comment

Subscribe to Post Comments [Atom]

Links to this post:

Create a Link

<< Home