Cara Membuat tombol Share keren

Oleh Mashudi

Wednesday, 23 July 2014

Assalamualaikum Blogger Onnetz.
banyak jenis yahh dalam membuat tombol share yang keren. disini kita akan membuat tombol share yang keren juga. yang pasti anda gk rugi dah kalo pasang di blog anda. karna tombol ini memang benar-benar keren.yang kita bisa menshare artikel kita. atau orang yang menshare artikel kita ke :
1. Google Plus
2. Facebook
3. Twitter
4. Pinterest
5. Delicious
6. Digg
7. Stumble upon
8. Reddit
9. RSS

Dan ikon nya juga terlihat keren. ditambah dengan efek-fek gimana gituh. yang bikin suasana share kita semakin menyenangkan. seperti gambar diatas tuh. keren kan tombol sharenya.

Trus keuntungan dengan menggunakan share ini ialah. :
1. hanya menggunakan CSS dan tidak menggunakan scirpt
2. tidak menggunakan server. langsung jalan di blong sendiri.
3. loading cepet. keliatan cakep
4. SEO friendly

Trus kita masangnya bagaimana?

jawabannya gampaang.

langsung aja kita lihat bagaimana caranya sih. 

ayo kita simak langkah-langkahnya :

1. pasti dong. buka akun blognya.

2. buka template dan ingat klik yang html desain.

3. cari kode <data:post.body/> 

4. Copas kode ini tepat di bawah  <data:post.body/> 

<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/AVvXsEjAjglV2WFvTCeHpFcUiUtFKtmqlkATNco5Xv6yKJvPzuEa8X2ibbbl2r0tJKrl9Iifnw5KraRFeRo3o0E-YMKofkTvyDPQpRiKItu-8NXNhrn4J5Ntfgp0ytQkdgzX1Sv0RuIfoXaEUBrE/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;
}
</style>

<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;href='http://twitter.com/share?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"/>

5. simpan dan selesai

Please Share it! :)

Terima Kasih Atas Kunjungan Anda
DITULIS OLEH Mashudi
Jika mengutip harap berikan link yang menuju ke artikel Cara Membuat tombol Share keren ini. Jika artikel ini bermanfaat, ajak kawan mu untuk ambil manfaatnya. Terima kasih atas perhatiannya, baca juga yang lainnya yah.

Tag : SEO , Tips dan tricks Blogger