Saturday, October 15, 2016
Wordpress Style Floating Social Sharing Bar Widget For Blogger
Wordpress Style Floating Social Sharing Bar Widget For Blogger
A few days ago when I browsing into the internet I found this floating shearing horizontal bar widget for blogger and now I am shearing on internet blogs and with my friends. This is one of the best floating shearing widgets to promote your article on social media like facebook, twitter, Google plus etc…..
This beautiful social media shearing widgets created by makingdifferent we gave credit for this social widgets to Nitin Maheta.
How can you add this social shearing widgets in blogger?
- Log in to your blogger account.
- Click on blog title in which you want to add This Social Sharing Bar
- Go to Template and then click on "Edit HTML" Check Expand Widget Box..
Add JQuery Plugin!
If you already have a latest JQuery plugin, then ignore this step and directly follow the second step. If not add JQueryt hen add the below code just above </head> tag.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
- Now Find <data:post.body/> (Find using ctrl + F)
- If you find <data:post.body/> more then three time so go with the second.
- Immediately below it, add the following code
<b:if cond=data:blog.pageType == "item">
<div id=md-active-share-comment-marker></div>
</b:if>
- Now find </body> (Find using ctrl + F)
- Add the below code before </body> tag.
- Click on Save
<b:if cond=data:blog.pageType == "item">
<script src=http://makingdifferent.github.com/blogger-widgets/Floating%20Social%20sharing%20Horizontal%20Bar.js type=text/javascript/>
<div id=md-share-window style=width: 100%; display: block; position: fixed; top: -450px; left: 0px; background-color: rgba(235, 88, 60, 0.8); z-index: 100; padding: 0 0 10px 0;>
<div style=width: 800px; margin: 20px auto;>
<span id=twitter style=float:left; margin: 0 5px; padding: 3px 0 0 0;>
<a class=twitter-share-button data-count=vertical href=http://twitter.com/share>Tweet</a>
<script src=http://platform.twitter.com/widgets.js type=text/javascript/></span>
<span id=md-plusone style=float:left; padding-top: 4px; margin: 0 5px;>
<script src=https://apis.google.com/js/plusone.js type=text/javascript/>
<g:plusone size=tall/></span>
<span id=md-fblike style=float: left; margin: 0 5px; padding: 4px 0 0; width: 50px; overflow: hidden;>
<div id=fb-root/>
<script src=http://connect.facebook.net/en_US/all.js#appId=155934781145405&xfbml=1/>
<fb:like font= href= layout=box_count send=false show_faces=false width=50>
</fb:like>
</span>
<div style=display:block; margin: 0 5px; padding: 5px 0px 0px; color: #FFFFFF>
Are you Awesome? Legend has it that Awesome people can and will share this post!<br/>
<span style=color: #FFFFFF; font-size: 18px;><data:blog.pageName/></span>
</div>
</div>
</div>
</b:if>
- Now save your template and you have done!!
- If you have some problem please write a comment.
Go to link download
alternative link download
