Welcome to www.ExEBlogger.Blogspot.Com | Want This Template! Subscribe us!
Subscribe For Free Updates!

We'll not spam mate! We promise.

Saturday, 12 October 2013

Add Social Buttons With Hover Effects Widget for Blogger

Add Social Buttons With Hover Effects Widget for Blogger
As we all are well aware of the fact that, Google is playing foremost role is killing all the traffic of a website by rolling out back to back algorithm updates. Due to which, almost 50 percent of bloggers are trying to utilize social networking websites to boost their traffic. For that reason recently, we released Floating Social Media tab widget which proved to be the greatest hit of all time. Since, it’s the Thanks Giving weekend, so we decided to share yet another fabulous looking social buttons that will add a new life to your blog. It is sleek and stylish plus it has entire new look which will attract readers. So today, in this article we will be sharing How to Add Social Buttons with Hover Effects in Blogger.




Where This Social Buttons With Hover Will Appear:

Many of our visitors complained that there is no such Social widget that could be used in the Sidebar. Therefore, keeping those views in mind we have designed a Social Bookmarking Widget which can be used in the sidebar. It has five Social buttons which includes Pinterest, Facebook, Google Plus, Twitter and RSS Feed. Take a look at the following demo. 



How To Create Social Buttons With Hover Widget in Blogger:

Just like our other tutorials, the steps which are mention below, are ideally made for those who are new bloggers. It will hardly take 5 minutes to complete the integration. Just follow the following instructions.  
  • Go to Blogger.com >> Layout >> Add a Gadget.
  • In the List Select Edit HTML/JavaScript.
  • Now in the HTML Text box paste the Following Coding.


/* --- ExEBlogger Social Hover Buttons Plugin For Blogger --- */ <div id="eXe-social-hover">

<div class="tota2"><img src="http://2.bp.blogspot.com/-pKK9MYp8Ww0/UK9z4ugMyOI/AAAAAAAAIRE/KMY-EJCl96s/s1600/SUB-BAN.png" /></div>

<div id="links"><a href="http://twitter.com/exeblogger" class="twitter" title="Twitter" target="_blank"><div class="tota"><img src="http://1.bp.blogspot.com/-GVPx4HMrNDY/UK9uv3rA0iI/AAAAAAAAIO4/yfuiRGXLeVU/s1600/twitter.png" /></div></a>

<a href="http://www.facebook.com/exeblogger" class="facebook" title="Facebook" target="_blank"><div class="tota"><img src="http://1.bp.blogspot.com/-DX-Bx5WR6zE/UK9whE-OCzI/AAAAAAAAIPg/9k_zjlDPF8s/s1600/FB.png" /></div></a>

<a href="https://plus.google.com/u/0/100327270919452499620" class="google" title="Google Plus" target="_blank"><div class="tota"><img src="http://4.bp.blogspot.com/-eP0U9g8fm0Q/UK9wYNQ4CmI/AAAAAAAAIPY/UWYbc7e9-go/s1600/google.png" /></div></a>

<a href="http://pinterest.com/fosterzone/" class="pinterest" title="Pinterest" target="_blank"><div class="tota"><img src="http://1.bp.blogspot.com/-nEZw_TpzSoU/UK-TOH8OEEI/AAAAAAAAISg/bDcBgt2yEe4/s1600/pin.png" /></div></a>

<a href="http://feeds.feedburner.com/exeblogger" class="rss" title="Feedburner" target="_blank"><div class="tota"><img src="http://4.bp.blogspot.com/-yOEZQT7it74/UK9wClCPwpI/AAAAAAAAIPQ/EK4CB92xQ98/s1600/rss.png" /></div></a>
</div></div>

