Home » » Cara Membuat Tombol Social Media Open Hide Popup Di Blog

Cara Membuat Tombol Social Media Open Hide Popup Di Blog

Ditulis oleh Dicky Fajriansyah pada Jumat, 21 Juni 2013 | 20.09

Membuat Tombol Social Media Open Hide Popup di Blog

Kali ini Dicky's akan menshare Tips Blog yang berjudul Cara Membuat Tombol Social Media Open Hide Popup Di Blog | Dicky's share lagi nih social media yang pas untuk blog sobat, pastinya tampilan Dinamis, Styles, dan KEREN !!! Widget ini melayang dengan Open Hide Popup jika diklik social medianya terbuka, diantaranya Facebook, Twitter, Google, RSS, Email. Gimana ?? Oke, bagi yang tertarik dengan social media ini, ini dia Tipsnya

Berikut Cara Membuat Tombol Social Media Open Hide Popup Di Blog :
  • Login ke Blogger, atau klik disini
  • Pilih Tata Letak --> Tambahkan Gadget --> Pilih HTML/JavaScript
  • Copy kode dibawah ini dan Letakkan ke kolom HTML/JavaScript
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script><style type="text/css">#db-circle-mod{bottom: 0 !important;left: 5px;position: fixed;}#db-container-circle{position:relative;height:100px;width:100px}#db-base-button{background:-moz-linear-gradient(center top,#A90329 0,#8F0222 44%,#6D0019 100%) repeat scroll 0 0 #6D0019;background:-webkit-linear-gradient(top,#a90329 0,#8f0222 44%,#6d0019 100%);background:-o-linear-gradient(top,#a90329 0,#8f0222 44%,#6d0019 100%);background:-ms-linear-gradient(top,#a90329 0,#8f0222 44%,#6d0019 100%);background:linear-gradient(top,#a90329 0,#8f0222 44%,#6d0019 100%);border:4px solid #fff;text-decoration: none;z-index:9999;cursor:pointer;border-radius:50px 50px 50px 50px;box-shadow:0 1px 3px rgba(0,0,0,0.5);color:#fff;font:68px Arial;height:80px;left:0;padding:0;position:absolute;text-align:center;top:0;width:80px}.db-btn{position:absolute;height:50px;width:50px;border-radius:25px;top:15px;left:15px;-webkit-transition:all 250ms;-moz-transition:all 250ms;-o-transition:all 250ms;-ms-transition:all 250ms;transition:all 250ms;box-shadow:0 1px 3px rgba(0,0,0,.5)}#db-fb.open{top:-125px;left:25px}#db-fb.open.clicked{top:-135px;left:15px}#db-tw.open{top:-105px;left:80px}#db-gplus.open{top:-75px;left:125px}#db-rss.open{top:-30px;left:160px}#db-mail.open{left:175px;top:25px}.plus{-moz-user-select: none;-moz-transition:all 200ms ease-in 0s;-webkit-transition:all 200ms ease-in;-o-transition:all 200ms ease-in}.rot{-moz-transform:rotate(137deg);-o-transform:rotate(137deg);-webkit-transform:rotate(137deg);transform:rotate(137deg)}</style><script type="text/javascript">var delay=40,delayTime;$(function(){btns=$(".db-btn");$("#db-base-button").toggle(function(){$("span.plus").addClass("rot");btns.each(function(a){var b=$(this);delayTime=a*delay;window.setTimeout(function(){b.addClass("open")},delayTime)})},function(){$("span.plus").removeClass("rot");$($(btns).get().reverse()).each(function(a){var b=$(this);delayTime=a*delay;window.setTimeout(function(){b.removeClass("open")},delayTime)})})});</script><a href="http://gj37765.blogspot.com" style="position:absolute;z-index:-11"><img src="http://1.bp.blogspot.com/-RikrI-c_pyQ/T2DTcP6aMvI/AAAAAAAAAL0/H6v7PVoHM_w/s1600/1x1juice.png" /></a><div id="db-circle-mod"><div id="db-container-circle"><a id="db-fb" class="db-btn" style="background:url(http://4.bp.blogspot.com/-KQgxd-K3Yto/T7DCLsXECJI/AAAAAAAADL0/5dEl8jrWm3k/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -1px 0" href="https://www.facebook.com/Dicky.Fajriyansyah" rel="nofollow" target="_blank"></a><a id="db-tw" class="db-btn" style="background:url(http://4.bp.blogspot.com/-KQgxd-K3Yto/T7DCLsXECJI/AAAAAAAADL0/5dEl8jrWm3k/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -52px 0" href="http://twitter.com/DickyFajry" rel="nofollow" target="_blank"></a><a id="db-gplus" class="db-btn" style="background:url(http://4.bp.blogspot.com/-KQgxd-K3Yto/T7DCLsXECJI/AAAAAAAADL0/5dEl8jrWm3k/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -157px 0" href="https://plus.google.com/100036115131863439765" rel="nofollow" target="_blank"></a><a id="db-rss" class="db-btn" style="background:url(http://4.bp.blogspot.com/-KQgxd-K3Yto/T7DCLsXECJI/AAAAAAAADL0/5dEl8jrWm3k/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -105px 0" href="http://feeds.feedburner.com/FajryBloggers-4rt" rel="nofollow" target="_blank"></a><a id="db-mail" class="db-btn" style="background:url(http://4.bp.blogspot.com/-KQgxd-K3Yto/T7DCLsXECJI/AAAAAAAADL0/5dEl8jrWm3k/s1600/%5Bwww.gj37765.blogspot.com_share+buttons2.png) repeat -210px 0" href="http://feedburner.google.com/fb/a/mailverify?uri=FajryBloggers-4rt&loc=en_US" rel="nofollow" target="_blank"></a><a id="db-base-button"><span class="plus">+</span></a></div></div><a href="http://fajry-bloggers-4rt.blogspot.com/"></a>

