bloggingehow

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....

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 :)

Buttons And Widgets 7102212777422189938

Join Over 7000 Followers!

.

Name

Email *

Message *



Biola University
Bahria Town , Islamabad Pakistan
hassam@bloggingehow.com
©2014 BloggingeHow, Inc. All Rights Reserved.
item