Membuat Sticky Social Pada Blogspot
Jika sobat ingin melihat sticky social pada blogger, silahkan lihat icon-icon social network pada blog ini atau blog ini.
Bagi kamu yang tertarik, caranya cukup mudah kok, ikuti saja langkah-langkah berikut:
Dari dasbor, pilih Rancangan - Edit HTML.
Lakukan duplikasi template untuk jaga-jaga jika bermasalah
Copy-lah script berikut lalu letakkan (paste) di bawah kode <body>:
<!--stickysocial_dock-->
<style type='text/css'>
.stickysocial {
background: transparent;
position: fixed;
top: 35%;
left: 0.25%;
z-index: 100;
vertical-align: bottom;
width: 37px;
text-align: center;
}
.stickysocial a:hover {
opacity: .73;
-moz-opacity: .73;
filter: alpha(opacity=73);
}
</style>
<div class='stickysocial' id='stickysocial_dock'>
<a href='https://plus.google.com/USERID' target='_blank' title='Follow us on Google+'><img alt='Google+' src='http://i563.photobucket.com/albums/ss76/peace_enes/neon-google.png' style='position:relative; width:37px'/></a>
<a href='http://www.facebook.com/USERNAME' target='_blank' title='Follow us on Facebook'><img alt='Facebook' src='http://i563.photobucket.com/albums/ss76/peace_enes/neon-facebook.png' style='position:relative; width:37px'/></a>
<a href='http://twitter.com/USERNAME' target='_blank' title='Follow us on Twitter'><img alt='Twitter' src='http://i563.photobucket.com/albums/ss76/peace_enes/neon-twitter.png' style='position:relative; width:37px'/></a>
<a href='http://www.myspace.com/USERNAME' target='_blank' title='Follow us on MySpace'><img alt='MySpace' src='http://i563.photobucket.com/albums/ss76/peace_enes/neon-myspace.png' style='position:relative; width:37px'/></a>
<a href='http://ruangsc.blogspot.com/2011/06/membuat-sticky-social-pada-blogspot.html' target='_blank' title='Cara Membuatnya'><img alt='SC' src='http://i563.photobucket.com/albums/ss76/peace_enes/neon-rss-feed.png' style='position:relative; width:37px'/></a>
</div>
Ubahlah ukuran top dan left-nya sesuai keinginan.
Jika ingin menempatkannya di sebelah kanan, ubah left menjadi right.
Ganti USERID atau USERNAME sesuai User ID/User Name kamu pada akun google+, facebook, twitter, dan myspace.
Jika sudah selesai, simpanlah dan ucapkan alhamdulillah...
Jika kamu menginginkan, kamu juga bisa menambah atau mengurangi icon-icon social network lainnya. Atau bisa juga mengubah sumber gambar sesuai gambar yang kamu inginkan.
Semoga bermanfaat ....
Jika sobat ingin melihat sticky social pada blogger, silahkan lihat icon-icon social network pada blog ini atau blog ini.
Bagi kamu yang tertarik, caranya cukup mudah kok, ikuti saja langkah-langkah berikut:
Dari dasbor, pilih Rancangan - Edit HTML.
Lakukan duplikasi template untuk jaga-jaga jika bermasalah
Copy-lah script berikut lalu letakkan (paste) di bawah kode <body>:
<!--stickysocial_dock-->
<style type='text/css'>
.stickysocial {
background: transparent;
position: fixed;
top: 35%;
left: 0.25%;
z-index: 100;
vertical-align: bottom;
width: 37px;
text-align: center;
}
.stickysocial a:hover {
opacity: .73;
-moz-opacity: .73;
filter: alpha(opacity=73);
}
</style>
<div class='stickysocial' id='stickysocial_dock'>
<a href='https://plus.google.com/USERID' target='_blank' title='Follow us on Google+'><img alt='Google+' src='http://i563.photobucket.com/albums/ss76/peace_enes/neon-google.png' style='position:relative; width:37px'/></a>
<a href='http://www.facebook.com/USERNAME' target='_blank' title='Follow us on Facebook'><img alt='Facebook' src='http://i563.photobucket.com/albums/ss76/peace_enes/neon-facebook.png' style='position:relative; width:37px'/></a>
<a href='http://twitter.com/USERNAME' target='_blank' title='Follow us on Twitter'><img alt='Twitter' src='http://i563.photobucket.com/albums/ss76/peace_enes/neon-twitter.png' style='position:relative; width:37px'/></a>
<a href='http://www.myspace.com/USERNAME' target='_blank' title='Follow us on MySpace'><img alt='MySpace' src='http://i563.photobucket.com/albums/ss76/peace_enes/neon-myspace.png' style='position:relative; width:37px'/></a>
<a href='http://ruangsc.blogspot.com/2011/06/membuat-sticky-social-pada-blogspot.html' target='_blank' title='Cara Membuatnya'><img alt='SC' src='http://i563.photobucket.com/albums/ss76/peace_enes/neon-rss-feed.png' style='position:relative; width:37px'/></a>
</div>
Ubahlah ukuran top dan left-nya sesuai keinginan.
Jika ingin menempatkannya di sebelah kanan, ubah left menjadi right.
Ganti USERID atau USERNAME sesuai User ID/User Name kamu pada akun google+, facebook, twitter, dan myspace.
Jika sudah selesai, simpanlah dan ucapkan alhamdulillah...
Jika kamu menginginkan, kamu juga bisa menambah atau mengurangi icon-icon social network lainnya. Atau bisa juga mengubah sumber gambar sesuai gambar yang kamu inginkan.
Semoga bermanfaat ....
No comments:
Post a Comment