Cara Membuat Share Button Dengan Efek Toggle ~ Xmedia

Assalamualaikum teman" :D

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.

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 kurang lebih mirip dengan efek flat ui.

Pada kesempatan kali ini saya akan share cara membuat share button dengan efek toggle ,kurang lebih hasilnya seperti SS di atas ,gimana berminat mau pasang ? yuk ikutin tutor di bawah .

1.Login ke akun blogger kalian masing".

2.klik Template =) Edit HTML

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

4.Copy scipt di bawah ini ke dalam ]]</b:skin> atau </style>

#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 sih ada banyak ya ,nah kalian pilih aja yang ke 2 (udah ane coba).
6.Copy Script dibawah ini, lalu Paste diatas kode <div class='post-footer'> atau <data:post.body/> yang ke 2 (inget ya >_<)

<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 Script dibawah ini, lalu Paste diatas kode </body>

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

Xmedia

Top Ad Slot (728x90)

Cara Membuat Share Button Dengan Efek Toggle

Related Post