Home »

Add Cool Mouse Hover Social Media Buttons For Blogger

Tuesday, October 15, 2013

Hello Guys, I here once again with a new Social Media Buttons widget for Blogger. The widget is unique and attractive with a nice hover effect. It includes all major social network's buttons and does not slow down your blog.

 ☻ HOW TO ADD SOCIAL SHARING BUTTONS WIDGET FOR BLOGGER


Written explanation

1) Go to Blogger Dashboard → Layout → Page Elements.
2) Add a HTML/JavaScript Gadget.
3) Paste below code in it. 
<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/AVvXsEgsAP3DVA4LqWQQvx-1CoTs5nelMZguM85sfjMVHPubQBjKOOT2XWdbxyKjpEhZaEHhc7Hz8NOKgYcnLss6Dn4OTbOUF5_EAz9snZfVSVJv_GwJdjiSeW1X9lByOtvuSB43fffmjgCroB0/s1600/pctoolstips.blogspot.com.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/USERNAME1" class="icon fb">Like us on Facebook</a><span>Like us on Facebook</span>
</li>
<li ><a href="http://www.twitter.com/USERNAME2" class="icon twit" >Follow us on Twitter</a><span>Follow us on Twitter</span>
</li>
<li ><a href="G+ URL" class="icon google" >Follow us on Google+</a><span>Follow us on Google+</span>
</li>
<li ><a href="http://feeds.feedburner.com/USERNAME3" class="icon rss" >Subscribe via RSS</a><span>Subscribe via RSS</span>
</li>
</ul>
4) Customize your setting.Find any word click F3 or Ctrl+F. 
♥ Replace it USERNAME1 with your Facebook Username. 
♥ Replace it USERNAME2 with your Twitter Username. 
♥ Replace it G+ URL with your Google+ Page url . 
♥ Replace it USERNAME3 with your Feed burner Username. 
5) Save your Widget.
Share On Google+Add This To DeliciousTweet/ReTweet ThisShare on FacebookStumbleUpon ThisDigg This

name is full abdelali tibicht, my country is morocco, care techniques and the development of blogging, my goal through this blog, is to help bloggers develop their blogs through my modest experience gained during my career blogging can.

Follow Me On Twitter Or Facebook

Subscribe to Get Free Blogging Tips And Quality Tutorials Straight in Your Inbox.


Did you like Thread ؟
Tags: