#Cara Membuat Widget Elegant Social Media Mashable Share Profesional

Ini adalah salah satu widget elegan yang akan sangat berguna dalam meningkatkan market blog anda melalui media sosial.

Langsung saja berikut tutorialnya.

#Tahap 1 :

• Pergi ke Blogger Template
• Backup terlebih dahulu template
• Tekan Edit HTML

Setelah itu....

#Tahap 2 

Masukan kode dibawah ini, cari dengan (ctrl+f) ]]></b:skin>
Paste ini tepat diatas ]]></b:skin>

@import url(http://fonts.googleapis.com/css?family=Raleway:600);
.social-div .facebook{
background:#3b5998;
}
.social-div .Twitter{
background:#07c2ef;
}
.social-div a{
text-decoration:none!important;
display:inline-block;
}
.social-div a img{
display:inline-block;
}
#socialshare{
-webkit-border-radius:4;
-moz-border-radius:4;
border-radius:4px;
color:#ffffff;
font-size:16px;
padding:15px 20px 15px 20px;
text-decoration:none;
font-family:Raleway;
margin-right:10px;
-webkit-font-smoothing:antialiased;
-webkit-text-rendering:optimizeLegibility;
}
.share-toggle{
font-size:4rem;
border-radius:2px;
margin-right:4px;
background:#c5c5c5;
position:relative;
display:inline-block;
cursor:pointer;
vertical-align:middle;
height:48px;
width:45px;
top:-2px;
text-align:center;
color:#fff;
}
.share-toggle a{
color:#fff;
text-decoration:none;
}
.social-div{
border-top:1px solid #CCC;
vertical-align:middle;
padding: 15px 5px 10px 5px;
}
#expand-minus
{
display:none;
line-height:48px;
}
#expand-social{
display:inline-block;
vertical-align:middle;
position:relative;
top:0px;
left:-4px;
}
#social-expand{
display:inline-block;
vertical-align:middle;
position:relative;
top:0px;
left:0px;
}
.minus-div{
margin-top:-6px;
}
#expand-plus{
position:relative;
line-height:48px;
font-size: 80%;
}
#expand-social img{
height:44px;
}

Setelah itu cari (ctrl+f) <div class='post-footer-line post-footer-line-1'> di dalam html template kamu,
Copy semua kode dan Paste setelah/ tepat dibawah  <div class='post-footer-line post-footer-line-1'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='social-div'>
 <a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' id='socialshare' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
 <img src='https://googledrive.com/host/0B8D3MQmcZTyvN1kzV3lfS2h6NW8' style='margin-right:8px;margin-left:-5px;'/>
 Share on Facebook
 </a>
 <a class='Twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' id='socialshare' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
 <img src='https://googledrive.com/host/0B8D3MQmcZTyvVXp2Qm5OSzRMUmM' style='margin-right:8px;margin-left:-5px;'/>
 Share on Twitter
 </a>
<div id='expand-social' style='display:none;left: -5px;height:44px;'>
<a data-title='Google+' expr:href='&quot;https://plus.google.com/u/0/share?url=&quot; + data:post.url' id='google-plus' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
 <img src='https://googledrive.com/host/0B8D3MQmcZTyvV0NHX0xLXzEwc1U'/>
 </a>
<a data-title='Linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;source=&quot; + data:blog.title' id='linkedin' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' target='_blank'>
 <img src='https://googledrive.com/host/0B8D3MQmcZTyveVlQUUtDZXgyNXc'/>
 </a>
<a data-title='Stumble-Upon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' id='stumbleupon' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
 <img src='https://googledrive.com/host/0B8D3MQmcZTyvc3pYZFhDLXlBNFk'/>
 </a>
<a data-title='Pin it' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.thumbnailUrl + &quot;&amp;description=&quot; + data:post.snippet' id='pinterest' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=600, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'>
 <img src='https://googledrive.com/host/0B8D3MQmcZTyvdTFzVEs0SzdXNFE'/>
 </a>c
</div>
<div class='share-toggle'>
<div id='social-expand' onClick='toggle(&apos;expand-social&apos;);'>
    <a id='expand-plus'> + </a>
<div class='minus-div'>
<a id='expand-minus'> - </a>
</div>
<script type='text/javascript'>
function toggle(d)
{
$(&quot;#&quot; + d).animate({width:&#39;toggle&#39;},400);
}
$(document).ready(function(){
$(&quot;#social-expand&quot;).click(function(){
$(&quot;#expand-plus&quot;).toggle();
$(&quot;#expand-minus&quot;).toggle();
});
});
</script>
<script src='http://code.jquery.com/jquery-1.9.1.js' type='text/javascript'></script>
</div>
</div>
  </div>
</b:if>

Tahap 3

Simpan Template!