Add Fixed Scroll Twitter, Rss And Facebook Icons To Your Blog

One of the things all bloggers strive to achieve is building a following.Be it getting readers to subscribe to your RSS Feed, Email Feed, Follow on Twitter or become a Facebook fan.Here on Spice Up your Blog we have published lots of posts with tips and tricks to make it as easy as possible for people to connect with your blog and get the updates.In this post i have a smart gadget that will display icons for your Rss, Email Rss Twitter and Facebook on the side of your blog.The icons have a 'Follow' message above them and are Fixed so when the visitors scroll the gadgets moves down the page also.

The icons are in a great position making it as easy as possible for readers to avail of any of the options.I have also chosen Social icons that are big enough to grab the attention of the reader yet small enough to not get in the way or block any content.So this is the perfect gadget for your blog and it's really easy to add, lets add these fixed icons to your blog.

Screenshot :



Live Demo - Fixed Social Icon Gadget.

How To Add The Fixed Icon Gadget

Step 1. In your dashboard click 'Design' > 'Add A Gadget'



Step 2. Choose A Html/Javascript Gadget



Step 3. Copy the code below and paste it into the Html/Javascript gadget :

<div style='position: fixed; bottom: 30%; right: 1%;'/><a href="http://www.spiceupyourblog.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm1BR8BjKd67m6NoQ9-u3itJ27H-6FDn9imaOzycMn1XgMQkRUe3HAet73RXsuajiwdztaKInPG7_hU7Nio0bapdQiFtt4vYvucpt4qLf_Uqk8ssawMafR5mq4h39NmGQbYCMFNMyOsJdm/s1600/follow-word-f00-right.png" /></a><br /><a href="http://www.twitter.com/TWITER USERNAME/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNw7YgqgP_IvLNSwsFuC2I2fXfNi0uEoJO36Ws2wyTAT0Dz-6YF7z08dY2ngk10vm8tCEBgPPmTk6snuIFTG6JRLBRjjv929QqxAFZF11uv45-ak2BBq4e4jT0HksToj4F7xyyIpIIy18Y/s1600/icon20x20_twitter-blue.png" /></a><br /><a href="http://www.facebook.com/FACEBOOK USERNAME/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0kqjVwipXndY_SY56e74ab0JO1U83oew4GBSgDMJ0U4tnam-y-6LjzTdmMvgsOj0ychgMt_TozdPQvuDRDITs_DiD9SszmmA2lxtOi3TvzmBXhXXUJ-uYb4ceHUL11HUFMrctmDnMe73z/s1600/icon-facebook.gif" /></a><br /><a href="http://feeds.feedburner.com/FEEDBURNER ID" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6_5kBPaRv2LqWBpK7zr3nK6z9C1dz5EuiZt5_4y4VFy2LN4XYuo3_DoqD6DcACAPQ-KemT0ZDZYXOOBvBcArFrKJnCsGIcv7V2ZPbO3_IYICn9YyGglDzxgUwEO3-nYIs0GkIP5pCtFrk/s1600/icon_rss_small_pc.png" /></a><br /><a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER ID&amp;loc=en_US" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIQa1TBLtrKK3TfIscby0z0VlreWyaIQyUHyODft6r0zelBpO_E_tMyal-cW4g5abATrJ4VziEJcRz7Dn5ogak3TThFP72Au4TMY3MNCc7REr2x9zfbs40Wc5ToEDQ1MtKfMqyIbLuoK7w/s1600/rss-email.gif" /></a></div><a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaYqm6xBxp5E1rd4O1aT12fj-dLN-q80OAJ6XqEuhA3xy8Z9sq5bB5SLPNsaP6BSHYZWCHG3fizpfJbCqFftz-1evmQcUCbupu_I-TekVKuOM7HEggqFjkT97zU6gkD78Cm0OcDAJuLX6K/s1600/best+blogger+tips.png'/></a>

