Jumat, 10 Oktober 2014

Memasang Efek Slide Out Tombol Share Sosial Media Artikel Blog

Memasang Efek Slide Out Tombol Share Sosial Media Artikel Blog - Sebuah artikel blog akan lebih berguna jika ada pengunjung dan pembaca artikel blog tersebut membagikannya ke media sosial yang mereka miliki dan dengan adanya artikel blog kita didalam sosial media maka akan membuat pengunjung blog akan bertambah. Namun akan terasa sulit jika didalam artikel blog tidak terdapat media yang digunakan untuk membagikan artikel tersebut dan syarat utamanya harus ada tombol share sosial media untuk artikel blog tersebut

Apa saja yang harus ada di tombol share sosial media tersebut? Seperti yang ada dibagian bawah artikel blog ini, terdapat 4 tombol sosial media yang terpasang yaiut Google Plus, Facebook, Twitter dan Linkedin. Dengan adanya tombol sosial media tersebut maka saya selalu berharap agar teman-teman blogger atau pembaca artikel blog ini dengan senang hati membagikan artikel-artikel yang ada di blog ini. Namun kalau tidak ada yang membagikan, ya tidak apa-apa, yang penting semoga blog ini tetap bermanfaat dan berguna bagi kita semua :)

Memasang Efek Slide Out Tombol Share Sosial Media Artikel Blog

Agar artikel-artikel blog bisa dengan mudah dibagikan maka kita harus memasang tombol sosial media tersebut seperti yang ada dibagian bawah artikel blog ini. Dan pada artikel ini, saya tidak akan membagikan tombol share sosial media seperti yang ada di blog ini. Saya akan membagikan sebuah tombol share sosial media dengan efek slide out, yaitu sebuah tombol yang akan keluar sosial media jika tombol tersebut di sentuh oleh pointer mouse

Baca juga Memasang Sosial Media Share di Gambar Blog

Bagaimana Cara Memasang Efek Slide Out Tombol Share Sosial Media Artikel Blog seperti pada gambar diatas?
Untuk memasang tombol share seperti yang terlihat diatas atau seperti pada DEMO berikut ini, silahkan salin kode-kode CSS berikut ini karena untuk memasang tombol share dengan efek slide out ini tidak diperlukan kode script atau jQuery hanya menggunakan kode CSS saja

#sh-sosmed {
position:relative;
margin:1em auto;
padding:0;
width:64px;
height:64px;
background-image:url(http://4.bp.blogspot.com/-4qcuC3b1-zI/VDcZ5YpK57I/AAAAAAAAFus/vqJlzwQGOwM/s1600/bagikan-icon.png);
background-position:center center;
background-repeat:no-repeat;
list-style-type:none!important;
list-style-image:none!important;
line-height:1.0!important;
cursor:pointer;
}
#sh-sosmed {
float:center;
margin:80 auto;
}
#sh-sosmed li {
visibility:hidden;
position:absolute;
top:12px;
left:12px;
margin:0;
padding:0;
background-position:0 -45px;
background-repeat:no-repeat;
opacity:0;
transition-property:left,top,opacity,background-position,visibility;
transition-duration:0.2s,0.2s,0.2s,0s,0.2s;
transition-timing-function:ease-in,ease-in,ease-out,linear,linear;
transition-delay:0.2s,0.2s,0.2s,0s,0.2s}
#sh-sosmed li:hover {
background-position:0 0;}
#sh-sosmed li a {
display:block;
width:40px;
height:40px;
}
#sh-sosmed:hover li,#sh-sosmed.hover li {
visibility:visible;
opacity:1.0;
filter:0;
transition-property:left,top,opacity,background-position;
transition-duration:0.3s,0.3s,0.3s,0s;
transition-timing-function:cubic-bezier(.6,1.51,.66,.92),cubic-bezier(.6,1.51,.66,.92),ease-out,linear;
transition-delay:0s,0s,0s,0s;}
#sh-sosmed li.fbook {
background-image:url(http://2.bp.blogspot.com/-AZThlXGIvRI/VDcZ5Xi0MaI/AAAAAAAAFuk/opd83OYaiTU/s1600/fb-icon.png);}
#sh-sosmed li.tweet {
background-image:url(http://3.bp.blogspot.com/-0MOXNFgevFc/VDcZ6ZcsYTI/AAAAAAAAFuw/t_xMArfrpkg/s1600/twt-icon.png);}
#sh-sosmed li.gplus {
background-image:url(http://3.bp.blogspot.com/-4y7s9vLgRx0/VDcZ5cvsA8I/AAAAAAAAFug/EZonIWlUiJ4/s1600/gplus-icon.png);}
#sh-sosmed li.linkedin {
background-image:url(http://1.bp.blogspot.com/-340xxODGIHY/VDfFZFkiF1I/AAAAAAAAFvI/MDfbRYFsixw/s1600/linkedin-icon.png);}
#sh-sosmed:hover li.fbook,#sh-sosmed.hover li.fbook {
left:-30px;
top:-30px;
}#sh-sosmed:hover li.tweet,#sh-sosmed.hover li.tweet {
top:-48px;
left:12px;}
#sh-sosmed:hover li.gplus,#sh-sosmed.hover li.gplus {
top:-30px;left:54px;}
#sh-sosmed:hover li.linkedin,#sh-sosmed.hover li.linkedin {
top:69px;right:-69px}