<style>
.tota2 { margin-left:15px; margin-top:10px;}.tota { margin-top:7px; }#eXe-social-hover{position:relative;width:240px;height:400px;background:#554e4c url("http://4.bp.blogspot.com/-CNgQWNU8Sg4/UK91PeHlvjI/AAAAAAAAIRM/56SruW6DBQ0/s1600/vintage.png");}#eXe-social-hover #title{font-family:'Open sans';font-size:28px;color:#fff;font-weight:600;margin:30px 20px 0;text-align:center;line-height:1.1em;text-shadow:1px 1px 1px rgba(0,0,0,0.3);}#eXe-social-hover #title span{display:block;font-size:14px;line-height:1.5em;margin-top:10px;font-weight:400;}#eXe-social-hover #links{position:absolute;bottom:0;width:100%;}#eXe-social-hover a{display:block;padding:0 20px;height:42px;line-height:42px;color:#fff;font-size:12px;background:rgba(0,0,0,0.08);border-top:1px solid #4c4644;border-top:1px solid rgba(0,0,0,0.1);-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}#eXe-social-hover a:hover{background:rgba(0,0,0,0.15);text-decoration:none;}#eXe-social-hover a.twitter:hover{background:#79dbff;}#eXe-social-hover a.facebook:hover{background:#6e9bee;}#eXe-social-hover a.google:hover{background:#00be00;}#eXe-social-hover a.pinterest:hover{background:#cb2027;}#eXe-social-hover a.rss:hover{background:#ffae42;}#eXe-social-hover a span{height:15px;line-height:15px;width:15px;text-align:center;margin-right:20px;font-size:13px;padding:5px;border-radius:99px;background:rgba(0,0,0,0.1);}#home-tagline{text-align:center;font-size:32px;color:#000;font-weight:300;margin:60px 0 40px;}#home-tagline strong{color:#ff5421;font-weight:300;}#home-highlights{margin-bottom:40px;}.home-highlight{float:left;width:142px;padding:30px 0;margin-right:21px;text-align:center;font-size:13px;display:block;opacity:0.9;color:#796f6c;font-size:40px;background:#e2e0df;background:rgba(0,0,0,0.04);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}.home-highlight p{margin:0;}.home-highlight:hover{color:#3a3534;text-decoration:none;background:rgba(0,0,0,0.1);}.home-highlight-title{font-size:13px;margin:7px 0 0;text-align:center;color:#796f6c;cursor:pointer;font-weight:900;-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;}.home-highlight:hover .home-highlight-title{color:#3a3534;}#home-featured{min-height:400px;margin-bottom:37px;}#home-featured .home-divider{margin-top:0;}#home-featured h2{text-align:center;font-size:32px;color:#161414;font-weight:300;margin:0 0 40px;}#home-featured h2:after{display:block;content:"";width:342px;margin:0 auto;height:1px;background:#161414;margin-top:5px;}.featured-theme-entry-content{font-size:16px;float:left;width:430px;font-weight:300;}.featured-theme-entry-content h3{font-size:21px;line-height:1.4em;margin:0;font-weight:400;}.featured-theme-entry-content .button{margin-top:15px;}.featured-theme-entry-content .button:hover{background:#f5634a;opacity:1;}.featured-theme-entry-img{display:block;float:right;margin-right:5px;}.featured-theme-entry-img a{display:block;padding:6px;background:#fff;border-radius:2px;}#featured-theme-slider .flex-control-nav{position:absolute;top:-20px;left:-54px;}#featured-theme-slider .flex-direction-nav{margin:0;}#featured-theme-slider .flex-direction-nav li a{background:#312d2c;cursor:pointer;display:block;height:70px;line-height:70px;width:30px;color:#fff;text-align:center;margin:-30px 0 0;position:absolute;top:50%;-moz-transition:background 0.3s ease-in-out 0s;opacity:0.15;border-radius:4px;}#featured-theme-slider .flex-direction-nav li .flex-prev{left:-90px;}#featured-theme-slider
</style>


Customization: 


  • Replace https://plus.google.com/u/0/100327270919452499620 with Google+ Profile URL.
  • Replace http://twitter.com/exeblogger with Twitter Username.
  • Replace http://feeds.feedburner.com/exeblogger with RSS Feed URL
  • Replace http://pinterest.com/fosterzone/ with Pinterest Profile URL.
  • Replace http://www.facebook.com/exeblogger with Facebook Page URL.
All Done: After customization, save the template by pressing Save button. That’s it, go ahead and check out the website to see the picture perfect results.
Credits:MBL

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you Subscribe to our regular Email Updates!
Share This Story, Choose Your Platform! >>

1 comments:

  1. I think the admin of this website is truly working hard in favor of his website, for the reason that here every data is quality based information.
    website design

    ReplyDelete