Till yet , we have been sharing many cool, stylish and popular widgets in blogger which are world widely used by famous bloggers and are the demands of many newbies. Today, we are going to share another awesome widget with you which is Stylish Email Subscription Box In Header With Social Icons. This is the best widget to make your visitors your loyal subscribers within no time. Its place is Header so, every visitor's eye can catch it easily and they will subscribe to your blog. You can also see the same widget on our blog in the header, so we always loyal content with you :).
What's Special In It ?
This is the stylish and clean header email subscription widget in which social buttons or icons are also available for increasing social followers. This widget is divided into two sections. Left portion of this widget is having subscription form where Name and Email field are implement along with the subscribe button. Heading and a little spam message is also available in that area. While right portion of this widget is having the social buttons which are Facebook, Twitter, Google+, Feed burner and Pinterest. This widget will surely rock because it will be located at the header area and that's the most prominent place of catching visitors attention.
- Don't Miss : Google Search Engine Optimization eBook 2013
How To Add This Widget ?
Well, I have told you some of the quality aspects of this widget now its turn to add it to your blog. Following is the method to add it
- Go to Blogger >> Layout >> Add a gadget (In the header area)
- Chose HTML/JavaScript and paste the following code in content area
<style>
#byard-topsubsbox {background:#fff; width:940px!important; height:90px!important;margin-top:20px; padding:10px;box-shadow:5px 5px 5px #ccc; border:1px solid #ddd;overflow:hidden;} #subscriptionsection {float:left;border-right: 1px solid rgb(168, 168, 168);padding-right: 56px;margin-top: -10px;padding-top:9px;} .subsbox-heading {font-size:20px; font-family:'Source Sans Pro'; text-align:center;text-shadow:1px 1px 1px #ABABAB;font-weight:bold;} .topsubsboxname {background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUMEiXnBK5Xrl1k_bcoAD2IjP_M9kgznv_aNHBuJWFUs8eMXScV9gmYvP3HRkxvUg1sPHjOKfsmdoSVOjwUK7D9GBKFO26ebagS3TAff1vJ1BbXmGLqD6TY3e81Cs4uDRqCFCViscnKZg/s320/name.png) no-repeat 7px 8px;border:1px solid #ddd; font-family:Arial,sans-serif; font-size:13px; font-weight:bold;color:hsla(0,0%,27%,0.69); width:150px; margin-top:10px; height:24px; padding:5px 15px 5px 28px; vertical-align:top; display:inline-block;margin-left:15px;} .topsubsboxemail {background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUdrKtD4_hYWYOaIdgmxWqSmKfi_P0YRcEZwHTCZ35NQsi1935Z4tNX0Owk-e6JfTAgGTDodZ_A04Xrq8jFzBjJLsmcjS8uwHjhaA6j_o8j8d7puWxNroqs2TbsCORiZBCwEJHEHVyw6E/s320/email.png) no-repeat 7px 10px; border:1px solid #ddd; font-family:Arial,sans-serif; font-size:13px; font-weight:bold; color:hsla(0,0%,27%,0.69); width:150px; height:24px; margin-left:5px; margin-top:10px; padding:5px 15px 5px 28px;vertical-align:top; display:inline-block;}.topsubsboxname:hover,.topsubsboxemail:hover {border:1px solid #bebebe; box-shadow:0.5px 1.5px 2px rgba(5,95,255,.1);}.topsubsboxbutton {-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;box-shadow:inset 0px 1px 0px 0px #bbdaf7;background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #00B3FF), color-stop(1, #349ECB) );background:-moz-linear-gradient( center top, #00B3FF 5%, #349ECB 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00B3FF', endColorstr='#349ECB');background-color:#00B3FF; margin-top:12px; margin-left:5px;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1px solid #84bbf3;display:inline-block;color:#ffffff;font-family:arial;font-size:15px;font-weight:bold;padding:6px 10px;text-decoration:none;text-shadow:1px 1px 0px #528ecc;}.topsubsboxbutton:hover {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #349ECB), color-stop(1, #00B3FF) );background:-moz-linear-gradient( center top, #349ECB 5%, #00B3FF 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#349ECB', endColorstr='#00B3FF');background-color:#349ECB;}.topsubsboxbutton:active {position:relative;top:1px;} #socialsection {float:left;margin-top:20px;} .socialheading{font-size:20px; font-family:'Source Sans Pro'; text-align:right;margin-right:20px;text-shadow:1px 1px 1px #ABABAB;font-weight:bold;} .socialicons ul {list-style:none; display:inline;float:right;margin-top:10px;margin-right:10px;}.socialicons li {opacity: 1;float:left;padding: 0px 10px 0px 0px;}.socialicons li:nth-child(6) {padding: 0;}.socialicons li a img{height:49px;width:49px}</style>
<!-- Top Subsbox By Www.ProBloggersCafe.Com Start --><div id='byard-topsubsbox'><div id='subscriptionsection'><div class='subsbox-heading'>Subscribe For Free Updates!</div> <form action='http://feedburner.google.com/fb/a/mailverify?uri=ProBloggersCafe' class='byard-subsbox-form' method='post' target='_new'> <input class='topsubsboxname' name='name' onblur='if (this.value == '') {this.value = 'Your Name';}' onfocus='if (this.value == 'Your Name') {this.value = '';}' value='Your Name'/> <input class='topsubsboxemail' name='email' onblur='if (this.value == '') {this.value = 'Your Email Address';}' onfocus='if (this.value == 'Your Email Address') {this.value = '';}' value='Your Email Address'/> <input class='topsubsboxbutton' type='submit' value='Sign Up!'/> </form> <p style='margin-top: 8px;font-size: 13px;text-align: center;font-family: Source Sans Pro;font-style: italic;font-weight: 600;'>We'll not spam mate! We promise.</p>
</div><div class='socialicons'> <div class='socialheading'>Become Our Fan on Social Sites!</div>
<ul><li><a href='https://www.facebook.com/ProBloggersCafe'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_MdGnZsFP18Fh6lcDvUcIkXuChyphenhyphenoE9vHgZyqhpNlUrsEczf5YJXdkTD9SelzOBwmul03n9bpGesVKXZlSc4D3n_DWQ3UEkReAVpuIA3fdWanFVo7_dIxOS54rGdc-7O9nXFifKC7j7k0S/s1600/facebook_64.png' title='Facebook'/></a></li><li><a href='https://twitter.com/ammarkn98'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIp5DT4aqVsnpyG-GbrF5sSCmIX_VRG3fzIGZXPBM2NHvkLBJYZKHzCYnc-l3SHWTKxzAGDDrbDBuGOLdefGTpNUq7NmOuF_dZ_OZRJAs-0MKWs1vAYFfIQEW1J66P2_H2lVGSEePSWGi1/s1600/twitter_64.png' title='Twitter'/></a></li><li><a href='https://plus.google.com/101996924620264617682/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuOmes4_PXobHaqsfwvSYTLd1SKSnRTQ5oxLe47oGm2XcJj1W9czZJl7obqLWaC8KF5MmBERWzYu1mhyphenhyphenjgQ38u6oqNocwDeX9WVHntEqLs8P8Pnb6jFNGIzUVgZKV-akwBkg012jagS-ix/s1600/google-plus_64.png' title='Google +'/></a></li><li><a href='http://feeds.feedburner.com/ProBloggerscafe'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3_YtbY4t7XkbPQmQsp6S1I4Nyj_dgPDBOvLuHB7D7JMRBpkvJtfBNgb3VQ6ozX5GFpCctudWDy2asZlkdEBMGZa30Z3I_RgctmI4hbJDLcirE84srPj3YLOgYljAefKUR6UMOXp_40-w0/s1600/rss_64.png' title='Rss'/></a></li><li><a href='http://pinterest.com/yaqoobhisbani/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlzfH0LCag80HKxHuFGOQbayJKhclVr11OPL0CIZtVXRsyUiH9SWeR9Uh-eJxosyA5i4YbSuYY7o71-lD_N52NNW3kg0owih_s71RTGt4-s6wz6odI6AEOJuwdabOnelBUyS4Lsoy_m8dE/s1600/pinterest_64.png' title='Pinterest'/></a></li></ul> </div> </div><!-- Top Subsbox By Www.ProBloggersCafe.Com End -->
- Replace the highlighted URL's with yours
- Click "Save" and you are done !
Your Turn :
Today ! we have shared a worth using widget for you. Now, its your turn share thoughts and views about this widget with us. Comment below if you have any problems or queries regarding this widget and let us know if you have some better ideas or widgets of this type. Till Then Happy Blogging ........ Roger And Out !
0 comments:
Post a Comment