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

Preview 

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 a.social{background:url(“http://4.bp.blogspot.com/-kiwGN-a19cA/VIB5ZhTSxcI/AAAAAAAADkw/nj7l3_bnokc/s1600/soc.png”) 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 a.youtube{background-position: -42px -37px;width:32px;height:32px;margin:0 0 0 10px}#nbl-social-profiles a.youtube:hover{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 input.email{}#optin-sidebar input[type=”submit”]{background:url(“http://3.bp.blogspot.com/-5wcFZIZJkN0/VIB5Zjgby-I/AAAAAAAADko/3FYE_NnvoPQ/s1600/Red.png”) 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 input.email{background:#FFF}#optin-single input[type=”submit”]{background:url(“http://2.bp.blogspot.com/-OB93q7XRC90/VIB5ZFWhkvI/AAAAAAAADkk/sboB95B9BfI/s1600/NBL.png”) 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=”https://www.facebook.com/Ipeeworld” title=”Facebook FanPage” target=”_blank” rel=”nofollow”>           Facebook         </a>       </li>       <li>         <a class=”social twitter” href=”https://twitter.com/ipeeworld” title=”Twitter Profile” target=”_blank” rel=”nofollow”>           Twitter         </a>       </li>       <li>         <a class=”social googleplus” href=”https://plus.google.com/105182949497600212973” title=”GooglePlus” target=”_blank” rel=”nofollow”>           GooglePlus         </a>       </li>       <li>         <a class=”social rss” href=”http://feeds.feedburner.com/IpeeWorld-TechnologicalArt” title=”RSS” target=”_blank” rel=”nofollow”>           Rss         </a>       </li>       <li>         <a class=”social youtube” href=”https://www.youtube.com/channel/UCBcRkJe1ICM7_6BuUuoP3bA” 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=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=IpeeWorld-TechnologicalArt‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true” target=”popupwindow” method=”post” action=”http://feedburner.google.com/fb/a/mailverify”>             <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 Blogger.com 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

About Astro Joseph

Hi, I'm Astro Joseph the founder and CEO of IPEE World and IPEE Network.I started this blog for a passion and it is now empowering millions of readers around the globe.Read more about me at About and Contact page.

Leave a Reply

Your email address will not be published. Required fields are marked *