Add Responsive On Hover Social Share Buttons For Blogger

1. Pure CSS.
2. Official Share Buttons.
3. Facebook Like, Twitter Tweet, Google +1 , Linked In Share Buttons.
4. Responsive and Stylish.
5. Easy Installation.

After having look on live demo you must be willing to add this widget to your blog so lets see how to install this widget for your blog.

Installation:
1. Go to Blogger > Template > Edit HTML.

2. Press CTRL + D and find the code "<data:post.body/>" or any other code where you want to show that widget

3. After finding the above code, copy paste the following code just below it.

<b:if cond='data:blog.pageType == "item"'><style>@import url(http://fonts.googleapis.com/css?family=Open+Sans);@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";#buttons { width: 475px; overflow: hidden; margin: 70px auto 0;}
.button { float: left; margin-right: 10px; width: 110px; background: #eaeaea; border: 1px solid #cbcbcb; border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow: inset 0 1px 0px #fdfdfd; padding: 15px 5px 5px; box-sizing: border-box;}
.button i { background: #c5c5c5; color: #eaeaea; text-align: center; line-height: 40px; font-size: 18px; width: 40px; height: 40px; display: block; margin: 0 auto 10px; border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%;}
.social-container { text-align: center; text-transform: uppercase; font-size: 12px; color: #656565; line-height: 54px; font-family: Open Sans; background: #d8d8d8; width: 100%; height: 45px; box-shadow: inset 0 -2px 4px #c7c7c7; border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; position: relative; overflow: hidden;}
.slide, .button i { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out;}
.slide { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15); border-radius: 0 0 22px 22px; -o-border-radius: 0 0 22px 22px; -ms-border-radius: 0 0 22px 22px; -moz-border-radius: 0 0 22px 22px; -webkit-border-radius: 0 0 22px 22px; /* top fix */ transition: all 0.2s ease-in-out; position: absolute; height: 45px; width: 100%; top: -35px;}
.slide::after { content: ""; display: block; position: absolute; width: 100%; height: 10px; box-shadow: inset 0 1px 0px #fdfdfd, 0 3px 0px #cdcdcd; border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background: #eaeaea; border: 1px solid #cbcbcb; box-sizing: border-box; bottom: 0;}
.button:hover .slide { top: 0; border-radius: 3px;}
.linkedin .IN-widget, .button iframe, .google #___plusone_0 { top: -2px; position: relative;}
.twitter iframe { width: 79px !important;}
.google #___plusone_0 { width: 60px !important;}
.button.facebook:hover i, .facebook .slide { background: #305c99; color: white;}
.button.twitter:hover i, .twitter .slide { background: #00cdff; color: white;}
.button.google:hover i, .google .slide { background: #d24228; color: white;}
.button.linkedin:hover i, .linkedin .slide { background: #007bb6; color: white;}
.button.linkedin { margin-right: 0;}
.credit { padding-left: 10px; font-size: 14px; color: #172b36; position: absolute; bottom: 0; text-align: center; font-family: Open Sans;}
.credit a { border-bottom: 2px solid #dc4106; text-decoration: none; padding: 0 0 2px; color: #172b36;}</style><div id="buttons"><div class="facebook button"> <i class="icon-facebook"></i> <div class="social-container fb"> <div class="slide"> <iframe src="//www.facebook.com/plugins/like.php?href=http://facebook.com/talhawebz&send=false&layout=button_count&width=90&show_faces=false&font&colorscheme=light&action=like&height=21&appId=568581339861351" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:81px; height:21px;" allowtransparency="true"> </iframe> </div> Facebook </div></div><div class="twitter button"> <i class="icon-twitter"></i> <div class="social-container tw"> <div class="slide"> <a href="https://twitter.com/share" class="twitter-share-button" data-via="mariuCSS"> Tweet </a> <script> !function(d,s,id){ var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https'; if(!d.getElementById(id)){ js=d.createElement(s); js.id=id; js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); </script> </div> Twitter </div></div><div class="google button"> <i class="icon-google-plus"></i> <div class="social-container tw"> <div class="slide">  <div class="g-plusone" data-size="medium"> </div>  <script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); } )(); </script> </div> Google+ </div></div><div class="linkedin button"> <i class="icon-linkedin"></i> <div class="social-container tw"> <div class="slide"> <script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US </script> <script type="IN/Share"></script> </div> LinkedIN </div></div></div></b:if>

4. Now change the talhawebz with your facebook page username.

5. After adding your facebook fan page username, You just have to Hit Save Button.

6. To show it on every page delete the Pink color code

7. Go to your blog, check any post, enjoy it and post your reviews.

Talha Webz

Responsive On Hover Social Share Buttons For Blogger

Add Responsive On Hover Social Share Buttons For Blogger

Related Post

About Admin