Showing posts with label floating. Show all posts
Showing posts with label floating. Show all posts

Saturday, October 15, 2016

Wordpress Style Floating Social Sharing Bar Widget For Blogger

Wordpress Style Floating Social Sharing Bar Widget For Blogger


Social Sharing Bar
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 == &quot;item&quot;>
<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&amp;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

Read more »
Posted by at
Labels: , , , , , , , ,

Monday, September 26, 2016

Add Floating Spoiler Menu To Blogger

Add Floating Spoiler Menu To Blogger


Adding Floating Spoler Menu To Blogger makes The blog More Navigable and Easy.You May Have Seen Many Floating Menu for Bloggers,But This Menu is Awesome .In This Menu You Have not Have To Click The Button To Float The Menu.Whoever When Near The Mouse Cursor it Slides Very Smoothly .So This is The Great Difference B/w Other Floating Menus and This one.

...................................................................................................................................................................
 Floating Spoiler Menu Live Demo.
...................................................................................................................................................................
Live Demo
...................................................................................................................................................................
How To Add Floating Spoiler Menu To Blogger
...................................................................................................................................................................
Now How To Add Floating Spoiler Menu To Blogger.Follow The Below Simple Steps.
1) Go To Blogger.com
2) Now Blogger Dashboard.
3) Click On Layout/Design.
4) Click On Add a Widget.
5) Select HTML/JavaScript.
6) Paste The Below Script/Code into The Box.
<style text-type="CSS">#bmenu{position:fixed;right:5px;center:0px;background-color:#000;border-radius:10px;-moz-border-radius:10px;border:1px solid #FFF;width:202px;height:20px;color:#FF0606;transition:all .5s ease-in;-moz-transition:all .5s ease-in;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;z-index:3;overflow:hidden;padding:9px 15px 10px;}
#bmenu h3{margin:0;padding:0;text-align:center;cursor:pointer;}
#bmenu ul{border-radius:10px;-moz-border-radius:10px;border:2px solid #FFf;background-color:#FF0606;margin:15px 0;padding:0 15px;}
#bmenu li{list-style:none;margin:0 0 5px;padding:0;} #bmenu li a{color:#000;text-decoration:none;font-size:14px;}
#bmenu li a:hover{color:#fff;}
#bmenu:hover{z-index:5;height:175px;</style>
<div id="bmenu"><h3>TITLE</h3><ul><li><a href="#">FBT-1</a></li><li><a href="#">FBT-2</a></li><li><a href="#">FBT-3</a></li><li><a href="#">FBT-4</a></li><li><a href="#">FBT-5</a></li></ul></div>
................................................................................................................................................................. 
Customization/Changing. 
.................................................................................................................................................................
=> The Position Of Floating Spoiler Menu(means The Red Color Shows Size and Position).
=> The Title Of This menu(means The Green Color Indicates The Title Name You can Change it xD)
=> The Title and Link location ( Put Your Own Desire Links Over There).

Go to link download

Read more »
Posted by at
Labels: , , , , ,

Wednesday, August 31, 2016

How to add floating social media buttons to blogger blog

How to add floating social media buttons to blogger blog


 
Social Media Buttons gives the blog readers the option of sharing your posts directly to social networking sites. Today, the most popular social networking sites are Facebook , Twitter, Digg , Delicious , Stumbleupon , Google + etc. Sharing your posts on the social networking sites not only gives you more traffic but also creates powerful backlinks which will increase your Alexa Traffic Rank.


In this post, I will show you how to add a floating social media share buttons to your blogger blog by simply adding a HTML/Javascript code to a gadget in your left sidebar. 



<!-- floating share bar Start http://shakeelasghar.blogspot.com--><style type="text/css">#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}.fb_share_count_top {width:48px !important;}.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}</style><div id=pageshare title="Get this from BloggerSentral.com"><div class=sbutton id=fb><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php"></a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><div class=sbutton id=rt><script src="http://tweetmeme.com/i/scripts/button.js" type=text/javascript></script></div><div class=sbutton id=su><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div><div class=sbutton id=digg style=margin-left:3px;width:48px><script src=http://widgets.digg.com/buttons.js type=text/javascript></script><a class="DiggThisButton DiggMedium"></a></div><div class=sbutton id=gplusone><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div><div style="clear: both;font-size: 9px;text-align:center;">Get <a href="http://shakeelasghar.blogspot.com/2012/08/how-to-add-floating-social-media.html">this</a></div><!-- floating share bar End http://shakeelasghar.blogspot.com-->


 

  • Simply copy the above code.

  • Go to your blogger account.

  • Go to layout.

  • Add a gadget (preferably in the left sidebar for the best effects).

  • HTML/Javascript

  • Paste the copied code.

  • Save 

  • View your blog to see the effect.


Go to link download

Read more »
Posted by at
Labels: , , , , , , , ,
Subscribe to: Posts (Atom)