Saturday, August 18, 2012

Floating Social Toolbar

Have you noticed my new Social Toolbar at the bottom of my blog! I created it myself! I know there are several Toolbar widgets out there to choose from but all seemed to be lacking something I wanted. So I finally decided to try and create my own and I figured I would be nice and share it with you!

It's easy to install! If you would prefer a toolbar on the side I have a code for that as well! It will look like this:


It can easily be configured to be on the left or right side of your blog. Unfortunately, I have yet to figure out a way to make the Facebook buttons work sideways. Which is why I prefer the bottom toolbar.

Installation instructions:
First, you will need small images for each link you would like to have in your Toolbar. Also you will need the URL link to each of your profiles/sites you are going to link too. You do not have to use all the links that I did, just delete that portion of that code if you don't need it. Also if you would like to add in more or different ones here is how:

Each set of code for a linked image is set up like this:

<a href='http://URL FOR PROFILE OR PAGE.com'
style='padding: 2px;' target='_blank'
title='HOVER TEXT'><img width="30"
src='http://URL FOR IMAGE.JPG'/></a>

Just replace everything in red. The first URL is the link to your profile/page, replace the word "HOVER TEXT" with something like "follow me on Twitter" and last is the image URL.
Images can be uploaded for free at Photobucket.

1. On Blogger open up the Layout editor

2. All the way down at the bottom in the footer area Click "Add a Gadget"

3. Choose the option for "HTML/Java Script" and copy & paste one of the following codes:
All the red URL's need to be changed to your profile/page links and to your image links (as described above). Also you can change the color's #000000 to match your blog. You can find HTML color codes Here.

This is the code for the Bottom Social Toolbar:
<!-- BEGIN BOTTOM SOCIAL TOOBAR -->
<!doctype html>
<style type="text/css">

div.socialbar{
display:scroll;
position:fixed;
left: 0px;
bottom: 0px;
width: 100%;
z-index:9999;
}
div.border{
padding: 5px 4px 0px 12%;
border:1px solid #000000;
border-radius: 10px;
background-color: #ffffff;
}
</style>

<div class="socialbar">
<div class="border">

<!---------- BEGIN ICONS ---------->

<!--- TEXT --->
<span style="color: #000000; font-family: Georgia,
Times New Roman, serif; font-size:
20px;"><i>Follow</i></span>

<!--- FACEBOOK LIKE BUTTONS --->
<div class="fb-like" data-
href="http://www.facebook.com/YOUR-FACEBOOK-PAGE"
data-send="true" data-layout="button_count" data-
width="" data-show-faces="false"></div>

<!--- FACEBOOK SUBSCRIBE BUTTONS --->
<div class="fb-subscribe" data-
href="http://www.facebook.com/YOUR-FACEBOOK-PROFILE" data-
layout="button_count" data-show-faces="false"
data-width=""></div>

<!--- FACEBOOK --->
<a href='http://www.facebook.com/ YOUR-FACEBOOK-PROFILE '
style='padding: 2px;' target='_blank'
title='Facebook'><img width="30"
src='HTTP://IMAGE-URL-HERE.JPG'/></a>

<!--- TWITTER --->
<a href='https://twitter.com/TWITTER-NAME'
style='padding: 2px;' target='_blank' title='Twitter'><img width="30"
src='HTTP://IMAGE-URL-HERE.JPG'/></a>

<!--- GOOGLE PLUS --->
<a
href='https://plus.google.com/GOOGLE-PROFILE' style='padding: 2px;' target='_blank'
title='Google Plus'><img width="31"
src='HTTP://IMAGE-URL-HERE.JPG'/></a>

<!--- LINKED IN --->
<a href='http://www.linkedin.com/in/LINKED-IN-PROFILE'
style='padding: 2px;' target='_blank' title='Linked in'><img width="30"
src='HTTP://IMAGE-URL-HERE.JPG'/></a>

<!--- PINTEREST --->
<a href='http://pinterest.com/PINTEREST-USERNAME'
style='padding: 2px;' target='_blank' title='Pinterest'><img width="30"
src='HTTP://IMAGE-URL-HERE.JPG'/></a>

<!--- RSS FEED --->
<a href='http://feeds.feedburner.com/BLOG-RSS-FEED'
style='padding: 2px;' target='_blank'
title='RSS Feed'><img width="30"
src='HTTP://IMAGE-URL-HERE.JPG'/></a>

<!--- YOUTUBE --->
<a
href='http://www.youtube.com/YOUTUBE-CHANNEL'
style='padding: 2px;' target='_blank' title='YouTube'><img width="30"
src='HTTP://IMAGE-URL-HERE.JPG'/></a>

<!--- TUMBLR --->
<a href='http://TUMBLR-USERNAME.tumblr.com'
style='padding: 2px;' target='_blank'
title='Tumblr'><img width="30"
src='HTTP://IMAGE-URL-HERE.JPG'/></a>

<!--- BLOG FROG --->
<a href='http://theblogfrog.com/BLOG-FROG-PROFILE'
style='padding: 2px;' target='_blank'
title='Blog Frog'><img width="30"
src='HTTP://IMAGE-URL-HERE.JPG'/></a>

