Share Google Plus Like Facebook Tweet Twitter

Untuk membuat Tombol Share Google Plus Like Facebook Tweet Twitter Indah Menarik Retina Ready dapat dilakukan dengan meletakkan kode berikut ini diatas <data:post.body/>.

<!--:[ SOCIAL BUTTONS START ]:-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.social-network{float:right;position:relative;margin:0 auto;clear:both;width:0;visibility:hidden;opacity:0;-moz-transition-property: opacity, width;-ms-transition-property: opacity, width;-o-transition-property: opacity, width;-webkit-transition-property: opacity, width;transition-property: opacity, width;-moz-transition-duration: 1.5s;-ms-transition-duration: 1.5s;-o-transition-duration: 1.5s;-webkit-transition-duration: 1.5s;transition-duration: 1.5s;-moz-transition-timing-function: ease-out;-ms-transition-timing-function: ease-out;-o-transition-timing-function: ease-out;-webkit-transition-timing-function: ease-out;transition-timing-function: ease-out}
.post-outer:hover .social-network{width:200px;visibility:visible;opacity:1}
.social-network li{max-width:75px;width:75px;height:25px;list-style:none;display:inline-block;line-height:24px;margin:2px;padding:10px;overflow:hidden;opacity:.5;vertical-align:middle;transition:all 0.8s linear 0s}
.social-network li:hover{opacity:1;box-shadow:0 1px 4px 1px rgba(0,0,0,.5)}
.social-network li:nth-child(1){background:#c4302b;float:left}
.social-network li:nth-child(2){background:#00a0d1;float:right}
.social-network li:nth-child(3){background:#3b5998;float:left}
.social-network li:nth-child(4){background:#f9f9f9;background:-webkit-gradient(linear,0% 0%,0% 100%,from(#f9f9f9),to(#e5e5e5));background:-webkit-linear-gradient(#f9f9f9,#e5e5e5);background:-moz-linear-gradient(#f9f9f9,#e5e5e5);background:-ms-linear-gradient(#f9f9f9,#e5e5e5);background:-o-linear-gradient(#f9f9f9,#e5e5e5);float:right;text-align:center;font-size:24px}

</style>
<div class='social-network'>
<li class='gplus'>
<g:plusone expr:href='data:post.url' size=''/>
</li>

<li class='twitter'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' expr:data-related='data:post.title' expr:data-text='data:blog.metaDescription' expr:data-url='data:post.canonicalUrl' expr:data-via='data:blog.title' href='https://twitter.com/share' rel='nofollow'/>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</li>

<li class='fb'>
<script>

(function(d){

  var js, id = &#39;facebook-jssdk&#39;; if (d.getElementById(id)) {return;}

  js = d.createElement(&#39;script&#39;); js.id = id; js.async = true;

  js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;

  d.getElementsByTagName(&#39;head&#39;)[0].appendChild(js);

}(document));

</script>

<fb:like action='like' colorscheme='light' expr:href='data:post.url' font='arial' layout='button_count' send='false' show_faces='false'/>
</li>

<li class='comment-counter'>
 <b:if cond='data:post.allowComments'>
  <a class='comment-counter-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' expr:title='data:top.commentLabel'><b:if cond='data:post.numComments == 1'>1<b:else/><data:post.numComments/></b:if></a>
 </b:if>
</li>
</div>
</b:if>

<!--:[ SOCIAL BUTTONS END ]:-->

Hasilnya menjadi: