The layout I’ll show in this blog post includes sites that are related to software development, but this can easily be modified by removing them or replacing them with other services appropriate to the specific particular blog.
Open your blogger dashboard and select the design option for your blog. Use the Download Full Template option in Edit HTML to save a copy of your current template. This is important to make sure you can go back to your current template if anything goes wrong.
In the Edit Template section, select Expand Widget Templates. Search for post-footer-line in the textbox that contains your template. These correspond to the lines with the built-in blogger sharing options and labels. I used post-footer-line-3 (was empty) and added another one (post-footer-line-4).
Following is the HTML to share on DZone, DotNetShoutout, DotNetKicks, Hacker News, Digg, Reddit, Google Buzz and Yahoo Buzz:
<div class='post-footer-line post-footer-line-3'>
<b:if cond='data:blog.pageType == "item"'>
<span style='top: 5px; position:relative; '>
<script type='text/javascript'>
var dzone_url = '<data:post.url/>';
var dzone_title = '<data:post.title/>';
var dzone_style = '2';
</script>
<script language="'javascript'"
src='http://widgets.dzone.com/links/widgets/zoneit.js'/>
</span>
<a expr:href='"http://dotnetshoutout.com/Submit?url=" +
data:post.url + "&title=" + data:post.title'
expr:id='data:widget.instanceId + "_shoutit"'
rel='nofollow' rev='vote-for'> <img alt='Shout it'
expr:src='"http://dotnetshoutout.com/image.axd?url=" +
data:post.url' style='border:0px; top: 2px; position:relative;'/></a>
<a expr:href='"http://www.dotnetkicks.com/submit/?url=" +
data:post.url + "&title=" + data:post.title'
expr:id='data:widget.instanceId + "_kickit"'
rel='nofollow'><img alt='Submit this story to DotNetKicks'
expr:src='"http://www.dotnetkicks.com/Services/Images/
KickItImageGenerator.ashx?url=" + data:post.url'/></a>
<a expr:href='"http://news.ycombinator.com/submitlink?u=" +
data:post.url + "&t=" + data:post.title' rel='nofollow'>
<img src='http://ycombinator.com/images/y18.gif'
title='Submit to Hacker News'/></a>
</b:if>
</div>
<div class='post-footer-line post-footer-line-4'>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
(function() {
var s = document.createElement('SCRIPT'),
s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<span style='top: 7px; position:relative; margin-right: 5px;'>
<a class='DiggThisButton DiggCompact'/>
</span>
<script>
reddit_url='<data:post.url/>';
reddit_title='<data:post.title/>';
</script>
<span style='top: 10px; position:relative; margin-right: 5px;'>
<script language="'javascript'"
src='http://reddit.com/button.js?t=1'/>
</span>
<a class='google-buzz-button' data-button-style='small-count'
href='http://www.google.com/buzz/post' rel='nofollow'
title='Post to Google Buzz'/>
<script src='http://www.google.com/buzz/api/button.js'
type='text/javascript'/>
<script type='text/javascript'>
yahooBuzzArticleHeadline = '<data:post.title/>';
yahooBuzzArticleSummary = '<data:post.title/>';
yahooBuzzArticleCategory = 'science';
yahooBuzzArticleType = 'text';
yahooBuzzArticleId = <data:post.url/>;
</script>
<span style='display: inline-block;'>
<script badgetype='text-votes'
src='http://d.yimg.com/ds/badge2.js' type='text/javascript'/>
</span>
</b:if>
</div>
Special blogger if at lines 2 and 17 make sure we only display the various share options on the actual post pages. Some of the share code above uses the current page’s URL, so if we wanted to share options in the list of blog posts in the home page of the blog, we would need to use alternate sharing code and move the general script files to the blog template.
Spans with relative positioning at lines 3, 27, 34 were added to align the corresponding share buttons.
The span at line 46 makes sure the Yahoo Buzz button code is contained in a block element. This fixes an issue on Internet Explorer, where the image shows way above the rest of the text.
The line 42 sets the Yahoo Buzz category to science, you might want to use a different category.
Below are some blog posts used as references for some of the share code:
