Stylish 1-Click Social Follow Buttons For Bloggers
As it does not need too much talk, we all knew the importance of social media integration on our blog. Social media is one the imperative factors that must be considered when identifying a quality branded blog.
While we all understood the vital role social media plays, thus, it is time we consider getting one for our blog.
In today’s tutorial, I will be presenting to you the best social follow button which will rapidly grow your social media community in the meantime.
Amazing features from this social follow button
- 1-Click Social Integration – what makes this social follow button stand out is the enhancement of its 1-click action. Readers can simply follow you without redirecting to your fan pages.
- Responsiveness and Compatibility – It is very compatible with all old and modern internet browsers, also, it very responsive on every browsers.
- Fits Every Position On Blog – It fits every position on blog, either you prefer to embed it to sidebar or footer, the choice is all yours.
- Flexibility and Customization – This social button is flexible and easier to customize, you can style it the way you want, you can also manage the size just the way you want it.
Here is the procedure.
Step 1
Go to Layout on your blogger dashboard and click Add Widget then go ahead and click edit Html/Javascript.
Step 2.
Copy and paste any of below codes just right into Html/Javascript blank space and hit save.
<!-- Stylish 1-click social follow button Designed by:: http://www.blogspothy.blogspot.com Follow Count Code by:: http://bloggerwallet.com issued under GNU GPL Licence Icons:: FontAwesome --> <style type="text/css"> #buttons { overflow: hidden; } .button1 { background: none repeat scroll 0 0 #EEEEEE; -moz-box-shadow: 0 1px 0 #FDFDFD inset; -webkit-box-shadow: 0 1px 0 #FDFDFD inset; box-shadow: 0 1px 0 #FDFDFD inset; float: left; margin: 0; padding: 15px 0 0; width: 135px; } .button1.facebook,.button1:hover.facebook .slide { margin-right: 1px; background: #3873ad; width:134px; height:95px; } .button1.google,.button1:hover.google .slide { margin-right: 1px; background: #f73c28; width:134px; height:95px; } .button1.twitter,.button1:hover.twitter .slide { background: #62c6f8; width:134px; height:95px; } .button1.rss,.button1:hover.rss .slide { background: #f18421; width:134px; height:95px; } .button1 i { color: #FFFFFF; display: block; font-family: FontAwesome; font-size: 20px; font-style: normal; height: 40px; line-height: 40px; margin: 0 auto 2px; text-align: center; width: 40px; border: 2px solid #fff; -o-border-radius: 10%; <!--this widget is originally coded and designed by Team - blogspothy.blogspot.com-->-ms-border-radius: 10%; -moz-border-radius: 10%; -webkit-border-radius: 10%; border-radius: 10%; } .social-container { color: #FFFFFF; font-size: 15px; font-weight: 600; height: 55px; line-height: 45px; overflow: hidden; position: relative; text-align: center; width: 100%; } .slide, .button1 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; <!--this widget is originally coded and designed by Team - blogspothy.blogspot.com-->-o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .slide { height: 45px; position: absolute; top: -35px; width: 100%; } .icon-facebook:before { content:"\f09a"; } .icon-twitter:before { content:"\f099"; } .icon-google-plus:before { content:"\f0d5"; } .icon-rss:before { content:"\f09e"; } .slide:after { border-left: 2px solid #EEEEEE; bottom: 0; content: ""; display: block; height: 10px; position: absolute; width: 100%; } .button1:hover .slide { top: 0; } <!--this widget is originally coded and designed by Team - blogspothy.blogspot.com-->.facebook_c { position: relative; top: 10px; } .twitter_c { position: relative; top: 10px; } .rss .IN-widget, .button1 iframe { position: relative; top: -5px; } .google_c { position: relative; top: 5px; } .rss_c { position: relative; top: 6px; } .twitter iframe { width: 134px !important; } .google #___plusone_0 { width: 60px !important; } .button1.rss { margin-right: 0; } </style> <aside class='sidebar-wrapper'> <div class='sidebar section' id='sidebar'><div class='widget HTML' data-version='1' id='HTML2'> <div class='widget-content'>
<div id="buttons">
<div class="facebook button1">
<i class="icon-facebook"></i>
<div class="social-container fb">
<div class="slide">
<div class="facebook_c">
<iframe src="//www.facebook.com/plugins/like.php?href=https://www.facebook.com/Blogspothy-1943614969257628/&width&layout=button_count&action=like&show_faces=false&share=false&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:81px; height:21px;" allowtransparency="true"></iframe></div>
</div>
Facebook
</div>
</div>
<div class="twitter button1">
<i class="icon-twitter"></i>
<div class="social-container tw">
<div class="slide">
<div class="twitter_c">
<a href="https://twitter.com/blogspothy" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false" data-via="mariuCSS"></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></div>
Twitter
</div>
</div> <div class="google button1"> <i class="icon-google-plus"></i> <div class="social-container tw"> <div class="slide"> <div class='google_c'> <!-- Place this tag in your head or just before your close body tag. --> <script type="text/javascript" src="https://apis.google.com/js/platform.js"></script> <!-- Place this tag where you want the widget to render. --> <div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/u/0/105950387027097996025" data-rel="publisher"></div></div> </div> Google+ </div> </div> <div class="rss button1"> <i class="icon-rss"></i> <div class="social-container tw"> <div class="slide"> <div class="rss_c"><p><a href="http://feeds.feedburner.com/blogspothy"><img src="http://feeds.feedburner.com/~fc/blogspothy?bg=f25816&fg=FFFFFF&anim=1" height="26" width="88" style="border:0" alt="" /></a></p> </div> </div> </div> </div> </div> </div>Rss</div></div></aside> <div style="font-size: 10px; float: right; margin-top: -15px">Get this <a href="https://blogspothy.blogspot.com.ng/2017/07/stylish-social-follow-button-for-blogger.html">Social Follow Widget</a></div>
<!-- Stylish 1-click social follow button Designed by:: http://www.blogspothy.blogspot.comFollow Count Code by:: http://bloggerwallet.comissued under GNU GPL LicenceIcons:: FontAwesome --><style type="text/css">#buttons {overflow: hidden;margin-left:40px;}.button1 {background: none repeat scroll 0 0 #EEEEEE;-moz-box-shadow: 0 1px 0 #FDFDFD inset;-webkit-box-shadow: 0 1px 0 #FDFDFD inset;box-shadow: 0 1px 0 #FDFDFD inset;float: center;border-radius:7px;padding: 15px 0 0;width: 135px; }.button1.facebook,.button1:hover.facebook .slide {margin-right: 1px;background: #3873ad;width:229px;height:55px;border: 1px solid #2471a3;}.button1.google,.button1:hover.google .slide {margin-right: 1px;background: #f73c28;width:229px;height:55px;border: 1px solid #e8503c;}.button1.twitter,.button1:hover.twitter .slide {background: #62c6f8;width:229px;height:55px;border: 1px solid #5dade2;}.button1.rss,.button1:hover.rss .slide {background: #f18421;width:229px;height:75px;border: 1px solid #dc7633;}.button1 i {color: #FFFFFF;display: block;font-family: FontAwesome;font-size: 20px;font-style: normal;height: 40px;line-height: 40px;margin: 0 auto 2px;text-align: center;width: 45px;border: 2px solid #fff;-o-border-radius: 10%;-ms-border-radius: 10%;-moz-border-radius: 10%;-webkit-border-radius: 10%;border-radius: 10%;}.social-container {color: #FFFFFF;font-size: 15px;font-weight: 600;height: 55px;line-height: 45px;overflow: hidden;position: relative;text-align: center;width: 100%;}.slide, .button1 i {-webkit-transition: all 0.2s ease-in-out;-moz-transition: <!--this widget is originally coded and designed by Team - blogspothy.blogspot.com-->all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}.slide {height: 45px;position: absolute;top: -35px;width: 100%;}.icon-facebook:before {content:"\f09a";}.icon-twitter:before {content:"\f099";}.icon-google-plus:before {content:"\f0d5";}.icon-rss:before {content:"\f09e"; <!--this widget is originally coded and designed by Team - blogspothy.blogspot.com-->}.slide:after {border-left: 2px solid #EEEEEE;bottom: 0;content: "";display: block;height: 10px;position: absolute;width: 100%;}.button1:hover .slide {top: 0;}.facebook_c {position: relative;top: 10px;}.twitter_c {position: relative;top: 10px;}.rss .IN-widget, .button1 iframe {position: relative;top: -5px;}.google_c {position: relative;top: 5px;} <!--this widget is originally coded and designed by Team - blogspothy.blogspot.com-->.rss_c {position: relative;top: 6px;}.twitter iframe {width: 134px !important;}.google #___plusone_0 {width: 60px !important;}.button1.rss {margin-right: 0;} <!--this widget is originally coded and designed by Team - blogspothy.blogspot.com--></style><aside class='sidebar-wrapper'><div class='sidebar section' id='sidebar'><div class='widget HTML' data-version='1' id='HTML2'><div class='widget-content'>
<div id="buttons">
<div class="facebook button1">
<i class="icon-facebook"></i>
<div class="social-container fb">
<div class="slide">
<div class="facebook_c">
<iframe src="//www.facebook.com/plugins/like.php?href=https://www.facebook.com/Blogspothy-1943614969257628/&width&layout=button_count&action=like&show_faces=false&share=false&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:81px; height:21px;" allowtransparency="true"></iframe></div>
</div>
</div>
</div>
<div class="twitter button1">
<i class="icon-twitter"></i>
<div class="social-container tw">
<div class="slide">
<div class="twitter_c">
<a href="https://twitter.com/blogspothy" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false" data-via="mariuCSS"></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></div>
</div>
</div><div class="google button1"> <i class="icon-google-plus"></i> <div class="social-container tw"> <div class="slide"><div class='google_c'> <!--this widget is originally coded and designed by Team - blogspothy.blogspot.com--><!-- Place this tag in your head or just before your close body tag. --><script type="text/javascript" src="https://apis.google.com/js/platform.js"></script><!-- Place this tag where you want the widget to render. --><div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/u/0/105950387027097996025" data-rel="publisher"></div></div> </div> </div></div><div class="rss button1"> <i class="icon-rss"></i> <div class="social-container tw"> <div class="slide"> <div class="rss_c"><p><a href="http://feeds.feedburner.com/blogspothy"><img src="http://feeds.feedburner.com/~fc/blogspothy?bg=f25816&fg=FFFFFF&anim=1" height="26" width="88" style="border:0" alt="" /></a></p> </div> </div> </div></div></div></div></div></div></aside><div style="font-size: 10px; float: right; margin-top: -15px">Get this <a href="https://blogspothy.blogspot.com.ng/2017/07/stylish-social-follow-button-for-blogger.html" target="_blank">Social Follow Button</a></div>
<!-- Stylish 1-click social follow button Designed by:: http://www.blogspothy.blogspot.com Follow Count Code by:: http://bloggerwallet.com issued under GNU GPL Licence Icons:: FontAwesome --> <style type="text/css"> #buttons { overflow: hidden; } .button1 { background: none repeat scroll 0 0 #EEEEEE; -moz-box-shadow: 0 1px 0 #FDFDFD inset; -webkit-box-shadow: 0 1px 0 #FDFDFD inset; box-shadow: 0 1px 0 #FDFDFD inset; float: left; margin: 0; padding: 15px 0 0; width: 135px; } .button1.facebook,.button1:hover.facebook .slide { margin-right: 1px; background: #3873ad; width:134px; height:95px; } .button1.google,.button1:hover.google .slide { margin-right: 1px; background: #f73c28; width:134px; height:95px; } .button1.twitter,.button1:hover.twitter .slide { background: #62c6f8; width:134px; height:95px; } .button1.rss,.button1:hover.rss .slide { background: #f18421; width:134px; height:95px; } .button1 i { color: #FFFFFF; display: block; font-family: FontAwesome; font-size: 20px; font-style: normal; height: 40px; line-height: 40px; margin: 0 auto 2px; text-align: center; width: 40px; border: 2px solid #fff; -o-border-radius: 10%; <!--this widget is originally coded and designed by Team - blogspothy.blogspot.com-->-ms-border-radius: 10%; -moz-border-radius: 10%; -webkit-border-radius: 10%; border-radius: 10%; } .social-container { color: #FFFFFF; font-size: 15px; font-weight: 600; height: 55px; line-height: 45px; overflow: hidden; position: relative; text-align: center; width: 100%; } .slide, .button1 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; <!--this widget is originally coded and designed by Team - blogspothy.blogspot.com-->-o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .slide { height: 45px; position: absolute; top: -35px; width: 100%; } .icon-facebook:before { content:"\f09a"; } .icon-twitter:before { content:"\f099"; } .icon-google-plus:before { content:"\f0d5"; } .icon-rss:before { content:"\f09e"; } .slide:after { border-left: 2px solid #EEEEEE; bottom: 0; content: ""; display: block; height: 10px; position: absolute; width: 100%; } .button1:hover .slide { top: 0; } <!--this widget is originally coded and designed by Team - blogspothy.blogspot.com-->.facebook_c { position: relative; top: 10px; } .twitter_c { position: relative; top: 10px; } .rss .IN-widget, .button1 iframe { position: relative; top: -5px; } .google_c { position: relative; top: 5px; } .rss_c { position: relative; top: 6px; } .twitter iframe { width: 134px !important; } .google #___plusone_0 { width: 60px !important; } .button1.rss { margin-right: 0; } </style> <aside class='sidebar-wrapper'> <div class='sidebar section' id='sidebar'><div class='widget HTML' data-version='1' id='HTML2'> <div class='widget-content'><div id="buttons">
<div class="facebook button1">
<i class="icon-facebook"></i>
<div class="social-container fb">
<div class="slide">
<div class="facebook_c">
<iframe src="//www.facebook.com/plugins/like.php?href=https://www.facebook.com/Blogspothy-1943614969257628/&width&layout=button_count&action=like&show_faces=false&share=false&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:81px; height:21px;" allowtransparency="true"></iframe></div>
</div>
</div>
</div>
<div class="twitter button1">
<i class="icon-twitter"></i>
<div class="social-container tw">
<div class="slide">
<div class="twitter_c">
<a href="https://twitter.com/blogspothy" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false" data-via="mariuCSS"></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></div>
</div>
</div> <div class="google button1"> <i class="icon-google-plus"></i> <div class="social-container tw"> <div class="slide"> <div class='google_c'> <!-- Place this tag in your head or just before your close body tag. --> <script type="text/javascript" src="https://apis.google.com/js/platform.js"></script> <!-- Place this tag where you want the widget to render. --> <div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/u/0/105950387027097996025" data-rel="publisher"></div></div> </div> Google+ </div> </div> <div class="rss button1"> <i class="icon-rss"></i> <div class="social-container tw"> <div class="slide"> <div class="rss_c"><p><a href="http://feeds.feedburner.com/blogspothy"><img src="http://feeds.feedburner.com/~fc/blogspothy?bg=f25816&fg=FFFFFF&anim=1" height="26" width="88" style="border:0" alt="" /></a></p> </div> </div> </div> </div> </div> </div>Rss</div></div></aside> <div style="font-size: 10px; float: right; margin-top: -15px">Get this <a href="https://blogspothy.blogspot.com.ng/2017/07/stylish-social-follow-button-for-blogger.html">Social Follow Widget</a></div>
<!-- Stylish 1-click social follow button Designed by:: http://www.blogspothy.blogspot.comFollow Count Code by:: http://bloggerwallet.comissued under GNU GPL LicenceIcons:: FontAwesome --><style type="text/css">#buttons {overflow: hidden;margin-left:40px;}.button1 {background: none repeat scroll 0 0 #EEEEEE;-moz-box-shadow: 0 1px 0 #FDFDFD inset;-webkit-box-shadow: 0 1px 0 #FDFDFD inset;box-shadow: 0 1px 0 #FDFDFD inset;float: center;border-radius:7px;padding: 15px 0 0;width: 135px; }.button1.facebook,.button1:hover.facebook .slide {margin-right: 1px;background: #3873ad;width:229px;height:55px;border: 1px solid #2471a3;}.button1.google,.button1:hover.google .slide {margin-right: 1px;background: #f73c28;width:229px;height:55px;border: 1px solid #e8503c;}.button1.twitter,.button1:hover.twitter .slide {background: #62c6f8;width:229px;height:55px;border: 1px solid #5dade2;}.button1.rss,.button1:hover.rss .slide {background: #f18421;width:229px;height:75px;border: 1px solid #dc7633;}.button1 i {color: #FFFFFF;display: block;font-family: FontAwesome;font-size: 20px;font-style: normal;height: 40px;line-height: 40px;margin: 0 auto 2px;text-align: center;width: 45px;border: 2px solid #fff;-o-border-radius: 10%;-ms-border-radius: 10%;-moz-border-radius: 10%;-webkit-border-radius: 10%;border-radius: 10%;}.social-container {color: #FFFFFF;font-size: 15px;font-weight: 600;height: 55px;line-height: 45px;overflow: hidden;position: relative;text-align: center;width: 100%;}.slide, .button1 i {-webkit-transition: all 0.2s ease-in-out;-moz-transition: <!--this widget is originally coded and designed by Team - blogspothy.blogspot.com-->all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}.slide {height: 45px;position: absolute;top: -35px;width: 100%;}.icon-facebook:before {content:"\f09a";}.icon-twitter:before {content:"\f099";}.icon-google-plus:before {content:"\f0d5";}.icon-rss:before {content:"\f09e"; <!--this widget is originally coded and designed by Team - blogspothy.blogspot.com-->}.slide:after {border-left: 2px solid #EEEEEE;bottom: 0;content: "";display: block;height: 10px;position: absolute;width: 100%;}.button1:hover .slide {top: 0;}.facebook_c {position: relative;top: 10px;}.twitter_c {position: relative;top: 10px;}.rss .IN-widget, .button1 iframe {position: relative;top: -5px;}.google_c {position: relative;top: 5px;} <!--this widget is originally coded and designed by Team - blogspothy.blogspot.com-->.rss_c {position: relative;top: 6px;}.twitter iframe {width: 134px !important;}.google #___plusone_0 {width: 60px !important;}.button1.rss {margin-right: 0;} <!--this widget is originally coded and designed by Team - blogspothy.blogspot.com--></style><aside class='sidebar-wrapper'><div class='sidebar section' id='sidebar'><div class='widget HTML' data-version='1' id='HTML2'><div class='widget-content'><div id="buttons">
<div class="facebook button1">
<i class="icon-facebook"></i>
<div class="social-container fb">
<div class="slide">
<div class="facebook_c">
<iframe src="//www.facebook.com/plugins/like.php?href=https://www.facebook.com/Blogspothy-1943614969257628/&width&layout=button_count&action=like&show_faces=false&share=false&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:81px; height:21px;" allowtransparency="true"></iframe></div>
</div>
</div>
</div>
<div class="twitter button1">
<i class="icon-twitter"></i>
<div class="social-container tw">
<div class="slide">
<div class="twitter_c">
<a href="https://twitter.com/blogspothy" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false" data-via="mariuCSS"></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></div>
</div>
</div><div class="google button1"> <i class="icon-google-plus"></i> <div class="social-container tw"> <div class="slide"><div class='google_c'> <!--this widget is originally coded and designed by Team - blogspothy.blogspot.com--><!-- Place this tag in your head or just before your close body tag. --><script type="text/javascript" src="https://apis.google.com/js/platform.js"></script><!-- Place this tag where you want the widget to render. --><div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/u/0/105950387027097996025" data-rel="publisher"></div></div> </div> </div></div><div class="rss button1"> <i class="icon-rss"></i> <div class="social-container tw"> <div class="slide"> <div class="rss_c"><p><a href="http://feeds.feedburner.com/blogspothy"><img src="http://feeds.feedburner.com/~fc/blogspothy?bg=f25816&fg=FFFFFF&anim=1" height="26" width="88" style="border:0" alt="" /></a></p> </div> </div> </div></div></div></div></div></div></aside><div style="font-size: 10px; float: right; margin-top: -15px">Get this <a href="https://blogspothy.blogspot.com.ng/2017/07/stylish-social-follow-button-for-blogger.html" target="_blank">Social Follow Button</a></div>
<!-- Stylish 1-click social follow button Designed by:: http://www.blogspothy.blogspot.comFollow Count Code by:: http://bloggerwallet.comissued under GNU GPL LicenceIcons:: FontAwesome --><style type="text/css">#buttons {overflow: hidden;}.button1 {background: none repeat scroll 0 0 #EEEEEE;-moz-box-shadow: 0 1px 0 #FDFDFD inset;-webkit-box-shadow: 0 1px 0 #FDFDFD inset;box-shadow: 0 1px 0 #FDFDFD inset;float: left;border-radius:7px;padding: 15px 0 0;width: 135px;margin:1px;}.button1.facebook,.button1:hover.facebook .slide {margin-right: 1px;background: #3873ad;width:86px;height:74px;border: 1px solid #2471a3;}.button1.google,.button1:hover.google .slide {margin-right: 1px;background: #f73c28;width:86px;height:74px;border: 1px solid #e8503c;}.button1.twitter,.button1:hover.twitter .slide {background: #62c6f8;width:86px;height:74px;border: 1px solid #5dade2;}.button1 i {color: #FFFFFF;display: block;font-family: FontAwesome;font-size: 20px;font-style: normal;height: 40px;line-height: 40px;margin: 0 auto 2px;text-align: center;width: 45px;border: 2px solid #fff;-o-border-radius: 10%;-ms-border-radius: 10%;-moz-border-radius: 10%; <!--this widget is originally coded and designed by Team - blogspothy.blogspot.com-->-webkit-border-radius: 10%;border-radius: 10%;}.social-container {color: #FFFFFF;font-size: 15px;font-weight: 600;height: 55px;line-height: 45px;overflow: hidden;position: relative;text-align: center;width: 100%;}.slide, .button1 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;transition: all 0.2s ease-in-out;}.slide {height: 45px;position: absolute;top: -35px;width: 100%;}.icon-facebook:before {content:"\f09a";}.icon-twitter:before {content:"\f099";}.icon-google-plus:before {content:"\f0d5";} <!--this widget is originally coded and designed by Team - blogspothy.blogspot.com-->.slide:after {border-left: 2px solid #EEEEEE;bottom: 0;content: "";display: block;height: 10px;position: absolute;width: 100%;}.button1:hover .slide {top: 0;}.facebook_c {position: relative;top: 10px;}.twitter_c {position: relative;top: 10px;}.rss .IN-widget, .button1 iframe {position: relative;top: -5px;}.google_c {position: relative;top: 5px;}.twitter iframe {width: 134px !important;}.google #___plusone_0 {width: 60px !important;}</style><aside class='sidebar-wrapper'><div class='sidebar section' id='sidebar'><div class='widget HTML' data-version='1' id='HTML2'><div class='widget-content'>
<div id="buttons">
<div class="facebook button1">
<i class="icon-facebook"></i>
<div class="social-container fb">
<div class="slide">
<div class="facebook_c">
<iframe src="//www.facebook.com/plugins/like.php?href=https://www.facebook.com/Blogspothy-1943614969257628/&width&layout=button_count&action=like&show_faces=false&share=false&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:81px; height:21px;" allowtransparency="true"></iframe></div>
</div>
</div>
</div>
<div class="twitter button1">
<i class="icon-twitter"></i>
<div class="social-container tw">
<div class="slide">
<div class="twitter_c">
<a href="https://twitter.com/blogspothy" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false" data-via="mariuCSS"></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></div>
</div>
</div><div class="google button1"> <i class="icon-google-plus"></i> <div class="social-container tw"> <div class="slide"><div class='google_c'><!-- Place this tag in your head or just before your close body tag. --><script type="text/javascript" src="https://apis.google.com/js/platform.js"></script><!-- Place this tag where you want the widget to render. --><div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/u/0/105950387027097996025" data-rel="publisher"></div></div></div>---</div></div></div></div></div></div></aside><div style="font-size: 10px; float: right; margin-top: -15px">Get this <a href="https://blogspothy.blogspot.com.ng/2017/07/stylish-social-follow-button-for-blogger.html"target="_blank">Social Follow Widget</a></div>
No comments:
There is no false that we love to hear your feedback on a particular post, nonetheless, we urge you to leave loyal and sincere comment for the betterment of both you and us (blogspothy) Please Note: Any comment detected as a spam would never be published on this blog.