Contact Us:

If You Have Any Problem, Wanna Help, Wanna Write Guest Post, Find Any Error Or Want To Give Us Feedback, Just Feel Free To Contact Us. We Will Reply You Soon.

Name: *


Email: *

Message: *


Skillblogger

Download our app on Google Play Store

Saturday, April 6, 2013

Add Elegant and Stylish Social Subscribe Box for Blogger

Add Elegant and Stylish Social Subscribe Box for Blogger
Good morning everybody, today I would present you the subscribe box for BlogSpot, as you know the importance of this addition in bringing visitors and make them stay connecting with your blog all the time via mails, the work of this service it dwell on sending automatically mails in every article or entry that you published it on your blog. This mails contains the same info on your entry and when someone opens the mail and by clicking on the link on it, he will turned spontaneity to your blog. I advert that the Feed burner website which Google own it, is the source of this service, whish on it you have to activate the service by adding your blog link and you’ll get the RSS FEED link. 
Firstly you’ve to add your blog to Feed burner to get your link by clicking here
After you add your blog, move now to add the widget to Blogger.
You can add a sample subscription box, go to your dashboard --> add widget --> select JavaScript --> copy the code below and past it on JavaScript.
Copy this code and past it on HTML/JavaScript.

<form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ProBWidgets', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="ProBWidgets" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a></p></form>

Settings:

  • Change the green id with your feedburner id
Press save and watch your template. it will be like this:

If you don’t like the previous example, here is an other one with color..
Just modify you settings below and press customize then click on add to blogger :


<link rel="stylesheet" type="text/css" href="https://latesthack.googlecode.com/svn/trunk/latesthack.css" />
<div class="latesthackbar"><h2 class='title'>Subscribe Now!</h2><div class="count"><span class="bigcount"><a rel="nofollow" href="http://feeds.feedburner.com/ProBWidgets"><img style="border:0" alt="" src="http://feeds.feedburner.com/%7Efc/ProBWidgets?bg=F2F2F2&amp;fg=666&amp;anim=1" height="26" width="88" /></a></span> Learn Free Pro Tricks daily </div><div class="subicons"><div class="rssicon">&nbsp;<a rel="nofollow" href="http://feeds.feedburner.com/ProBWidgets" target="_blank">  RSS</a></div>
<div class="googleicon">&nbsp;<a href="plus.google.com/u/0/112474019739962841696" rel="author" target="_blank"> G+</a></div>
<div class="fbicon"> &nbsp;<a href="https://www.facebook.com/Pro.Widgets" target="_blank" rel="nofollow">FB</a></div><div class="twittericon">&nbsp;<a href="https://www.twitter.com/mywaytoblogging" target="_blank" rel="nofollow">Twitter</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 Our All Updates  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=ProBWidgets', '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="ProBWidgets" name="uri" type="hidden" /><input value="Submit" class="joinemailupdates" type="submit" /></form></div></div>
</div><div align='right'><iframe frameborder="0" height="20px" scrolling="no" src="http://latesthack.googlecode.com/svn/trunk/emailsubscription.html" width="300px"></iframe></div align='right'>

Settings:

  • Chnage the green id with your feedburner id.
  • Change facebook Username with your facebook username.
  • Change Twitter Username with your Twitter Username

This is the end of our subject for now, I hope you liked it xD, if yes share it with your friends on facebook, and twitter... expect my next lesson. :D
Greetings and happy blogging
Like the Post? Share with your Friends:-

Team SB
Posted By: Team SB

0 comments :

POST A COMMENT

Download our app on Google Play Store

Contact Us

Name

Email *

Message *

 
Copyright © . Skill Blogger . All Rights Reserved.
Designed by :- Way2themes