Making Share Keys Under Blog Posts

Making Share Keys Under Blog Posts - Certainly already familiar with the share button that is usually seen under blog posts, the function of the share button is to make it easier for visitors to share articles that we have posted on social media such as facebok, twitter, google +, Lintasme and other social networks.


Without installing this share button, the blogger has also provided a share button widget, but what's the power because the blogger's default share button is invalid HTML5 so it's good if we modify the share button below the blog post so that it can pass the W3C validator and be valid HTML5.

To make this share button only use CSS without using images, so the display of the share button is simpler and minimalist with the accompanying attractive colors. To install the share button under the blog post is also quite easy, just by adding just a little code contained below into the Edit HTML blog template then the results are as shown in the picture above. For this, the following tutorial for Creating Share Button Under Blog Posts is valid for HTML5 and full color.

1. Login to the blogger account.
2. Enter the Template then select Edit HTML.
3. Copy the following code then put it above the code ]]></b:skin>

.widgetshare{font:bold 12px/20px Tahoma !important;background:#333;border:1px solid #444;padding:5px 4px;color:#fff !important;margin-top:10px}.widgetshare a{font:bold 12px/20px Tahoma !important;text-decoration:none !important;padding:5px 4px;color:#fff !important;border:1px solid #222;transition:all 1s ease}.widgetshare a:hover{box-shadow:0 0 5px #0f0;border:1px solid #e9fbe9}.fcbok{background:#3B5999}.twitt{background:#01BBF6}.gplus{background:#D54135}.digg{background:#5b88af}.lkdin{background:#005a87}.tchno{background:#008000}.ltsme{background:#fb8938}

4. Then copy the following code, then put it under the code <data: post.body /> or it could also be <div class = 'post-footer'>

<div class='widgetshare'>
Share artikel ke: 
<a class='fcbok' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank'>Facebook</a> 
<a class='twitt' expr:href='&quot;http://twittter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Twitter</a> 
<a class='gplus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Google+</a>
<a class='lkdin' expr:href='&quot;http://www.linkedin.com/cws/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Linkedin</a>
<a class='tchno' expr:href='&quot;http://technorati.com/faves?sub=addfavbtn&amp;add=&quot; + data:post.url' rel='nofollow' target='_blank'>Technorati</a>
<a class='digg' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Digg</a>
<script>
//<![CDATA[
var uri = window.location.href;
var ttle = document.title;
document.write("<a href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' rel='nofollow' class='ltsme'>Lintasme</a>");
//]]>
</script>
</div> 

5. The last step is to just save the template and then see the results.

That's the tutorial for Making Share Keys Under Blog Posts. It should be noted in the installation steps, usually in the blog template there are some code <data: post.body /> and <div class = 'post-footer'> so please adjust it to the blog template you use.