New Bubble RSS Feed Subcription Widget For Blogger

Link to Blogger Tips and Hacks | Best Blogger Templates | SEO Tips and Tricks

Posted: 26 Mar 2010 07:19 PM PDT

Almost every blogger is using RSS Feed Subscription widget to create a powerful way of communicate with the blog readers. This article is on blogger widget and this widget is "subscribe to our rss feed widget". This RSS widget is something special then the ordinary widgets, because it uses jQuery Popup Bubble.

With this widget you can ceate a jQuery Popup Bubble rss subscription icon which will help you to increase your blogs look and feel.

If you are eager to add this widget in your blog then you must ask a question here about how to add a cool popup bubble to an RSS feed link using jQuery to my blgo?. Answer is very simple - with little bit of JavaScript, HTML and CSS code.

See the working demo RSS Feed Subcription Widget For Blogger or Demo.
Thanks to Digital Vision Team for making this RSS Subscription widget.

Steps to add Bubble RSS Feed Subcription Widget in your Blog:

1. Add JavaScript code:

On Your Dashboard, Click on Layout (see the image below)

Now Click on HTML (see below shown picture for further assistance)

Find this code <title><data:blog.pageTitle/></title> and replace it with this code
<title><data:blog.pageTitle/></title>
<script src='http://www.ibizeye.com/demo/RSSbubble/jquery.js' type='text/javascript'/>
<script src='http://www.ibizeye.com/demo/RSSbubble/tooltip.js ' type='text/javascript'/>

2. Add CSS Code: Now find the code ]]></b:skin> and replace it with the code given below.

.rss-popup {
margin: 100px auto;
padding: 0;
width: 100px;
position: relative;
}

div.rss-popup em {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha1dPpceZb8j-qAC6xAImXLjwMJd2QdOEP-s-5kIrRYmcN4GlzJKWrWHEe6cpzO8Oq3G0nlfl5np7uGVwE-KetTXYNm47q-ACekaixsuzTD-7fKL5MT8osrJG5F5DutPlz3rjVXVCjW3k/s400/bubble.png) no-repeat;
width: 100px;
height: 49px;
position: absolute;
top: -70px;
left: -0px;
text-align: center;
text-indent: -9999px;
z-index: 2;
display: none;
}

#rss-icon {
width: 42px;
height: 42px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirva5eztvVL2-SZExvBWJO1FZHGPHyUXf6M86ith_fFfYcFkbeSgZaVX4W1jsUoxiKw1H0bJDldw_vRMSlfJcXSlf_and2M6mil6sYQ4MTLLyHetrkGBrBtiIUOb4JKTKHpa2fhPiktRM/s400/icon.png) no-repeat 0 0;
text-indent: -9999px;
margin: 0 auto;
display: block;
}
]]></b:skin>

3. Add HTML Code:

Step 1. Go to your blogger dashboard and select the blog in which you want to add drop down menu.
Step 2. Navigate to the Layout > Page Elements.

Layout Page Elements

Step 3. Now click on Add a Gadget where you want to put this RSS Subscription widget in your blog and paste the code given below (Change the feed-link with your rss feed address) and click on save button.

<div class="rss-popup">
<a href="feed-link" id="rss-icon">RSS Feed</a>
<em>Subscribe to our RSS Feed</em>
</div>

Now you can see your cool bubble RSS feed subcription widget ready for the bloggers.

Give feedback on this article and post your doubts. Happy blogging :)