Add Simple , Stylish and Responsive Social Bookmarking widget for Blogger & Wordpress Blog based Website.
 |
| Social Bookmarking Widget |
You can just follow and like my Official Profile and Website Fan Pages on there different Social Media. Go to Follow Us Page and catch me on social media.
Image Preview
Features of Widget :
- Based on Pure CSS Style Widget
- Circled Social Media Icons (facebook , google+ , linkedin , twitter)
- Looks Attractive and Stylish
- Responsive Effects
- Use Official Plugins
- Easy to Installation on Blogger/Wordpress
How to add Social Sharing Widget For Blogger :
- Login to New Blogger Dashboard > Choose your Blog and Click the More Options Dropdown
- Select the Template > Click on Edit HTML > Proceed
- Press CTRL + F and find the code <data:post.body/>
- 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%3A%2F%2Fwww.facebook.com%2Fdigitalhubinc&like&send=false&layout=button_count&width=80&show_faces=false&font&colorscheme=light&action=like&height=20&appId=408184442589211" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:20px;" 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"> <!-- Place this tag where you want the +1 button to render. --> <div class="g-plusone" data-size="medium"> </div> <!-- Place this tag after the last +1 button tag. --> <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><div style="text-align: right;"></div></b:if>
Save the template and check your blog post pages, a working and awesome jQuery based New Slide-in and Slide-out social horizontal bar on your blog.
Solve Problem and Edit Codes :
1. I FOUND THE TAG THREE TIMES?
If you found the <data:post.body/> three times, then you might using the Auto readmore hack,
Solution:
Search for below two lines
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
Place the Widget code in between the two tags.
2. CHANGE FACEBOOK USERNAME AND ID
Now change the facebook fan page name : digitalhubinc and also change appId = 408184442589211
[Go to developer.facebook.com and plugin option.]
