HackingUniversity - Hacks . Tricks . How-To's

26 June 2012

Spread The Love Sharing Widget for Blogger & Wordpress

Spreading love by liking and sharing posts and no where a new task but the way of presenting that thing is really important bringing a nice looking sharing widget for blogger or wordpress which can applied really easily and works like a charm.

sharing widget

1. Open Blogger.com and navigate to Design > Template > Edit HTML.

2. Now press Ctrl + F and search for the ]]></b:skin> tag and paste the below code right above it.

.share_box {
background: url(http://i.imgur.com/lsrfd.gif);
background-repeat: no-repeat;
height: 29px;
width: 414px;
padding: 30px 0px 30px 0px;
display: block;
}

3. Now save the template and we have completed the styling of this widget now you can have place it where ever you wan too.

4. So now copy the below html code for the widget and paste it anywhere you wanna display the widget.

<div class="share_box">
<div style="display: block; float: right; margin-right: 15px"><g:plusone size="medium" expr:href="data:post.url" /><script type='text/javascript'>
                                  (function() {
                                    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
                                    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
                                    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
                                  })();
                                </script></div>
<div style="display: block; float: right">
<div class="fb-like" expr:href="data:post.url" data-show-faces="false" data-send="false" data-layout="button_count" data-font="verdana"></div></div></div>

5. So now you can add the above code to HTML/JavaScript gadget or if you wanna display this gadget right above the post footer than you can click on expand templates and then search for <data:post.body/> and add the above code right below it.

So that’s it now your widget is placed and ready to be tested out, so just refresh your blog and enjoy the new sharing gadget and let your readers spread some love.