Horisontal Floating Automatic Hidden Social Sharing Bar

Horisontal Floating Automatic Hidden Social Sharing Bar adalah salah satu widget yang posisinya akan melayang dan berada pada bagian atas blog/situs Anda. Horisontal Floating Automatic Hidden Social Sharing Bar ini akan muncul ketika Anda atau pengunjung sedikit saja menggulirkan ke bagian bawah halaman blog/situs Anda. Widget ini akan lansung tersembunyi jika Anda berada pada bagian paling atas blog/situs Anda, dan widget ini akan menghilang bila Anda menekan tombol close (x).

Horisontal Floating Automatic Hidden Social Sharing Bar ini adalah widget yang sempurna dan tidak menghabiskan tempat. Pada widget ini saya telah melakukan perubahan agar tampilannya lebih sempurna seperti saya menambahkan icon google + ,pinterest dan logo/gambar. Untuk lebih singkatnya silahkan Anda lihat di blog yang tidak pernah saya urus lagi dengan cara menekan tombol di bawah ini, dan gulirkan sedikit saja ke bawah maka Horisontal Floating Automatic Hidden Social Sharing Bar ini akan muncul.

Lihat Demo

---

Cara memasang Horisontal Floating Automatic Hidden Social Sharing Bar di blogger

---

Untuk memasang Horisontal Floating Automatic Hidden Social Sharing Bar pada blog/situs Anda juga cukup mudah silahkan Anda ikuti langkah-langkah berikut untuk mulai memasangnya pada blog/situs Anda.

1. Login ke akun blogger Anda.

2. Pada Dasbor klick Template ➨ Edit HTML

3. Centang Expand Template Widget ➨ Backup dulu templatenya untuk mengantisipasi bila terjadi kesalahan.

4. Selanjutnya dalam Edit HTML Anda cari kode </head> Jika kesulitan mencarinya coba lihat Cara Cepat Mencari Kode HTML.

5. Bila sudah ketemu tepat di atas kode tersebut letakkan kode berikut.

<script type='text/javascript'>var switchTo5x=true;</script>
<script src='https://otowebsite-blogspot.googlecode.com/svn/trunk/share_buttons.js' type='text/javascript'/>
<script src='https://otowebsite-blogspot.googlecode.com/svn/trunk/share_loader.js' type='text/javascript'/>

6. Sekarang cari kode  ]]></b:skin> atau <style> dan letakkan kode CSS berikut tepat di atasnya.

<style type="text/css">
.stpulldown-gradient
{
background: #E1E1E1;
background: -moz-linear-gradient(top, #E1E1E1 0%, #A7A7A7 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E1E1E1), color-stop(100%,#A7A7A7)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E1E1E1', endColorstr='#A7A7A7',GradientType=0 ); /* ie */
background: -o-linear-gradient(top, #E1E1E1 0%,#A7A7A7 100%); /* opera */
color: #636363;
}
#stpulldown .stpulldown-logo
{
height: 40px;
width: 300px;
margin-left: 20px;
margin-top: 5px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6JwIcw-p3MlUsRuN_1BNAry0pC7bD7pYa2w8RPb1zJwjkyUhlFFdWNdwoQG9mVDDixxhIusR3zes4uL10Rmec-lpThwt_Ri1fqaOZh-utm3YPXPQBt3KeVJuNnhEt15ffQHaK4iotDQ/s1600/blackOW.png") no-repeat;
}
</style>

Ganti yang bewarna biru dengan Url logo/gambar Anda, Max ukurannya 300 x 40 px.

7. Langkah selanjutnya, cari kode </body> dan letakkan kode berikut ini tepat di atasnya.

<script>
var options={ "publisher": "d4be5209-8eb5-4854-8391-917faf746b47", "scrollpx": 50, "ad": { "visible": false}, "chicklets": { "items": ["facebook", "twitter", "googleplus", "linkedin", "pinterest", "sharethis"]}};
var st_pulldown_widget = new sharethis.widgets.pulldownbar(options);
</script>

8. Simpan template.

Sekarang Anda bisa lihat sendiri hasilnya.

Saya rasa cukup untuk kali ini, mudah-mudahab Anda suka dengan widget ini!

Silahkan tinggalkan tanggapan atau komentar Anda tentang postingan atau article di atas.