HTML

<ul id="sh-sosmed">
<li class="fbook"><a title="Share on Facebook" target="_blank" href="#"></a></li>
<li class="tweet"><a title="Tweet This" target="_blank" href="#"></a></li>
<li class="gplus"><a title="Plus on Google+" target="_blank" href="#"></a></li>
<li class="linkedin"><a title="Share on Linkedin" target="_blank" href="#"></a></li>
</ul>

DEMO Efek Slide Out Tombol Share Sosial Media - Silahkan arahkan pointer mouse Anda


Lalu bagaimana jika menginginkan agar tombol share sosila media ini terpasang secara otomatis di seluruh halaman artikel blog? Silahkan baca panduannya di Memasang Tombol Sosial Media Di Halaman Artikel Blog

Memasang Efek Slide Out Tombol Share Sosial Media Artikel Blog Rating: 4.5 Diposkan Oleh: ana sriwahyuni

19 komentar:

  1. Selamat malam Mbak Ana. menarik unik dan sangat
    Indah di pandang mata tombol share nya dengan effects slide
    Pastinya bisa membuat tampilan blog jadi lengkap dan menawan
    Ya Mbak ijin bookmark makasih sahre nya Mbak Ana :)

    BalasHapus
    Balasan
    1. selamat malam mas,, silahkan mas semoga bermanfaat.. :)

      Hapus
    2. Lebih Simple Ya Mbak Tampilannya. Lebih Keren dan Lebih Sedap Di Pandang...

      Hapus
  2. Bersyukur pengetahuan nya dapet Pertamaxnya juga
    Kapan waktu tombol share saya akan ganti dengan yg ini Mbak Ana :-bd

    BalasHapus
    Balasan
    1. silahkan diganti mas, untuk letak pemasangannya agar tidak berada di tengah, ganti saja nilai marginnya margin:80 auto; sesuai letak

      Hapus
  3. Nice mbak, pinter ya buat orang tertarik untuk ngeklik otomatis ngeshare dong. haha

    BalasHapus
    Balasan
    1. :) hehehee biar tidak bosan mas dengan tampilan yang itu-itu aja :)

      Hapus
  4. benar-benar keren lho mbak, baru lihat saya tombol share model kayak gini :)

    BalasHapus
    Balasan
    1. hehehee.. syukurlah kalau begitu Kang, silahkan kalau mau di coba Kang :)

      Hapus
  5. Efeknya kereeen, Mbak. jadi ingat tema hp dari Nex Launcher ada efek gituan :)

    BalasHapus
  6. wah keren juga nih tutornya,,,,boleh dicoba nih nanti

    BalasHapus
    Balasan
    1. silahkan mas, semoga bermanfaat.. :)

      Hapus
  7. Wihhhh kereeeenn .. nih mbak Efek Slide Out Tombol Share nya sangatt simpe hehe kira" bakal membertakan blogg kagak gan ?

    BalasHapus
    Balasan
    1. tidak perlu khawatir mas, tidak akan memberatkan loading blog kok, kode hanya sedikit dan ringan :)

      Hapus
  8. jadi tambah keren ya tombol sharenya mbak, mantap mbak :D

    BalasHapus
    Balasan
    1. iya mas Agung, silahkan dicoba ya :)

      Hapus
  9. keren juga nih tombol share nya, bisa berbentuk tersembunyi getu ya buk, bisa dicoba nih untuk wp saya ;)

    BalasHapus
    Balasan
    1. silahkan di coba mbak, kalau untuk di Wp mbak Wahyu lebih pinter dari saya, semoga bermanfaat..

      Hapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia