Membuat Efek Slide Out Tombol Share Sosial Media di Blogger

Written By PENDIDIDKAN Friday, October 17, 2014 Add Comment Edit

Membuat Efek Slide Out Tombol Share Sosial Media di Blogger - Sosial media memiliki peran aktif pada Blog, karena dengan memasang sosia media pada Blog dapat menaikan trafik sebuah blog dengan cara membagikan artikel yang anda buat kedalam sosial media.

Pada saat Anda berkunjunga pada sebuah Blog pastinya sudah pernah melihat sosial media pada blog, dibagian atas atau bawah postingan atau diatas haeder. Kali ini sedikit akan saya akan share widget sosial media dengan menggunakan efek slide out. Sosial Media pada Efek Slide Out ini akan muncul apabila cursos diletakkan diatasnya.

Membuat Efek Slide Out Tombol Share Sosial Media dengan sentuhan CSS, bagia anda yang berminat untuk memasangnya silahkan ikuti langkah-langkahnya :

Membuat Efek Slide Out Tombol Share Sosial Media di Blogger
Silahkan anda membuka Editor Template anda dan dengan menggunakan ctrl+f anda cari ]]></b:skin> kemudian anda terapkan kode dibawah ini diatasnya :

#sh-sosmed {
position:relative;
margin:1em auto;
padding:0;
width:64px;
height:64px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlBwJVEUi4O7X9RvXJ5Qjg8mQ03h7xVu2RGKF7PVxns_FTUh0RpjLd1Ol0ziHY82QMqDmuxxbUFjmVSVeQsPIP1sKiVJzWgi26qNOxwFISvQYAOEenr92JFBQRuPRzcyx0EjdPw2ruYQY/s1600/share-g.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/AVvXsEikuGJmn5PhuGYcstuZSbbRtaWJ8g6vWQetQUBu3RyDytIJ3brB4YmceSP5Dx6XZwi2z4Uo_3IdqtQ7WRvuU0gC2V0imV_q2t55vaE1uynlp5g58YC3E7A_4t6Iau47tLVIpdLIhyONuGo/s1600/fb-icon.png);}
#sh-sosmed li.tweet {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXxZSSrfjuIfQvNeMl70xJLfz8IgehjVkq6raj5GLEvrS0XOdYjjqStgzfKcg1xBQVdEZQ1wFhCLxYto9INrBw9tR8FvoyJpemX2iZ6I7K6s1cMvv9Iwnk88olBmGR2owraViiNBiYUiE/s1600/twt-icon.png);}
#sh-sosmed li.gplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixxyuPUppZiGiLn1Y3YMAxZHAODVbr7wINs4Ktfx8USMzG0CedLUrXAImEIaVLckuHIkOlZAcRD5_5TYtZwHsGLynuRzcc7jJ3evAE69K2o0NLqSSZ9WWO3j81K_mWgbPwE5jScLSIFEo/s1600/gplus-icon.png);}
#sh-sosmed li.linkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO3ur7_fAg2pvP144012Q7TaRBskaObNOxj8JG5L6-F5JMifCCLt1qzpSrJ7a_z4a2ducwa-Ssz7bz9SinZHF4FlR9VIodIaECqd_SGKtGZx7XKDA8EI1iL5tvg4T1-xQqErD9yzV8EW8/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}

Selanjutnya anda terapkan kode HTML dibawah ini, anda bisa terapkan dimana saja sesuai keinginan anda.

Demikian Membuat Efek Slide Out Tombol Share Sosial Media di Blogger, semoga bermanfaat!