Add Subscribe Widget With Rss,Facebook,Twitter, Email Subscription To Blogger

Howdy, i got a really cool subscribe widget for you guys. You can customize your widget as you want. By default the widget would have RSS, Facebook, YouTube buttons followed by an email subscription field. Though i have posted other buttons like Twitter, Google+ too so that you may use which ever you want. I'll explain how you can use it and customize it according to your needs.

But first take a look at what we will be achieving after this post.


This is the same widget that is placed on my right sidebar. You can put any other buttons like Twitter, Google+ etc by replacing these ones. Pretty interesting haan? :)

Lets get started

Step 1:

Go to Dashboard >> Add a new Gadget >> HTML/JavaScript. For now we will be placing this widget in the sidebar but it can be easily placed any where on your blog, provided that place has the same or larger dimensions.

Now place the following code in it.

<style>

    .behbar{width: 300px; float: left;}

.behbar .count{color:#F17C18; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial;  height: 40px; line-height: 40px; vertical-align: middle; width: 310px; padding: 0 0px 0 4px; margin:0;}

    .behbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 39px; vertical-align: middle; margin:0px; padding:10px 0px 0px 0;}

    .behbar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 14px;}
    .behbar .subicons a{text-decoration: none; color:#333333;}
    .behbar .subicons a:hover{text-decoration: underline; color:#333333;}

    .behbar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(http://3.bp.blogspot.com/-MovwIye8FGM/TkEVIEyQlRI/AAAAAAAAApw/5Fl-rPvnC1g/s1600/RSS1.png) no-repeat left center; min-width: 2px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;}

    .behbar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(http://2.bp.blogspot.com/-WKCDNKvzeYw/TkEVH6LOn5I/AAAAAAAAAps/U1B6OwFcB-4/s1600/FACEBOOK1.png) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;}

    .behbar .subicons .youtubeicon{background: url(

http://1.bp.blogspot.com/-AhfUrhriLMA/Tj6-MPcy-MI/AAAAAAAAAno/F0XgmTvQQEE/s1600/youtube_small_icon.gif

) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;}

    .behbar .emailsub{border-bottom: 0px solid #e6e6e6; padding: 15px 0 0px 0; float: left; width: 100%; font-family: Helvetica, Arial;}

    .behbar .emailsub .emailicon{background: url(http://4.bp.blogspot.com/-v7R1-M8qUoU/TkEVHVTb_eI/AAAAAAAAApo/QBGgm2bbhpw/s1600/email.png) no-repeat 0 2px; float: left; padding: 0px 15px 0px 40px; margin: 0 0 0 5px; width: 300px;  line-height: 20px; vertical-align: middle; font-size: 14px; color: #333; }

    .behbar .emailsub .emailupdatesform{margin: 15px 0 5px 5px; width: 300px; float: left;}

    .behbar .emailsub .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 185px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}

    .behbar .emailsub .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: uppercase; font:bold 12px arial; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
    </style>

    <!--[if IE 7]>
    <style>
    .behbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; }

    .behbar .emailsub .emailupdatesform input.joinemailupdates{background:#0080ff; border: 1px solid #0080ff; text-transform: uppercase; color: #ffffff; font-weight:bold; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; }
    </style>
    <![endif]-->

    <div class="behbar"><div class="count"><span class="bigcount"><a href="http://feeds.feedburner.com/bloggingehow"><img
width="88" style="border:0" alt="" src="http://feeds.feedburner.com/~fc/bloggingehow?bg=FFFFFF&amp;fg=555555&amp;anim=1" height="26"/></a> </span>Get Daily Blogger Tricks</div><div class="subicons"><div class="rssicon">&#160;<a rel="nofollow" href="http://feeds.feedburner.com/bloggingehow" target="_blank">  RSS</a></div><div class="fbicon"> &#160;<a href="http://www.facebook.com/pages/BLoggingeHow/126203964129170" target="_blank" rel="nofollow">Facebook</a></div><div class="youtubeicon">&#160;<a href="http://youtube.com/user/BLoggingeHow" target="_blank" rel="nofollow">YouTube</a></div></div>

    <div class="emailsub">
    <div class="emailicon"><p style=" width:270px; color:#3A3A3A; font-size: 13px; font-weight: normal; font-family: Helvetica, Arial;  padding:0; margin:0;">Receive Quality Tutorials Straight in your Inbox by submitting your Email ID below.</p></div>
    <div class="emailupdatesform">
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=bloggingehow', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="bloggingehow" name="uri" type="hidden" /><input value="Submit" class="joinemailupdates" type="submit" /></form></div></div></div>

Step 2: Customize

Once you have added this code you need to customize it according to your need. It would be easier if you paste this code in some text editor and then change the areas that i have discussed below.

Change Feed Link:

Replace (http://feeds.feedburner.com/bloggingehow) with your own feed link.


Change Mail Link:

Replace (http://feeds.feedburner.com/~fc/bloggingehow?bg=FFFFFF&amp;fg=555555&amp;anim=1) with your Feed burner mail link.



Change Facebook Page Link:
  
Replace (http://www.facebook.com/pages/BLoggingeHow/126203964129170) with your Facebook page.


Change YouTube Channel Link:

Replace (http://youtube.com/user/BLoggingeHow) with your YouTube channel page link.


Finally replace bloggingehow with your own blog name that appeared after your Feed burner link e.g my feed burner link was (http://feeds.feedburner.com/bloggingehow) so my blog name appearing at the end is 


bloggingehow

Change the Buttons: (Optional)

As you would have noticed i highlighted some names in the upper part of the code with dark red, like (rssicon, youtubeicon, fbicon, emailicon)


Here you can change the buttons. The links appearing  next to each section refers to its own button link. For example:
.behbar .subicons .youtubeicon{background: url(

http://1.bp.blogspot.com/-AhfUrhriLMA/Tj6-MPcy-MI/AAAAAAAAAno/F0XgmTvQQEE/s1600/youtube_small_icon.gif

) no-repeat left center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;}

Now the link bolded is the link for youtube button. Got it?

So here are the buttons for Twitter, Google+ that you may apply if you want. Upload these buttons to your blog and replace the links mentioned above accordingly. But make sure if you change the button and then change its name like youtubeicon with twittericon say, so you must change that name in the lower section of the code where you provide the link to your accounts in the step above.


Hope that was easy. For any help do comment below and ill try to get back as soon as i can.
Peace :)

COMMENTS

.
Name

AdSense affiliate marketing Announcement AskHassam Blogger Blogging Tips Blogosphere News Bluehost Building Traffic BuySellAds Contest Customizations Disqus Tutorials Domain Hosting Drop Down Menus eBook Email Marketing Facebook Tutorials Feedburner Freelancing Giveaway Google Google Analytics Google Gmail Google Plus Tricks Guest Post HowTo Interview Making Money Online Monetization Motivation PayPal Pinterest Plugins review SEO Slideshare Social Media Top Lists Twitter Wordpress YouTube
false
ltr
item
BloggingeHow | Making Blogging Simpler: Add Subscribe Widget With Rss,Facebook,Twitter, Email Subscription To Blogger
Add Subscribe Widget With Rss,Facebook,Twitter, Email Subscription To Blogger
http://3.bp.blogspot.com/-D4BEoESHXYw/TkESofMv-II/AAAAAAAAApk/psx8USttu1U/s320/subscribe+widget.png
http://3.bp.blogspot.com/-D4BEoESHXYw/TkESofMv-II/AAAAAAAAApk/psx8USttu1U/s72-c/subscribe+widget.png
BloggingeHow | Making Blogging Simpler
http://www.bloggingehow.com/2011/08/add-subsribe-widget-with.html
http://www.bloggingehow.com/
http://www.bloggingehow.com/
http://www.bloggingehow.com/2011/08/add-subsribe-widget-with.html
true
5839591175544873606
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy
Resources

Tools of the Trade