You now need to add your Twitter and Facebook Usernames and you feedburner ID were shown in red.Once you have made the necessary changes to the code you can save the gadget.

Drop Your Comments, Views And Questions Below.

Tool Tip Information Bubbles For Text And Image Links

In this post we will see how to add a great looking message bubble to your links.The message bubble will contain any message you choose and can be added to both text links and image links.In a post published last March i showed you how to use the title tag to give information about links to readers but the tool tip goes much further.

Preview And Demo

Below you can see a screenshot of a link with the tool tip message



To see the live working example of the text and image links follow this link - Demo of tool tip

How To Add Tool Tip Bubbles To Your Links

Step 1. In your dashboard click 'Layout' > 'Edit Html'

Step 2. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code - More Info)

</head>

Step 3. Paste the following code Directly Above / Before </head>

<style type='text/css'>
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheiaCW-r5eM6owysy0jU2R8S2IFfuvs2dRdGrAjMUh6naeqlirBVJU9MzjdBD85-ipTnp0F5MWlAj1jSGIyIh__AYDvmBV3xkOzdPPg0KtqNmIiZkDJxh5kO_JHj2WM2sezcGsMpl_eB25/) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8HlW6qo7QdkI4nIbDlTRDppC8N-51f7-JeE5DEd-2ZfRhsb1VdzuoJzfltIgZ6AYNVp72_maoRlfMF18OiFzxs-6D4Jui11a_yu1YcE9_onb3oKuz9owebj18Radw1ciLvRLYURgGjxj7/) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheiaCW-r5eM6owysy0jU2R8S2IFfuvs2dRdGrAjMUh6naeqlirBVJU9MzjdBD85-ipTnp0F5MWlAj1jSGIyIh__AYDvmBV3xkOzdPPg0KtqNmIiZkDJxh5kO_JHj2WM2sezcGsMpl_eB25/) no-repeat bottom;
}
</style><a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaYqm6xBxp5E1rd4O1aT12fj-dLN-q80OAJ6XqEuhA3xy8Z9sq5bB5SLPNsaP6BSHYZWCHG3fizpfJbCqFftz-1evmQcUCbupu_I-TekVKuOM7HEggqFjkT97zU6gkD78Cm0OcDAJuLX6K/s1600/best+blogger+tips.png'/></a>

Step 4. You now have the code added to your template to display the tool tips the next step is to add code to your links.

When you create a text link use this code :

<a href="URL HERE" class="tt">TITLE OF LINK HERE<span class="tooltip"><span class="top"></span><span class="middle">TOOL TIP MESSAGE HERE</span><span class="bottom"></span></span></a>

Example :

<a href="http://www.spiceupyourblog.com" class="tt">Spice Up Your Blog<span class="tooltip"><span class="top"></span><span class="middle">Go To Spice Up Your Blog</span><span class="bottom"></span></span></a>

When You Create An Image Link Use This Code :

<a href="URL HERE" target="_blank" class="tt"><img src="IMAGE URL HERE" /><span class="tooltip"><span class="top"></span><span class="middle">TOOL TIP MESSAGE HERE</span><span class="bottom"></span></span></a>

Example :

<a href="http://www.spiceupyourblog.com/" target="_blank" class="tt"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih7RmaA_5odBLTwbAaHehSzWdU9hzILwZyImvLj1tTKHkz15-AmcuxcvhqhjzgXzny-ZAXlsVgw_Baqsw6KJ-4OphSmzk4PM-Xvgv9N29NbxX1BtBRqebL1eu6fiMdWt7oJ6IRzfexhDhU/s320/blogger+black.png" /><span class="tooltip"><span class="top"></span><span class="middle">Go To Spice Up Your Blog</span><span class="bottom"></span></span></a>

Note - The code for the links is a little harder to use than regular hyperlinks so take you time and im sure you will get the hang of it !

Remember you can use the tool tip for any images on your blog not just in the posts, for example in the sidebars and footer.

Feedback

Will you use tool tip bubbles on your blog ?