Social Share Button Dengan Efek Toggle

Social Share Button Dengan Efek Toggle - Membuat atau menambahkan social share button di blog memang sangat di perlukan agar artikel blog mudah untuk di bagikan ke berbagai situs social media seperti, Facebook, Twitter, Google, dan masih banyak lagi. Dengan menambahkan tombol social share button di blog maka blog bisa populer jika suatu artikel di bagikan ke berbagai macam situs. Mengenai tombol social share button ini saya pernah membuat artikel tersebut dengan judul Membuat Tombol Google +1, Twitter, dan Facebook Valid HTML5. Namun pada postingan kali ini Ficri Pebriyana memberikan sedikit yang lebih berbeda dari sebelumnya yaitu dengan menambahkan efek toggle pada tombol social share tersebut, selain itu ditambahkan juga tombol more yang isinya puluhan situs lengkap untuk membagikan artikel Anda.

Pada social share button dengan efek toggle ini tentunya sudah valid HTML5 dan CSS3, dengan menambahkan jQuery terciptalah sebuah efek toggle yang bisa membuka atau menutup saat tombol share di klik. Tombol social share button ini sekilas mirip dengan efek flat ui, tapi beda jauh sih ya di mirip-ripin saja dengan flat ui. Oke langsung saja yang ingin memasang atau menambahkan tombol social share button dengan efek toggle di blog silahkan lihat demo dan tutorialnya dibawah ini :

DEMO

1. Masuk ke Blogger.com

2. Klik Template => Edit HTML

3. Cari kode ]]</b:skin> atau </stlye>

4. Copy kode CSS dibawah ini, lalu Paste di atas kode ]]</b:skin> atau </stlye>

#buton-share{float:left;padding:14px 15px;background:#35353C;color:#fff;cursor:pointer;display:inline-block}
#share-to{display:none;text-align:left;background:#35353C;color:#fff;padding:4px 4px}
.boxsocial{overflow:hidden;padding:5px;background:#6B6B6B}
.boxsocial a:hover{background:#34343C}
.boxsocial:before{content:'';position:absolute;bottom:0;left:-12px;width:0;height:0;border-color:#333 transparent transparent;border-style:solid;border-width:10px 0 0 10px}
.boxsocial:after{content:'';position:absolute;bottom:0;right:-12px;width:0;height:0;border-color:transparent transparent transparent #333;border-style:solid;border-width:0 0 10px 10px}
.boxsocial a{text-align:center;display:block;color:#fff!important;font:bold 12px Electrolize,sans-serif;text-decoration:none;transition:all 1s ease;padding:7px 0}
.boxsocial a:hover{box-shadow:0 0 5px #000;border:1px solid #fff}
.boxsocial .boxsocialtitle{font:bold 12px Electrolize,sans-serif;text-align:center;text-transform:uppercase;display:block;width:107px;border:1px solid #000;box-shadow:0 0 5px #444 inset;padding:7px 22px}
.boxfb{float:left;margin-right:3px;width:70px;background:#4154E8}
.boxtwit{float:left;margin-right:3px;width:70px;background:#2C95DD}
.boxgplus{float:left;margin-right:3px;width:70px;background:#DC2C1B}
.boxltsme{float:left;margin-right:3px;width:70px;background:#F0AD17}
.boxmore{float:left;margin-right:1px;width:70px;background:#413F43}

5. Cari kode <div class='post-footer'> atau <data:post.body/> biasanya akan ada banyak
6. Copy kode HTML dibawah ini, lalu Paste diatas kode <div class='post-footer'> atau <data:post.body/> yang ke 2

<div id='buton-share'>
SHARE TO &#187;</div>
<div id='share-to'>
<div class='boxsocial'>
<div class='boxfb'>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Facebook'>Facebook</a>
</div>
<div class='boxtwit'>
<a expr:href='&quot;http://twittter.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Twitter'>Twitter</a>
</div>
<div class='boxgplus'>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank' title='Share ke Google+'>Google+</a>
</div>
<div class='boxltsme'>
<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' target='_blank' title='Share ke Lintasme'>Lintasme</a>");
//]]>
</script>
</div>
<div class='boxmore'>
<a class='a2a_dd more' href='http://www.addtoany.com/share_save' rel='nofollow' title='More Share'>&#10010; More</a>
<script async='async' src='http://static.addtoany.com/menu/page.js' type='text/javascript'/>
</div>
</div>
</div>

7. Cari kode </body>
8. Copy kode jQeury dibawah ini, lalu Paste diatas kode </body>

<script type='text/javascript'>
$(document).ready(function(){
  $("#buton-share").click(function(){
    $("#share-to").slideToggle(1000,function(){
    });
  });
});
</script>

Catatan :
Jika tombol toggle tidak berfungsi simpan kode JavaScript dibawah ini, diatas kode </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'/>

Sekian artikel mengenai Social Share Button Dengan Efek Toggle. Kurang lebihnya mohon maaf.
Semoga Bermanfaat...

Ficri Pebriyana

Blogger yang jarang nulis artikel :D

Bagikan Artikel ini