Stylish Newsletter Widget With Social Icons For Blogger/Blogspot Blogs

Increasing your e mail subscribers is one of the best way to grab more visitors to your blog.Getting more e mail subscribers is not a though or hill climbing challenge. If you are visitors want to get placed in your email subscription we should want to make a gateway for that and that Gateway is through such Newsletter box which will allow users to get listed in your subscription.

Here in this article i'm going to share you the best and one of the eye catching Newsletter widget for your blogger/blogspot blogs. This Widget comes under a small piece of HTML tags which you want to implement on your Blog.

Adding Newlsetter widget, Facebook Like Box, Facebook Pop up like box, Twitter feed box all are another way of getting more social followers

Features of this Newsletter Widget

  • White colored box without border
  • Social profile icons which you can link your Facebook, Twitter, etc.,
  • Rollover image effects on mouse over on social profile icons
  • Lat subscribe button


Let's Start

HTML tag :

<style> #nbl-social{float:left; background:#fff;margin:0 0 25px 0}#nbl-social-profiles{float:left;margin:8px 0 0 0; padding-left: 20px;}#nbl-social-profiles ul{list-style:none;float:left;margin:0 7px}#nbl-social-profiles ul li{list-style-type: none;border:0 none;float:left;margin:0;padding:0}#nbl-social-profiles ul li a{display:block;float:left;height:32px;margin:0 10px 0;text-indent: -999em;width:32px}#nbl-social-profiles{background:url("") no-repeat scroll 0 0 transparent}#nbl-social-profiles a.facebook{background-position: -79px -0px;width:32px;height:32px;margin:0 10px 0 0}#nbl-social-profiles a.facebook:hover{background-position: -79px -74px;width:32px;height:32px}#nbl-social-profiles a.twitter{background-position: -5px -111px;width:32px;height:32px}#nbl-social-profiles a.twitter:hover{background-position: -42px -0px;width:32px;height:32px}#nbl-social-profiles{background-position: -42px -37px;width:32px;height:32px;margin:0 0 0 10px}#nbl-social-profiles{background-position: -5px -37px;width:32px;height:32px}#nbl-social-profiles a.rss{background-position: -42px -74px;width:32px;height:32px}#nbl-social-profiles a.rss:hover{background-position: -79px -37px;width:32px;height:32px}#nbl-social-profiles a.googleplus{background-position: -5px -0px;width:32px;height:32px}#nbl-social-profiles a.googleplus:hover{background-position: -5px -74px;width:32px;height:32px}.optin-text{margin-left: 15px; color: #000;float:left;font-size:13px;line-height:22px;margin:10px 0;margin-top: 10px;padding:0 8px}#optin-sidebar{background:#fff;padding:0 0 10px 0;text-align:center}#optin-sidebar h4{font-weight:bold;margin:10px 0 20px}#optin-sidebar input[type="text"]{background:#fff;border:1px solid #AAA;font-size:13px;margin:0 0 10px 0;height: 25px;padding:5px;width:85%;color:#555}#optin-sidebar input{box-shadow:0 2px 2px #AAA;-moz-box-shadow:0 2px 2px #AAA;-webkit-box-shadow:0 2px 2px #AAA}#optin-sidebar{}#optin-sidebar input[type="submit"]{background:url("") repeat scroll 0 0 transparent;color:#FFF;cursor:pointer;font-family:arial;font-size:16px;font-weight:bold;height:40px;margin-top:5px;padding:8px 0;text-transform:capitalize;width:88%;border:0}#optin-sidebar input[type="submit"]:hover{background:none repeat scroll 0 0 #333} #optin-single{background:none repeat scroll 0 0 #F7F7F7;border-bottom: 1px solid #DDD;float:left;padding:15px 0;margin:15px 0;text-align:center;width:100%}#optin-single p{float:left;margin:0 10px 0 18px;padding:5px 0 0}#optin-single input[type="text"]{background:#fff;border:1px solid #AAA;font-size:13px;margin:0;padding:2px;width:30%;color:#555;float:left}#optin-single input{box-shadow:0 2px 2px #AAA;-moz-box-shadow:0 2px 2px #AAA;-webkit-box-shadow:0 2px 2px #AAA}#optin-single{background:#FFF}#optin-single input[type="submit"]{background:url("") repeat scroll 0 0 transparent;color:#FFF;cursor:pointer;font-family:arial;font-size:16px;font-weight:bold;height:37px;padding:5px;text-transform:capitalize;border:0;float:left;margin-left:10px}#optin-single input[type="submit"]:hover{background:none repeat scroll 0 0 #333}</style> <div id="nbl-social">   <div id="nbl-social-profiles">     <ul>       <li>         <a class="social facebook" href="" title="Facebook FanPage" target="_blank" rel="nofollow">           Facebook         </a>       </li>       <li>         <a class="social twitter" href="" title="Twitter Profile" target="_blank" rel="nofollow">           Twitter         </a>       </li>       <li>         <a class="social googleplus" href="" title="GooglePlus" target="_blank" rel="nofollow">           GooglePlus         </a>       </li>       <li>         <a class="social rss" href="" title="RSS" target="_blank" rel="nofollow">           Rss         </a>       </li>       <li>         <a class="social youtube" href="" title="YouTube Channel" target="_blank" rel="nofollow">           Youtube         </a>       </li>     </ul>   </div></div> <div class="optin-text"><strong>    Get Latest Updates In your Inbox</strong>   </div>   <div id="optin-sidebar">     <form onsubmit="'', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="">             <input name="uri" value="IpeeWorld-TechnologicalArt" type="hidden" />       <input value="en_US" name="loc" type="hidden" />             <input id="email" class="email" name="email" onfocus="this.value=&#39;&#39;" value="Your Email Address" placeholder="Your Email Address" type="text" />             <input value="Get Started Here!" id="submit" name="submit" type="submit" />     </form>   </div>

Changes To Make :

RED Color

Replace all red colored text with your particular social profile ID

BLUE Color

Blue colored text is for the newsletter subscription Replace blue colored texts with your feed burner ID

PINK Color

This pink colored text are for the caption in the newsletter, Try to make it more attractive using less words

Add To Your Blog

First go to ans sign in

Then Dashboard > Layout > Add A Gadget 

From the gadget selection option choose "HTML/Javascript"

In the space provided, Paste your HTML tag which is provided above and finally click save 

Now that's all your classy Newsletter Subscription widget will start come online

Hi Guys, I'm Astro Joseph a young Blogger from Kerala,India.I Started IPEE World as passion and it is now empowering Millions of Readers around the Globe.Read more at About Page

Sharing is Caring :)

Related Articles

Previous Article
Next Article »

We’re very excited to see your comments. However, Please Keep in mind that, All Comments are strictly moderated by us before publishing.Comments with Links and other unnecessary contents will be removed and will not be published. :)

Contact Form


Email *

Message *