Stay Connected Stylish Rss Feed And Social Gadget For Blogger




| 18 comments


In a previous post i published 5 Full Subscribe Sections with Email Rss Form, Social Icons and Feedburner Subscriber count.In this post i will show you a much more simple way to display the Subscription options for your blog.The gadget has Three icons for your Rss Feed, Twitter Profile and Facebook Page proceeded by a handwriting Follow message with arrow.The icons are the standard design but with a caption, so along with the follow arrow this will be an eye catching addition to your blog.

Adding the gadget is easy and i will show you how to add it to your blogs sidebar or footer.I will also show you how to add it below all your posts, when someone reaches the end of a post if they like it they will often subscribe.The icons along with thousands more can be found on Social Icon Studio.

Screenshot :



Add Stylish Subscribe Section To Your Blog



Add Gadget To Blog Sidebar Or Footer



Step 1. In your Blogger dashboard click Design > Add A Gadget > Choose Html/Javascript.








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

<table border="0"><tbody>
<tr><td><img src="http://3.bp.blogspot.com/_rKG-ziTSNUQ/TM9g9IUnPEI/AAAAAAAAB_4/vL57WmouxO8/s1600/stay+connected.png" /></td><td>
<a target="_blank" href="FEED-URL-HERE" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/_rKG-ziTSNUQ/TUioxHuEqUI/AAAAAAAACzw/sDjXq2r-LEo/s1600/connect-rss-feed.png" /></a></td><td>
<a target="_blank" href="TWITTER-URL-HERE" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/_rKG-ziTSNUQ/TUiowIW-2bI/AAAAAAAACzo/PgDZVQrh7c8/s1600/connect-twitter-follow.png" /></a></td><td>
<a target="_blank" href="FACEBOOK-URL-HERE" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/_rKG-ziTSNUQ/TUiowob8qHI/AAAAAAAACzs/Fsw_CkgSTSQ/s1600/connect-facebook-follow.png" /></a></td></tr>
</tbody></table>
<a href="http://www.spiceupyourblog.com/"><img alt="Best Blogger Tips" src="http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png" /></a>

Important - You must add your Rss, Twitter and Facebook URLs.

Replace the text in red with the relevant URL.

Optional - If you have a narrow sidebar and just want the icons without the Stay Connected message remove the code highlighted in yellow.

Step 3. Save the gadget and drag and drop into the desired position.


Add Below All Blog Posts



Step 1. In Your Blogger Dashboard Click Design > Edit Html > Tick The Expand Widget Templates Box.







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)

<data:post.body/>

Step 3. Copy and Paste the following code directly Below / Under <data:post.body/>

<table border="0"><tbody>
<tr><td><img src="http://3.bp.blogspot.com/_rKG-ziTSNUQ/TM9g9IUnPEI/AAAAAAAAB_4/vL57WmouxO8/s1600/stay+connected.png" /></td><td>
<a href="FEED-URL-HERE" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/_rKG-ziTSNUQ/TUioxHuEqUI/AAAAAAAACzw/sDjXq2r-LEo/s1600/connect-rss-feed.png" /></a></td><td>
<a href="TWITTER-URL-HERE" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/_rKG-ziTSNUQ/TUiowIW-2bI/AAAAAAAACzo/PgDZVQrh7c8/s1600/connect-twitter-follow.png" /></a></td><td>
<a href="FACEBOOK-URL-HERE" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/_rKG-ziTSNUQ/TUiowob8qHI/AAAAAAAACzs/Fsw_CkgSTSQ/s1600/connect-facebook-follow.png" /></a></td></tr>
</tbody></table>
<a href="http://www.spiceupyourblog.com/"><img alt="Best Blogger Tips" src="http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png" /></a>

Important - You must add your Rss, Twitter and Facebook URLs.

Replace the text in red with the relevant URL.

Optional - If you have a narrow sidebar and just want the icons without the Stay Connected message remove the code highlighted in yellow.

Step 4. Save your template and your new subscribe options are below all your posts.

Check out more of our Best Blog Gadgets and Best Social Media Tips.

Drop You Comments, Views And Questions Below.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

18 comments:

  1. Hi, that didn't work, all it did was add a link to your page??

    ReplyDelete
  2. @ B Blog - There seemed to be something wrong with the images.It worked when i tested it earlier for the screenshot.Anyway i uploaded the images again and changed the code which worked in a test, let me know if you have any more trouble with it.

    Paul.

    ReplyDelete
  3. I'm getting a "Not Found - error 404" error when you click on the links. I've double checked things. Any thoughts?

    ReplyDelete
  4. so i know target="_blank" will make a link open in a new tab. if i want the feeds to open in new tab, where would i place it in the html code?

    Thanks!

    ReplyDelete
  5. @ Darren - Thanks for the comment, i have changed the code and added the target to it so they will open in a new window.

    ReplyDelete
  6. Wahooo - this looks awesome. Thanks!

    ReplyDelete
  7. I'm surprised no one has pointed out that you need to get rid of the www.blogger.com sections of the following urls you need to insert with the corresponding links...

    http://www.blogger.com/FEED-URL-HERE
    http://www.blogger.com/TWITTER-URL-HERE
    http://www.blogger.com/FACEBOOK-URL-HERE

    ReplyDelete
  8. @ anonymous - I changed the design of SUYB this week so i also made some edits to previous posts.When i edited this post i created the error you mentioned ... thanks for the heads up !

    ReplyDelete
  9. I thought your site is wordpress but actually blogger. nice template you have and great tips here. I try add to my site too.

    ReplyDelete
  10. Paul - This is beautiful, thanks.

    Two things:

    How to remove the "us" from the follow us, feed us, like us? (Mine's a personal blog)
    How to add the linkedin button and the email subscription in the same box?

    Saves a lot of blog real estate. You've got a fab blog here. Love it.

    ReplyDelete
  11. Thanks so much for your easy to follow instructions and great gadgets. I have successfully added this one and a couple others to my blog!

    ReplyDelete
  12. This is exactly what I've been looking for (and could not find ANYWHERE else, so thank you for that!) but, I'd like more options than just the 3 available here and I'd like to do different buttons. Any advice? I tried doing it myself with images hosted on Flickr but it's not working :(

    Thanks! I love your site!!

    ReplyDelete
  13. Awesome. Thanks very much! Am going my blog myself, and love this clean look ... have seen it on professional looking blogs, but couldn't find the code anywhere. Appreciate it!

    ReplyDelete
  14. Thank you so much, Paul. I just have a couple problems, They're not lining up. The Feed icon is on top of the other too and the twitter link is going to my blog instead of my twitter account. Have double checked on the URL and it's correct. Any ideas?
    Loving your site, btw. Fantastic help.

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us