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/AVvXsEhdrYXe-FOLhRyMGagbAk1RLn1udv8g783Z5JklX0hQ8Cwu0oWuquN1h4zTCUPrpHSz1kUXGo-qVOgChxzn-d5qUCcmiH5ooyqX-9ksU84RWxWYvNfu3Md03YeGXhPzoJHXC5ENhi9SqGM/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/AVvXsEi1WDhbRJ3FJgqSOiSRXbwlgzCclFiFyoesSc0dDNCfGKxg5Pn-R-_ZcWZHDigTnaHfJ3RJCI9B4rXUVi_cQ5ImM9vbo2u2P91VMCpsjBJaKSRhy4LRSijypUr9wSax1968HDpfhdlnPhg/s1600/fb-icon.png);}
#sh-sosmed li.tweet {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSU_7qD3JX8K3P6-BsShQjup7UHbOhfTuJ8DG6IN4WRnyQPH4UsXJQLHElhtXgd95eIIJCGZ0f3j6xs1mxdehdHX9hyJWCNHIlvri-bAIjZpw7wrJQrD4GqQfi9EiKErAvA21c1n5Lei0/s1600/twt-icon.png);}
#sh-sosmed li.gplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5CoFH9QKsbdkwBTF-RvLLVqdkW_2de7NINIReM0PRc_0x3Glbbic4Gd5KJ2JHwbn2pR5XbPsdFe_zvzDHMUpfLSReKIQPIYuNY4Dev1E6cu0Rlw2thyphenhyphenfR9BbAzJulC8fahkgGWUE0uQ0/s1600/gplus-icon.png);}
#sh-sosmed li.linkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4gMrdL_gR4jpYsqQ2TCLbO63aWfoXcwj5kWn5IsGwFVBjrwuXUy75Lfr9XcOFFGRh_n6UQms_3IBB4Ckh84T3ElWbmr9mQm5u6xSERUmITa3sCP8BzwdeFvJf7UNrLvB7jan9OfOCRrE/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
-Pada-Gambar.png "Roll-Spin Effect (Efek Berputar) Pada Gambar")
