DomaiNesia

Social Share Button Dengan Efek Toggle

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 :


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...

40 Komentar untuk "Social Share Button Dengan Efek Toggle"

  1. Keren Bang, Izin copy kode nya. :)

    BalasHapus
  2. Toggle memang bikin menarik tampilannya yah, Mas :)

    BalasHapus
  3. boleh juga nih, Bikin loading BLOG tambah berat nda ya

    BalasHapus
    Balasan
    1. ngga terlalu berat juga mas, javascriptnya dikit :D

      Hapus
  4. kereeeennnn ... nihhhh skripnya bikin saya mulek hehe tapi saya izin save yahh keren banget soalnya social share buttonnya hehe:)

    BalasHapus
  5. meskipun saya sudah memasang social share button, tapi sepertinya ini juga sangat menarik dipasang, jadi saya minta ijin kopi kode dan mempraktekan nya yia bos...

    BalasHapus
  6. ijin disimpan dulu mas... baru belajar soalnya... :)

    BalasHapus
  7. wow sangat keren di share button socialnya,, noleh ni dipasang pada blog yang lain lagi. thx

    BalasHapus
  8. wah tombol social share nya keren juga nih,dapat dijadikan salah satu pilihan mas.makasih telah berbagi

    BalasHapus
  9. keren juga yas mas share button nya, dengan efek toggle jadi lebih menarik.

    BalasHapus
  10. keren toggle nya ya, tapi toggle nya gk bisa dipasang di togel? :D

    BalasHapus
  11. boleh nih jd referensi saya kalo mo buat design blog baru

    BalasHapus
  12. bagus banget hasilnya mas
    makasih tutorialnya

    BalasHapus
    Balasan
    1. iya mas, sama-sama..
      makasih juga sudah mampir kesini..

      Hapus
  13. keren gan tutornya, sayangnya ane udah ada nih button share di bog ane :D

    BalasHapus
    Balasan
    1. iya sob, tapi inikan beda lagi share buttonnya...

      Hapus
  14. Wah keren nih mas. Kira kira ringan nggak nih mas kalau di pasang di blog. Soalnya blog saya sudah berat banget loading nya hehehe

    BalasHapus
    Balasan
    1. ringan mas, di compress mas css sama htmlnya...

      Hapus
  15. saya coba ya mas untuk blog saya, terima kasih dah mau berbagi

    BalasHapus
  16. keren gann
    saya sukaa saya suka

    BalasHapus
  17. makin keren gan , patut dicoba
    slam kenal

    BalasHapus
  18. Toggle yang menarik, izin copas buat Blog saya mas...

    BalasHapus

Jika Ingin Memasukan Kode Script (CSS, HTML, JavaScript) Silahkan Gunakan Kode Dibawah ini :

1. Untuk Menyisipkan Kode Panjang Gunakan <i rel="pre">Kode Disini</i>
2. Untuk Menyisipkan Kode Pendek Gunakan <i rel="code">Kode Disini</i>
3. Untuk Menyisipkan Quote Gunakan <b rel="quote">Catatan Anda</b>
4. Untuk Menyisipkan Gambar Gunakan <i rel="image">URL Gambar</i>
5. Untuk Menyisipkan Video Gunakan <i rel="youtube">URL Video Youtube</i>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Fast Hosting