Create beautiful Bookmarking Widget for Blogspot posts

Network Social the factors important for seo blogger and build links . How to add the button to bookmark society for blogger? 

With just 3 simple steps you will have a bar add very niceand cool to share this article on the social network as well .

• Stumbleupon
• Digg
• Reddit
• Delicious
• Yahoobuzz
• Blinklist
• Technorati
• Facebook
• Twitter
• Myspace
• Mixx
• Scriptstyle
• Designfloat
• Comfeed
• Newsvine
• Linkedin
• Google
• Friendfeed

Step 1:

A. antenna input into account blogger you , the Design > Edit HTML .  
Check utility Expand
Then , find the following code :

]]></ B: skin>

Insert following code immediately before it:

div.sexy-bookmarks {margin: 20px 0 0 0; border: 0; outline: none; clear: both! important 'div.sexy-bookmarks-expand} {height: 29px; overflow: hidden}. sexy-bookmarks-bg- sexy. sexy-love-bookmarks-bg {background-image: url ('http://img31.imageshack.us/img31/176/sexytrans.png')! important; background-repeat: no-repeat} div. sexy-love-bookmarks-bg {padding: 26px 0 0 10px; background-position: left-1148px! important '} ul.socials div.sexy-bookmarks {width: 100%! important; margin: 0! important; padding: 0 ! important; float: left} div.sexy-bookmarks ul.socials li {display: inline! important; float: left! important; list-style-type: none! important; margin: 0! important; height: 29px! important ' ; width: 60px! important; cursor: pointer! important; padding: 0! important 'div.sexy-bookmarks ul.socials} li: before, bookmarks ul.socials div.sexy-li: after, div.sexy-ul bookmarks. socials li a: before, div.sexy-bookmarks ul.socials li a: after {content: none! important '} ul.socials div.sexy-bookmarks a {display: block! important; width: 60px! important; height: 29px ! important; text-indent:-9999px! important; background-color: transparent! important '} ul.socials div.sexy-bookmarks a: hover {background-color: transparent! important'}. sexy-digg. sexy-digg: hover,. sexy-reddit. sexy-reddit: hover,. sexy-stumbleupon. sexy-stumbleupon: hover,. sexy-delicious. sexy-delicious: hover,. sexy-yahoobuzz. sexy-yahoobuzz: 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-scriptstyle. sexy-scriptstyle: hover,. sexy-designfloat. sexy-designfloat: hover,. sexy-Comfeed ,. sexy-Comfeed: hover,. sexy-Newsvine. sexy-Newsvine: hover,. sexy-linkedin. sexy-linkedin: hover,. sexy-google. sexy-google: hover,. sexy-FriendFeed, no-repeat! important; border: 0; outline: none;}. sexy-digg {background-position:-980px bottom! important '}. sexy-digg: ​​hover {background-position:-980px top! important'}. sexy- reddit {background-position:-700px bottom! important '}. sexy-reddit: hover {background-position:-700px top! important'}. sexy-stumbleupon {background-position:-630px bottom! important '}. sexy-stumbleupon: hover {background-position:-630px top! important '}. sexy-delicious {background-position:-1190px bottom! important'}. sexy-delicious: hover {background-position:-1190px top! important '}. yahoobuzz {background-sexy- position:-1120px bottom! important '}. sexy-yahoobuzz: hover {background-position:-1120px top! important'}. sexy-blinklist {background-position:-1260px bottom! important '}. sexy-blinklist: hover {background-position :-1260px top! important '}. sexy-technorati {background-position:-560px bottom! important'}. sexy-technorati: hover {background-position:-560px top! important '}. sexy-myspace {background-position:-770px bottom! important '}. sexy-myspace: hover {background-position:-770px top! important'}. sexy-twitter {background-position:-490px bottom! important '}. sexy-twitter: hover {background-position:-490px top ! important '}. sexy-facebook {background-position:-1330px bottom! important'}. sexy-facebook: hover {background-position:-1330px top! important '}. sexy-Mixx {background-position:-840px bottom! important'} . sexy-Mixx: hover {background-position:-840px top! important '}. sexy-scriptstyle {background-position:-280px bottom! important'}. sexy-scriptstyle: hover {background-position:-280px top! important '}. sexy-designfloat {background-position:-1050px bottom! important '}. sexy-designfloat: hover {background-position:-1050px top! important'}. sexy-Newsvine {background-position: bottom left! important '}. sexy-Newsvine: hover {background-position: left top! important '}. sexy-google {background-position:-210px bottom! important'}. sexy-google: hover {background-position:-210px top! important '}. Comfeed {background-sexy- position:-420px bottom! important '}. sexy-Comfeed: hover {background-position:-420px top! important'}. sexy-linkedin {background-position:-70px bottom! important '}. sexy-linkedin: hover {background-position :-70px top! important '}. sexy-FriendFeed {background-position:-1750px bottom! important'}. sexy-FriendFeed: hover {background-position:-1750px top! important '}. sexy-link {margin-left: 25px; float: left}. sexy-link A {padding: 10px 0; width: 470px; text-align: right; border: 0; outline: none}
 

Step 2:

Find the code:

</ Head>

Insert following code immediately before it:

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/> <script type='text/javascript'> jQuery (document). ready (function () {/ / xhtml 1.0 strict way of using target _blank jQuery ('. a.external sexy-bookmarks'). attr ("target", "_blank"); / / this sets the auto vertical block khi expand there are more than / / one row of bookmarks. sexyBaseHeight var = jQuery ('. sexy-bookmarks'). height (); var sexyFullHeight = jQuery ('. sexy-ul bookmarks. socials'.) height () if (sexyFullHeight> sexyBaseHeight) {jQuery ('. sexy-bookmarks-expand'). hover (function () {jQuery (this). animate ({height: sexyFullHeight + 'px'}, {duration: 400, queue: false});}, function () {jQuery (this). animate ({height: sexyBaseHeight + 'px'} , {duration: 400, queue: false});});} / / autocentering if (jQuery ('. sexy-bookmarks-center')) {var sexyFullWidth = jQuery ('. sexy -bookmarks '). width (); var sexyBookmarkWidth = jQuery ('. sexy-bookmarks: first ul.socials li '). width (); var sexyBookmarkCount = jQuery ('. sexy -bookmarks: first ul.socials li '). length; var numPerRow = Math.floor (sexyFullWidth / sexyBookmarkWidth); var sexyRowWidth = Math.min (numPerRow, sexyBookmarkCount) sexyBookmarkWidth; var sexyLeftMargin = (sexyFullWidth-sexyRowWidth) / 2; jQuery ('. sexy-bookmarks-center'). css ('margin-left', sexyLeftMargin + 'px');}}) </ script>  

Step 3:

Find the code (check the "Expand utility" to find):

<data:post.body/>

When found, please insert the following code after it:

<Div class = 'bookmarks sexy-sexy-sexy-bookmarks bookmarks-expand-bg-love' style = 'margin: 20px 0 0 0! Important; padding: 25px 0 0 10px! Important; height: 29px; / * the height of the icons (29px) * / display: block! important; clear: both! important; '> <ul class='socials'> <li class='sexy-delicious'> <a class =' ​​external 'expr: href = '"http://del.icio.us/post?url =" + data: post.url + "& title =" + data: post.title' rel = 'nofollow' title = ' Share this on del.icio.us "> Share this on del.icio.us </ a> </ li> <li class='sexy-digg'> <a class = 'external' expr: href = '" http://digg.com/submit?phase=2&url = "+ data: post.url +" & title = "+ data: post.title 'rel =' nofollow 'title =' Digg this ! '> Digg this </ a> </ li> <li class='sexy-stumbleupon'> <a class =' ​​external 'expr: href =' "http://www.stumbleupon.com/submit? url = "+ data: post.url +" & title = "+ data: post.title 'rel =' nofollow 'title =' Stumble upon something good? Share it on StumbleUpon '> Stumble upon something good? Share it on StumbleUpon </ a> </ li> <li class='sexy-reddit'> <a class = 'external' expr: href = '"http://reddit.com/submit?url =" + data: post.url + "& title =" + data: post.title 'rel =' nofollow 'title =' Share this on Reddit "> Share this on Reddit </ a> </ li> <li class = 'sexy-google'> <a class = 'external' expr: href = '"http://www.google.com/bookmarks/mark?op=add&bkmk =" + data: post.url + "& title =" + data: post.title 'rel =' nofollow 'title =' Add this to Google Bookmarks '> Add this to Google Bookmarks </ a> </ li> <li class =' ​​sexy -twitter '> <a class =' ​​external 'expr: href =' "http://twitter.com/home?status=Reading:" + data: blog.title + "-" + data: post . url + "(@ NAME)" 'rel =' nofollow 'title =' Tweet This! '> Tweet This! </ a> </ li> <li class='sexy-facebook'> <a class = 'external' expr: href = '"http://www.facebook.com/share.php?u =" + data: post.url + "& title =" + data: post.title' rel = 'nofollow' title = 'Share this on Facebook'> Share this on Facebook </ a> </ li> <li class='sexy-mixx'> <a class = 'external' expr: href = '" http://www.mixx.com/submit?page_url = "+ data: post.url 'rel =' nofollow 'title =' Share this on Mixx '> Share this on Mixx </ a> </ li> < li class = 'sexy-Comfeed'> <a class='external' expr:href='data:blog.homepageUrl + "feeds/posts/default"' rel='nofollow' title='Subscribe'> Subscribe </ a> </ li> <li class='sexy-yahoobuzz'> <a class = 'external' expr: href = '"http://buzz.yahoo.com/submit/?submitUrl =" + data: post.url 'rel =' nofollow 'title =' Buzz up! '> Buzz up! </ a> </ li> <li class='sexy-linkedin'> <a class =' ​​external 'expr: href =' "http://www.linkedin.com/shareArticle?mini=true&url =" + data: post.url + "& title =" + data: post.title 'rel =' nofollow 'title = 'Share this on Linkedin'> Share this on Linkedin </ a> </ li> <li class='sexy-designfloat'> <a class = 'external' expr: href = '"http://www. designfloat.com / submit.php? url = "+ data: post.url +" & title = "+ data: post.title 'rel =' nofollow 'title =' Submit this to DesignFloat '> Submit this to DesignFloat </ a> </ li> <li class='sexy-technorati'> <a class = 'external' expr: href = '"http://technorati.com/faves?add =" + data : post.url + "& title =" + data: post.title 'rel =' nofollow 'title =' Share this on Technorati '> Share this on Technorati </ a> </ li> <li class = 'sexy-scriptstyle'> <a class = 'external' expr: href = '"http://scriptandstyle.com/submit?url =" + data: post.url + "& title =' + data: post.title 'rel =' nofollow 'title =' Submit this to Script & Style "> Submit this to Script & Style </ a> </ li> <li class='sexy-myspace'> <a class = 'external' expr: href = '"http://www.myspace.com/Modules/PostTo/Pages/?u=http" + data: post.url + "& title =' + data : post.title 'rel =' nofollow 'title =' Post this to MySpace "> Post this to MySpace </ a> </ li> <li class='sexy-blinklist'> <a class = 'external' expr: href = '"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url =" + data: post.url + "& title =" + data: post . title 'rel =' nofollow 'title =' Share this on Blinklist '> Share this on Blinklist </ a> </ li> <li class='sexy-friendfeed'> <a class =' ​​external 'expr: href = '"http://friendfeed.com/?url =" + data: post.url + "& title =" + data: post.title' rel = 'nofollow' title = 'Share this on FriendFeed '> Share this on FriendFeed </ a> </ li> <li class='sexy-newsvine'> <a class =' ​​external 'expr: href =' "http://www.newsvine.com/_tools/ seed & save! u = "+ data: post.url +" & title = "+ data: post.title 'rel =' nofollow 'title =' Seed this on Newsvine '> Seed this on Newsvine </ a> </ li> </ ul> <div style='clear:both;'/> </ div>

Save and view results Nhe!
You can view this demo below.
I wish you success!