<!--- NETWORKED BLOGS --->
<a
href='http://networkedblogs.com/blog/NETWORKED-BLOGS-PROFILE' style='padding:
2px;' target='_blank' title='
Networded Blogs'><img width="30"
src='HTTP://IMAGE-URL-HERE.JPG'/></a>

<!---------- END ICONS ---------->

<a href='http://www.mrs-marine.com/2012/08/floating-social-toolbar.html'
style='padding: 2px 2px 2px 20px;'
target='_blank' title='Get this toolbar widget on
your blog'><img width="30"
src='http://i107.photobucket.com/albums/m292/Patri
ciaG79/getwidget.jpg'/></a>
</div>
</div>
</!doctype>
<!-- END BOTTOM SOCIAL TOOBAR -->


This is the code for the Side Social Toolbar:
If you would like the Toolbar to appear on the left side instead of right, simply look for the red word "right" a few lines down in the code and change it to "left".
<!-- BEGIN SIDE SOCIAL TOOLBAR -->
<!doctype html>
<style type="text/css">

div.socialbar{
display:scroll;
position:fixed;
top: 20%;
right: 1px;
height: 100%;
z-index:9999;
}
div.border{
padding: 6px 2px 2px 3px;
border:1px solid #000000;
border-radius:10px;
background-color:#ffffff;
}

</style>

<div class="socialbar">
<div class="border">

<!---------- BEGIN ICONS ---------->

<!--- TEXT --->
<span style="color: #000000; font-family: Georgia,
Times New Roman, serif; font-size:
20px;"><i>Follow</i></span>

<!--- FACEBOOK --->
<a href='http://www.facebook.com/ YOUR-FACEBOOK-PROFILE '
style='padding: 2px;' target='_blank'
title='Facebook'><img width="30"
src='HTTP://IMAGE-URL-HERE.JPG'/></a>

<!--- TWITTER --->
<a href='https://twitter.com/TWITTER-NAME'
style='padding: 2px;' target='_blank' title='Twitter'><img width="30"
src='HTTP://IMAGE-URL-HERE.JPG'/></a>

<!--- GOOGLE PLUS --->
<a
href='https://plus.google.com/GOOGLE-PROFILE' style='padding: 2px;' target='_blank'
title='Google Plus'><img width="31"
src='HTTP://IMAGE-URL-HERE.JPG'/></a>

<!--- LINKED IN --->
<a href='http://www.linkedin.com/in/LINKED-IN-PROFILE'
style='padding: 2px;' target='_blank' title='Linked in'><img width="30"
src='HTTP://IMAGE-URL-HERE.JPG'/></a>

<!--- PINTEREST --->
<a href='http://pinterest.com/PINTEREST-USERNAME'
style='padding: 2px;' target='_blank' title='Pinterest'><img width="30"
src='HTTP://IMAGE-URL-HERE.JPG'/></a>

<!--- RSS FEED --->
<a href='http://feeds.feedburner.com/BLOG-RSS-FEED'
style='padding: 2px;' target='_blank'
title='RSS Feed'><img width="30"
src='HTTP://IMAGE-URL-HERE.JPG'/></a>

<!--- YOUTUBE --->
<a
href='http://www.youtube.com/YOUTUBE-CHANNEL'
style='padding: 2px;' target='_blank' title='YouTube'><img width="30"
src='HTTP://IMAGE-URL-HERE.JPG'/></a>

<!--- TUMBLR --->
<a href='http://TUMBLR-USERNAME.tumblr.com'
style='padding: 2px;' target='_blank'
title='Tumblr'><img width="30"
src='HTTP://IMAGE-URL-HERE.JPG'/></a>

<!--- BLOG FROG --->
<a href='http://theblogfrog.com/BLOG-FROG-PROFILE'
style='padding: 2px;' target='_blank'
title='Blog Frog'><img width="30"
src='HTTP://IMAGE-URL-HERE.JPG'/></a>

<!--- NETWORKED BLOGS --->
<a
href='http://networkedblogs.com/blog/NETWORKED-BLOGS-PROFILE' style='padding:
2px;' target='_blank' title='
Networded Blogs'><img width="30"
src='HTTP://IMAGE-URL-HERE.JPG'/></a>

<!---------- END ICONS ---------->

<p><a href='http://www.mrs-marine.com/2012/08/floating-social-toolbar.html' style='padding: 2px;' target='_blank' title='Get this toolbar widget on your blog'><img width="30" src='http://i107.photobucket.com/albums/m292/PatriciaG79/getwidget.jpg'/></a></p>
</div>
</div>
</!doctype>
<!-- END SIDE SOCIAL TOOLBAR -->

Once you have changed the needed URL's, save and your done! Any questions or trouble feel free to ask.


Trisha

1 comment:

  1. good post. check out our toolbar: http://socialtoolbarpro.com

    ReplyDelete

Thank you, I appreciate your comments! Leave a link to your blog so I can visit you!