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 Floati ng 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 screenshot.
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.
/* --- E-ideaMart Social Hover Buttons Plugin For Blogger --- */ <div id="mbl-social-hover">
<div class="tota2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4LVAkoeb1-rvJQd4X23o_oHyAUDcTv9BoUKPxTJR7vNH84vOjIQZGvgYTHaMHkfVLzJetwzDRX897jnTjEQhrZwOwXLjYWt3DHVl1svw_As_aUY_u1bp03xsF9OC7cdqTHykVD3pzc4Y/s1600/SUB-BAN .png" /></div>
<div id="links"><a href="http://twitter.com/saadahmads" class="twitter" title="Twitter" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9cXR2wM3bXAOK0-vP5aHb76Vk3A7kxcBmxCnIjVrkFg2mH8vx7v2sBqCh3zItCvlyCtk7QgUyPzGXN-sByCL-K5KunFvurS23mDVPpbN1lMuIVSbHc8wjao4QatF8r2ICYksFozBGpls/s1600/twitter .png" /></div></a>
<a href="http://www.facebook.com/eideamart" class="facebook" title="Facebook" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm37Q4RMDDu_roF_rt2C734OHjBxlwcceBY-xv8_7YbtR_tEXnraRUzgjmMUfyVW3GELmtYA6BkT9RftPrPHOk-TFNxTh0gZyXJ4LevKrg5DSUUajyJTgsQI6XnYd5a8z5ikr3hhM8qvk/s1600/FB.png" /></div></a>
<a href="https://plus.google.com/u/0/101845370194687634858" class="google" title="Google Plus" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrwCK9zEL6f-yNS1mG2uWFRV6ITy9-z10qEpORJswz7Bpjgi5NfXfyh6aaovWIJ9sDRW8VqfwjpmGKJyxtMAhZHntQJ6b6r3efTfj3MexIvrFVETbgDONk0h5X9tpyplTKk76IAwXeqiI/s1600/google. png" /></div></a>
<a href="http://pinterest.com/-----------/" class="pinterest" title="Pinterest" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQlSmwv0POGqaZTV4jFWaqvYM8Hi6MDVjtscys31IdGZJWUkZO-eZgTVFJ8VQB3CdVDTpUKlUiIPNbrJRERQUYRzXy3tBzMMJv1r6X_DNk8OtyLGckxYjTceeKelbwsHk-3wsfrZykPEw/s1600/pin.png " /></div></a>
<a href="http://e-ideamart.blogspot.com/feeds/posts/default" class="rss" title="Feedburner" target="_blank"><div class="tota"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzScgdOUTvo42U-jHp45yuMp3Ph5TYL_srne-QeZBpgPB0NfCaycaiepc_UUdWChgsbGF0k2xZFadNkDLVrglH3U874JMovIyCPhWxI3D2wdfOfMnG2jH4apaWxBZkSSOEtU4NXcNWJA8/s1600/rss.png " /></div></a></div></div>
<style>.tota2 { margin-left:15px; margin-top:10px;}.tota { margin-top:7px; }#mbl-social-hover{position:relative;width:240px;height:400px;background:#554e4c url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKrq68G07-aWQdTTifks3TiPxUaZifJbCHo98mjVnygQeuw9baZ0APdO876vY4XZtkatxcmbIm4MFjaUDkZ7HM2Xt6VHF4Dto0e0-J-rk-AIxCwgjkPNJ9fbWVBeXv6-hBovD6k2Cr26k/s1600/vintage .png");}#mbl-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);}#mbl-social-hover #title span{display:block;font-size:14px;line-height:1.5em;margin-top:10px;font-weight:400;}#mbl-so cial-hover #links{position:absolute;bottom:0;width:100%;}#mbl-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);bord er-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;}#mbl-social-hover a:hover{background:rgba(0,0,0,0.15);text-decoration:none;}#mbl-social-hover a.twitter:hover{background:#79dbff;}#mbl-social-hover a.facebook:hover{background:#6e9bee;}#mbl-social-hover a.google:hover{background:#00be00;}#mbl-social-hover a.pinterest:hover{background:#cb2027;}#mbl-social-hover a.rss:hover{background:#ffae42;}#mbl-social-hover a span{height:15px;line-height:15px;width:15px;text-align:center;margin-right:20px;font-size:1 3px;padding:5px;border-radius:99px;background:rgba(0,0,0,0.1);}#home-tagline{text-align:cent er;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{f loat: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;-mo z-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;}#ho me-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:1 6px;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:ri ght;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;co lor:#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/101845370194687634858 with Google+ Profile URL.
- Replace http://twitter.com/saadahmads with Twitter Username.
- Replace http://e-ideamart.blogspot.com/feeds/posts/default with RSS Feed URL
- Replace http://pinterest.com/--------- with Pinterest Profile URL.
- Replace http://www.facebook.com/eideamart 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.
0 comments:
Post a Comment