How to Modify Blogger Share Button Tweak Valid HTML5 CSS3

Actually Blogger has been updating its share button quite a bit by adding Pinterest button. But just now I am thinking of making it valid HTML5 and CSS3.

At some time ago I have made a post about Blogger share button but still without the Pinterest button because at that blogger has not updated its share button so that it appears only 4 buttons added by G + key.

Well this time there is a different from the previous post. Besides now there is Pinterest button, I also will bring up the Orkut button. In the previous post I also can not display the default button Blogger share button on the template using CSS Reset Blogger Tweak . But at that time I outsourced it by making its own sharenya button to be displayed in a template that already uses a trick to hide CSS Reset Blogger.

Well this time I use a different way to make Blogger share button is valid HTML5 and CSS3 and can be used in the default template Blogger, custom templates, and templates that use the trick of hiding CSS Reset Blogger. But there is little difference in the template that uses the trick to hide CSS Reset Blogger, to display this share button should be added CSS code share button it.

Well we start with using Blogger's default template and custom templates that have not used the trick of hiding CSS Reset Blogger.

For Blogger default template please find the code below, for custom template usually no already exist so please save wherever you want under post.

<!-- share buttons --> 
<div class='post-share-buttons goog-inline-block'> 
<b:if cond='data:post.sharePostUrl'> 
<b:include data='post' name='shareButtons'/> 
</b:if> 
</div> 

Then please replace with the code below

<div class='post-share-buttons goog-inline-block'> 
<a class='goog-inline-block share-button sb-email' expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=email&quot;' target='_blank' title='Email This'><span class='share-button-link-text'>Email This</span></a><a class='goog-inline-block share-button sb-blog' expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=blog&quot;' onclick='window.open(this.href, "_blank", "height=270,width=475"); return false;' target='_blank' title='BlogThis!'><span class='share-button-link-text'>BlogThis!</span></a><a class='goog-inline-block share-button sb-twitter' expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=twitter&quot;' target='_blank' title='Share to Twitter'><span class='share-button-link-text'>Share to Twitter</span></a><a class='goog-inline-block share-button sb-facebook' expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=facebook&quot;' onclick='window.open(this.href, "_blank", "height=430,width=640"); return false;' target='_blank' title='Share to Facebook'><span class='share-button-link-text'>Share to Facebook</span></a> 
<a class='goog-inline-block share-button sb-orkut' expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=orkut&quot;' target='_blank' title='Share to Orkut' style='margin-left:-4px'><span class='share-button-link-text'>Share to Orkut</span></a> 
<a class='goog-inline-block share-button sb-pinterest' expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=pinterest&quot;' target='_blank' title='Share to Pinterest' style='margin-left:-4px'><span class='share-button-link-text'>Share to Pinterest</span></a><div class='goog-inline-block dummy-container'><div class='g-plusone' data-size='medium'></div></div> 
</div> 

DEMO

And for templates that already use the trick to hide CSS Reset Blogger please use the HTML code below.

<div class='post-share-buttons goog-inline-block'> 
<a class='goog-inline-block share-button sb-email' expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=email&quot;' target='_blank' title='Email This'><span class='share-button-link-text'>Email This</span></a><a class='goog-inline-block share-button sb-blog' expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=blog&quot;' onclick='window.open(this.href, "_blank", "height=270,width=475"); return false;' target='_blank' title='BlogThis!'><span class='share-button-link-text'>BlogThis!</span></a><a class='goog-inline-block share-button sb-twitter' expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=twitter&quot;' target='_blank' title='Share to Twitter'><span class='share-button-link-text'>Share to Twitter</span></a><a class='goog-inline-block share-button sb-facebook' expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=facebook&quot;' onclick='window.open(this.href, "_blank", "height=430,width=640"); return false;' target='_blank' title='Share to Facebook'><span class='share-button-link-text'>Share to Facebook</span></a> 
<a class='goog-inline-block share-button sb-orkut' expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=orkut&quot;' target='_blank' title='Share to Orkut'><span class='share-button-link-text'>Share to Orkut</span></a> 
<a class='goog-inline-block share-button sb-pinterest' expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=pinterest&quot;' target='_blank' title='Share to Pinterest'><span class='share-button-link-text'>Share to Pinterest</span></a><div class='goog-inline-block dummy-container'><div class='g-plusone' data-size='medium'></div></div> 
</div> 

Then add the CSS code below and save it under </ style> code

.post-share-buttons{display:inline-block;margin-top:.5em;vertical-align:middle} 
.share-button{width:20px;height:20px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuQFolb71YT_bLaxiZecTg3R_LRlfiEAG39VmnD02xSm_QHpazYf1Ikce8YlEsKruv2_pSA6YLvEiaKo5zHihPNyfIKmq3kEMVN7mL7XyOKRj20zyrf_fHx-PK8MPEMO32bCQhdz6xWdk/s1600/share_buttons_20_3.png) no-repeat left !important;overflow:hidden;margin-left:-1px;position:relative} 
.dummy-container{vertical-align:top;padding-left:.3em} 
a:hover.share-button{text-decoration:none;z-index:1} 
.share-button-link-text{display:block;text-indent:-9999px} 
.sb-email{background-position:0 0 !important} 
a:hover.sb-email{background-position:0 -20px !important} 
a:active.sb-email{background-position:0 -40px !important} 
.sb-blog{background-position:-20px 0 !important} 
a:hover.sb-blog{background-position:-20px -20px !important} 
a:active.sb-blog{background-position:-20px -40px !important} 
.sb-twitter{background-position:-40px 0 !important} 
a:hover.sb-twitter{background-position:-40px -20px !important} 
a:active.sb-twitter{background-position:-40px -40px !important}.sb-facebook{background-position:-60px 0 !important}a:hover.sb-facebook{background-position:-60px -20px !important} 
a:active.sb-facebook{background-position:-60px -40px !important} 
.sb-buzz{display:none !important} 
.sb-orkut{background-position:-80px 0 !important;margin-left:-5px} 
a:hover.sb-orkut{background-position:-80px -20px !important} 
a:active.sb-orkut{background-position:-80px -40px !important} 
.sb-pinterest{background-position:-100px 0 !important;margin-left:-5px} 
a:hover.sb-pinterest{background-position:-100px -20px !important} 
a:active.sb-pinterest{background-position:-100px -40px !important} 
.goog-inline-block{position:relative;display:inline-block} 

For HTML5 and CSS3 validation please test the demo page at the link below

DEMO

Do not worry, Blogger share button is using css sprite for its image so not too burdensome loading blog.