Cara Membuat Tombol Share Keren Di Blog

Kali Ini saya akan memposting tentang Cara Membuat Tombol Share Keren Di Blog, Jika agan sekalian berminat memasang tombol share diblog agan, silahkan simak tutorialnya Dibawah ini :

LANGKAH LANGKAHNYA

1. Pergi ke Blogger > Template 
2. Backup template Anda 
3. Klik Edit HTML > Lanjutkan 
4. Klik kotak Expand Template Widget 
5. Tambahkan CSS Dibawah ini tepat diatas ]]></b:skin> Atau </style>

/*--------Flipper Sharing Widget ------*/ 
.flipper a { 
display:block; 
height:48px; 
width:48px; 
padding:0 4px; 
float:left; 
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYGw9MrrA6-r9Yeuwor_XD3uj__PwMQ5JQhA67VzwNDG3GqXJlwBPUgGMMQAk_NajtdJH36SEe629HyO6Yy-_EXwYXCGgK1iDpNRfJ2ib-eq5VfcLVKtCVqwzx2aQLpRxGdi2nU_qHJ-n_/s1600/flipper.png) no-repeat; 
-webkit-transition: ease-in 0.15s all;    
-moz-transition: ease-in 0.15s all;    
-o-transition: ease-in 0.15s all;    
-ms-transition: ease-in 0.15s all;    
transition: ease-in 0.15s all; 
cursor:pointer;
}

.flipper a.googleplus { 
background-position: 0px -348px;
} 
.flipper a.googleplus:hover { 
background-position: 0px -406px;
}

.flipper a.pinterest { 
background-position: 0px -464px; 
} 
.flipper a.pinterest:hover { 
background-position: 0px -522px;
}

.flipper a.delicious { 
background-position: 0px 0px; 
} 
.flipper a.delicious:hover { 
background-position: 0px -58px;
} 
.flipper a.digg { 
background-position: 0px -116px;
} 
.flipper a.digg:hover { 
background-position: 0px -174px;
} 
.flipper a.stumbleupon { 
background-position: 0px -812px;
} 
.flipper a.stumbleupon:hover { 
background-position: 0px -870px;
} 
.flipper a.technorati { 
background-position: 0px -928px;
} 
.flipper a.technorati:hover { 
background-position: 0px -406px;
} 
.flipper a.twitter { 
background-position: 0px -928px;
} 
.flipper a.twitter:hover { 
background-position: 0px -986px;
} 
.flipper a.facebook { 
background-position: 0px -232px;
} 
.flipper a.facebook:hover { 
background-position: 0px -290px;
} 
.flipper a.reddit { 
background-position: 0px -580px;
} 
.flipper a.reddit:hover { 
background-position: 0px -638px;
}
.flipper a.rss { 
background-position: 0px -696px;
} 
.flipper a.rss:hover { 
background-position: 0px -754px;
}

.Pleaseshare{ 
margin:10px 0px; 
color:#333333; 
font-weight:bold; 
font-size:20px; 
font-family:sans-serif;
} 

6. Kemudian, Cari kode <data:post.body/>, Paste kode dibawah ini tepat dibawah kode <data:post.body/>

<div class='flipper'> 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="Pleaseshare"> 
Please Share it! :) </div>

<!--Google Plus--> 
<a class='googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='+1 it :&gt;'/>

<!--Facebook--> 
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :&gt;'/>

<!-- Twitter --> 
<a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :&gt;'/>

<!-- Pinterest --> 
<a class='pinterest'  href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :&gt;'/>

<!-- Delicious --> 
<a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :&gt;'/>

<!--DIGG--> 
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>
<!--Stumble--> 
<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :&gt;'/>

<!-- Reddit --> 
<a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit :&gt;'/>
<!--RSS --> 
<a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Bookmark plz :&gt;'/> 
</b:if></div>
<div style="clear:both"/>
Terakhir, Simpan template

Semoga Berhasil :D

Terimakasih telah mampir diblog saya, semoga bermanfaat