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 :)

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQJeph9lvyQiaw0D5MMtmWOKWlcB-KnZ6xu9lDUzKzxmG9pjLNtBl-_6D6S-ZAS1sxghNOq2_dN6GF-xvSf8QubHLjXaed1T_XNsXVm2kuWr_ytLsIQRj03q7oLgGsRt4f_7o33SZmODg/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieHNDZT-plPZCQaehpgeFkBFmsiMeNdsVeMnmLh2fVPPNS8ufgwCl1SLKtd_W1_0-DJ0bQjogbfdfH6VCArvZj78BglTZWKJ5FQA9-PPrCa3lGiV3TzyqoAEjjXsWBG4GxIjBMaa_E7U0/s1600/fb-icon.png);}
#sh-sosmed li.tweet {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7v6oBLh5kcbu0-VsSa_QbXYJzxXcVg3vG-0PqRk35JDO0H38jfUK9DO4zQlqs7-TlIbhG5UCte2koaxM-GmWkcJ1xdLKa2Y_IgqfHauip-Dp8kEbaoxrAkWXwjV3dxFFrH23m7Tsoo-s/s1600/twt-icon.png);}
#sh-sosmed li.gplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrWu5B-PDUUX8Y9imtw47HwJV_MMB7o1XjwbiWoGvUlvCWvIM8yiVLBIeg3hMnM-eRYJB0UygOVLKeXSOERgSPhKAGghrKPKPd_qzYwuBD3TZN6r7doTKSdPnMU2JQ-FKwpR7YlJckkOI/s1600/gplus-icon.png);}
#sh-sosmed li.linkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoWlwNxWnl6hw24v-wVZwqtMu9x8PfO1BU0dLXMeNsCXVMM_rHu24WmKd12by3t6x5Vghik4Ad6VEQsKSzKIyzSw7ixyXLMfLbC_IqJaKW4wcnQ4aM_UcLf-gOWeHVbW4mc6sQJKH8LLk/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 sobat

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