Keterangan :
- Kode yang berwarna HIJAU yaitu kode jQuery, jika ditemplate sobat sudah ada kode jQuery itu, hapus saja kode yang berwarna HIJAU
- Kode yang berwarna BIRU yaitu ID Facebook, ganti dengan ID Facebook sobat
- Kode yang berwarna BIRU MUDA yaitu ID Twitter, ganti dengan ID Twitter sobat
- Kode yang berwarna MERAH yaitu ID Google+, ganti dengan ID Google+ sobat
- Kode yang berwarna ORANGE yaitu ID FeedBurner, ganti dengan ID FeedBurner sobat

  • Simpan


Semoga Tips Blog yang berjudul Cara Membuat Tombol Social Media Open Hide Popup Di Blog bisa bermanfaat......
dan selamat mencoba.........
Dilarang menduplikasi dan menyerbarluaskan artikel tanpa menyertakan sumbernya. Jika melanggar, berarti telah melanggar UUD 1945 No. 19 Tahun 2002 Tentang Hak Cipta dan akan dijatuhi denda.
thumbnail Title: Cara Membuat Tombol Social Media Open Hide Popup Di Blog
Posted by:Dicky Fajriansyah
Published :2013-06-21T20:09:00-07:00
Rating: 5
Reviewer: 100 Reviews
Cara Membuat Tombol Social Media Open Hide Popup Di Blog

29 komentar:

  1. keren gan tombol sosmed nya :)

    BalasHapus
  2. mantapp bner gan.. izin nyoba...

    coment back : http://muamar-kurosaki.blogspot.com/

    BalasHapus
    Balasan
    1. Thankz....
      Commentback sukses gan.......

      Hapus
  3. mantep sob .. (y)

    koment back http://fineblogge.blogspot.com

    BalasHapus
  4. Mantab nih gan , izin coba

    www.edisukarman.com

    BalasHapus
    Balasan
    1. ta, silahkan.........
      thankz kunjungannya.......

      Hapus
  5. Aku coba Pasang gan ! , di template buatan Q sendiri :)

    BalasHapus
    Balasan
    1. Ya, silahkan Gan !! dengan senang hati......

      Hapus
  6. Mantep nih sob . izin pasang yah !! oh jangan lupa komback

    BalasHapus
  7. kalau hapus bagian g+nya bisa ga gan ?

    BalasHapus
    Balasan
    1. bisa gan, cukup cari kode yang bersangkutan dengan Google+

      Hapus
  8. mantap infonya ni,, mau langsung tes.. hehehe

    BalasHapus
  9. Nyoba ach gan.
    Makasih atas infonya

    BalasHapus
    Balasan
    1. Ya gan, silahkan dicoba....
      Makasih telah berkunjung........

      Hapus
  10. keren gan, coba dulu

    BalasHapus
  11. wah keren gan tp sering nutupin tpp cara yg lumayan bagus utk promosi

    comeback

    BalasHapus
  12. Ijin pake tombol sosmednya gan.

    BalasHapus
    Balasan
    1. ya gan...
      silahkan dipake'....
      makasih....

      Hapus
  13. Super sekali.....
    Thanks Mas.. langsung saya coba nih

    BalasHapus