Monday, April 02, 2012

FLOATING SHARE BUTTONS Widget for Blogger

FLOATING Share Buttons Widget for Blogger is a social media set of icons that appears as a vertical sidebar widget at the left of your blog and can include Twitter Tweet, StumbleUpon, Google +1 (Plus One) and Facebook Like and Send. This Floating Share widget always remains visible along the left side of your blog as you, or your blog readers, scroll up and down your blog allowing your readers to tweet or +1, or like and send, your blog posts from any location on your blog. As you can see (to your left) I have this widget on my blog. Follow the steps below to add the same one that I have to your blog:

 How to Add a Floating Share Buttons Widget to Blogger:

*Go to Design> to open the Page Elements screen.
*Under 'Add and Arrange Page Elements' click on one of the Add A Gadget buttons.
*In the 'Add A Gadget' pop-up window>Basics, scroll down to and select HTML/Javascript by clicking on the blue + sign to the right.
*Inside the 'Configure HTML/Javascript' pop-up window copy the 'Floating Share Buttons Widget' html code below and paste it inside of this pop-up's 'Content' box. *Click on Save to save the Floating Share Buttons Widget.
*Now that you are back on the 'Add and Arrange Page Elements' screen drag the widget and reposition it over (on) top of the 'Blog Posts' gadget. (Note: You may have to scroll down the 'Add and Arrange Page Elements' page to see and get to the 'Blog Posts' gadget).
*Scroll back up and click the Save button (top right hand corner).
*Click on 'View Blog' and you will see your new 'Floating Share Buttons Widget' appearing on your blog.

Here is the 'Floating Share Buttons Widget' html code: The code begins with this line: <!-- floating share bar Start blogger4ever.com--> and ends with this line: < !-- floating share bar End -->

<!-- floating share bar Start blogger4ever.com-->
< style type="text/css"> #pageshare { float:left; margin-left:-80px; background: #fafafa; position:fixed; bottom:20%; border:1px solid #e5e5e5;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;} #pageshare:hover { background-color:#ffffff;-webkit-box-shadow:0px 2px 2px rgba(0,0,0,.1);-moz-box-shadow:0px 2px 2px rgba(0,0,0,.1);box-shadow:0px 2px 2px rgba(0,0,0,.1);} #pageshare .sbutton { float:left;clear:both;margin:5px 5px 0 5px;} < div id='pageshare' title="Get this Widget from Blogger4ever.com"> < div class='sbutton' id='tweet'> < script src="http://platform.twitter.com/widgets.js" type="text/javascript"> < a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="YOUR USERNAME">Tweet < div class='sbutton' id='su'> < script src="http://www.stumbleupon.com/hostedbadge.php?s=5"> < /div> < div class='sbutton' id='gplusone'> < script type="text/javascript" src="https://apis.google.com/js/plusone.js"> < g:plusone size="tall"> < div class='sbutton' id='fbshare'> < div id="fb-root"> < script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); < div class="fb-like" data-send="true" data-layout="box_count" data-width="50" data-show-faces="false"> < div style="clear: both;font-size: 10px;text-align:center;">Get Widget < !-- floating share bar End -->

NOTE: Within the above 'Floating Share Buttons Widget' html code you will see this in blue lettering: "YOUR USERNAME">Tweet, you must delete the: YOUR USERNAME and replace it with your Twitter username. I entered "PamelaJParr50", my Twitter username inside of the quotation marks (do not delete the quotation marks).




Your Reactions:

1 comments:

sanjay gupta said...

Intersting and beautiful blog lovely presentation thanks for sharing your views. please keep this
we24support-foursquare
we24support-jimdo
we24support-sosblog
we24support-crunchbase
we24support-tumblr