Cara Buat Mouse Hover Social Media Buttons

Tombol Social Media widget untuk Blogger,widget ini unik dan menarik dengan efek hover bagus.

Ini termasuk tombol semua jaringan sosial yang besar dan tidak memperlambat blog Anda.

ini nantinya berisikan 4 jejaring sosial beserta icon Nya, antara lain facebook, twitter, rss pump, google+.

Social bar ini juga sudah di desain untuk mengikuti layar monitor, jadi jika pengunjung scroll mouse ke bawah, maka widget ini akan mengikuti gerak layar monitornya.

• Demo

Well, bagi anda yang berminat dan tertarik untuk memasang widget ini di blog anda, silahkan disimak yang berikut ini.

☻ Cara ADD TOMBOL Sharing Sosial Widget

1) Pergi ke Blogger Dashboard → Tata Letak → Elemen Halaman.
2) Tambah Gadget HTML / JavaScript.
3) Paste di bawah kode di dalamnya.

<style>
#pctoolstips {
width: 260px;
margin: 5px 20px;
padding:5px;
}
#pctoolstips li {
cursor: pointer;
height: 48px;
position: relative;
list-style-type: none;
}
#pctoolstips .icon {
background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbNnZsF7M9UDC1hQDvO-lBruRV0tWLEZ-iEE7wSljISgPUMOjVTNaHDjiaE08YRg08Pf_SSH-vHOsVQrjnVOANXVhrh_zSZYCFfdiQ7u5x-r_uJNKr0irJSbEaWsf5r-9HnWF02of-JRU/s1600/ramabanten1.png') 0 0 no-repeat;
background-color: rgba(217, 30, 118, .42);
border-radius: 30px;
display: block;
color: #141414;
float:none;
height: 48px;
line-height: 48px;
margin: 5px 0;
position: relative;
text-align: left;
text-indent: 90px;
text-shadow: #333 0 1px 0;
white-space: nowrap;
width: 48px;z-index: 5;
-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;
-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;
-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;
transition: width .25s ease-in-out, background-color .25s ease-in-out;
-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
-moz-box-shadow: rgba(0,0,0, .28) 0 2px 3px; -o-box-shadow: rgba(0,0,0, .28) 0 2px 3px;
box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;
text-decoration: none;
}
#pctoolstips span:hover {
visibility: hidden;
}
#pctoolstips span {
display: block;
top: 15px;position: absolute;
left: 90px;
}
#pctoolstips .icon {
color: #fafafa;
overflow: hidden;
}
#pctoolstips .fb {
background-color: rgba(45,118,185, .42);
background-position: 0 -382px;
}
#pctoolstips .twit {
background-color: rgba(0, 161, 223, .42);
background-position: 0 -430px;
}
#pctoolstips .google {
background-color: rgba(167, 0, 0, .42);
background-position: 0 -478px;
}
#pctoolstips .rss {
background-color: rgba(255,109, 0, .42);
background-position: 0 -718px;
}
#pctoolstips li:hover .icon {
width: 250px;
}
#pctoolstips li:hover .icon {
background-color: #d91e76;
}
#pctoolstips li:hover .fb {
background-color: #2d76b9;
background-position: 0 2px;
}
#pctoolstips li:hover .twit {
background-color: #00A1DF;
background-position: 0 -46px;
}
#pctoolstips li:hover .google {
background-color: #A70000;
background-position: 0 -94px;
}
#pctoolstips li:hover .rss {
background-color: #EC5601;
background-position: 0 -334px;
}
#pctoolstips .icon:active {
bottom: -2px;-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
}
</style>
<ul id="pctoolstips">
<li ><a href="http://www.facebook.com/...ISI..." class="icon fb">Like us on Facebook</a><span>Like us on Facebook</span>
</li>
<li ><a href="http://www.twitter.com/...ISI..." class="icon twit" >Follow us on Twitter</a><span>Follow us on Twitter</span>
</li>
<li ><a href="https://plus.google.com/+...ISI..." class="icon google" >Follow us on Google+</a><span>Follow us on Google+</span>
</li>
<li ><a href="http://feeds.feedburner.com/...ISI..." class="icon rss" >Subscribe via RSS</a><span>Subscribe via RSS</span>
</li>
</ul >

4) Sesuaikan setting. 

♥ Gantilah USERNAME1 dengan Facebook pengguna. 

♥ Gantilah USERNAME2 dengan Twitter pengguna. 

♥ Gantilah G+ URL dengan url Laman Google+ Anda. 

♥ Gantilah USERNAME3 dengan Feed burner pengguna. 

5) Simpan Selesai

Facebook Twitter Google+ Linkedin Digg