In this tutorial we bring you another wonderful Social media icons Email Subscription box with popular social network sites buttons like, Facebook, Twitter, Google Plus and RSS feed burner. When any subscriber mouse over on social media buttons hovers with colorful background.
Webmaster don’t need to work hard for adding this widget to their blog/website, we guide you step by step method to install this widget on your blog/website. Let’s begin tutorial for adding this widget for blogger.
How to Install Social media icons Email Subscription Box to blogger?
Sign into your blogger account
From Blogger Dashboard select ‘Layout’ and proceed
Click ‘Add a Gadget’ and select ‘HTML/Javascript’ link tab widget
Now copy below code and paste in it
<!-- / Social Media Stylish Email Subscription Box by: www.blogtariff.com Starts--> <b:if cond='data:blog.pageType == "item"'> <style> .BlogTariff{ margin-left:85px; width:550px; padding:5px; border:1px solid #ccc; margin-bottom:15px; margin-top:15px; background:#21bafe; color:#000; } .BlogTariff{ background:#21bafe; border:1px solid #ccc; -webkit-box-shadow:0px 0px 10px rgba(0, 0, 0, .3); -moz-box-shadow:0px 0px 10px rgba(0, 0, 0, .3); box-shadow:0px 0px 10px rgba(0, 0, 0, .3); } .BlogTariff h4{ color:#fff; margin-bottom:8px; font-size:24px; font-family:oswald; font-weight:normal; text-shadow: #000 1px 1px; text-align:center; } .BlogTariff h3{ color:#fff; margin-bottom:0px; font-size:18px; font-family:Yanone Kaffeesatz; font-weight:normal; text-shadow: #000 1px 1px; text-align:left; } .BlogTariff h3{ color:#000; margin-bottom:5px; font-size:18px; font-family:Yanone Kaffeesatz; font-weight:normal; text-shadow: #fff 1px 1px; text-align:justify; } .BTF-Email{ display:block; float:right; margin:0 0 0 10px; width:100px; height:90px; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVxoYL9LqgwTyzPfHWX3hccDncuETghzsutbBa4O7ytIYJVjJevGGEzmaWDXTKY-RIfQHfU6lBghXnvJWvb49yyDlrQzGrVROwUycIsPmehJhJQTjYNEKH_J5-TAE2VgAyZ5S53Jmy05Kj/s798/blogtariff.com%252Bmain.png") no-repeat transparent;!important; } .BTF-Email img{ border:0px solid #666; float:left; } .BTF-Email:hover{ background:#FFFFFF border : 0px solid #EEEEEE; -webkit-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -ms-transform:rotate(-1deg); -o-transform:rotate(-1deg); transform:rotate(-1deg); } ul.BTFsocial{ list-style:none; margin:10px; overflow:hidden; } .BTFsocial li{ float:left; background:none !important; padding:0px !important; margin:0 5px; margin-top:19px; } .BTFsocial li a{ display:block; width:40px; height:40px; background:url("http://3.bp.blogspot.com/-J7E_-Z4VHzk/UDReB_qc4vI/AAAAAAAAAxU/_0ItXG_97hI/s1600/Subscribe+More+Blog+Tools+Social.png") no-repeat transparent; text-indent:-99999em !important; } .BTFsocial li a:hover{ padding:0 !important; } .BTFsocial li.rssicon a{ background-position:0 0; } .BTFsocial li.twicon a{ background-position:-50px 0; } .BTFsocial li.fbicon a{ background-position:-100px 0; } .BTFsocial li.gicon a{ background-position:-150px 0; } .BTFsocial li.rssicon a:hover{ background-position:0 -50px; } .BTFsocial li.twicon a:hover{ background-position:-50px -50px; } .BTFsocial li.fbicon a:hover{ background-position:-100px -50px; } .BTFsocial li.gicon a:hover{ background-position:-150px -50px; } .BTFdiv{ height:0px; clear:both; display:block; border-top:1px solid #ccc; border-bottom:1px solid #fff; margin-bottom:5px; } .BTFemailbutton{ background:#f7f8f9; background:-webkit-gradient(linear,left top,left bottom,color-stop(#f7f8f9,0),color-stop(#e9e9e9,1)); background:-webkit-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%); background:-moz-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%); background:-o-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%); background:linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f8f9', endColorstr='#e9e9e9',GradientType=0 ) ;border:1px solid #ddd; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; padding:6px 12px; margin:0; -webkit-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4); -moz-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4); box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4); color:#222; text-shadow:0 1px 0 #fff; line-height:1.2; cursor:pointer; font-size:13px; } .BTFemailbutton:hover{ background:#f1f1f1; background:-webkit-gradient(linear,left top,left bottom,color-stop(#f1f1f1,0),color-stop(#e0e0e0,1)); background:-webkit-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%); background:-moz-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%); background:-o-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%); background:linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#e0e0e0',GradientType=0 ); text-decoration:none !important; } .BTFemail{ clear:both; width:100%; margin:10px 0; } .BTFemailform{ position:relative; width:250px; margin:0 auto; } .BTFemailinput{ width:200px; height:18px; margin:0 auto; padding:8px 40px 8px 10px; border:1px solid #ddd; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; font-family:georgia; font-style:italic; -webkit-box-shadow:1px 1px 2px #dfdfdf; -moz-box-shadow:1px 1px 2px #dfdfdf; box-shadow:1px 1px 2px #dfdfdf; font-size:14px; color:#666; } .BTFemailbutton{ -webkit-border-top-right-radius:4px; -webkit-border-bottom-right-radius:4px; -moz-border-radius-topright:4px; -moz-border-radius-bottomright:4px; border-top-right-radius:4px; border-bottom-right-radius:4px; -webkit-border-top-left-radius:0px; -webkit-border-bottom-left-radius:0px; -moz-border-radius-topleft:0px; -moz-border-radius-bottomleft:0px; border-top-left-radius:0px; border-bottom-left-radius:0px; padding:9px; position:absolute; right:-2px; top:0; display:block; line-height:16px; } .BTFemailbutton{ padding:8px !important; } .BTFemailform, .BTFemailinput{ width:98% !important; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; height:auto; } </style> <div class='BlogTariff'> <div class='BTF-Email'></div><h4>Don't Miss Another Post</h4> <h3>
Get Latest Updates directly to Your Email Inbox by our News Letter after Subscribing to Our Blog.
We never share your Email ID with anyone and will be kept asprivate.</h3> <h3>We promise you Best Tutorials you'll receive from Us. <br> You have Option to unsubscribe at any time.</h3> <div class='BTFdiv'> </div> <table width='100%'> <tr><td> <p style='text-align: center;color:#444;font-size:18px; font-family:oswald; font-weight:normal;text-shadow: #fff 1px 1px;'> <small>Get Free Email Updates to your Inbox!</small></p> <div class='BTFemail'> <form action='http://feedburner.google.com/fb/a/mailverify?uri=http://feeds.feedburner.com/blogtariff' class='BTFemailform' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=BTFLab;, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <input name='uri' type='hidden' value='http://feeds.feedburner.com/blogtariff'/> <input name='loc' type='hidden' value='en_US'/> <input class='BTFemailinput' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/><input class='BTFemailbutton' title='' type='submit' value='SignUp'/> </form></div></td> <td> <ul class='BTFsocial'> <li class='rssicon'> <a href='http://feeds.feedburner.com/blogtariff' rel='nofollow'>Rss</a></li> <li class='twicon'> <a href='https://www.twitter.com/blogtariff' rel='nofollow'>Twitter</a></li> <li class='fbicon'> <a href='https://www.facebook.com/blogtariffcom' rel='nofollow'>FaceBook</a></li> <li class='gicon'> <a href='https://plus.google.com/108581316248547169217' rel='nofollow'>Google +</a></li> </ul></td></tr> </table> <div align='right'><span style='font-style: italic; font-size: 8px; color: solid #ffffff;'><a href='http://www.blogtariff.com/' style='text-decoration: none;' target='_blank'><font color='#000' decoration='none'>[Get this widget]</font></a></span>
</div></div> </b:if> <!-- / Social Media Stylish Email Subscription Box by: www.blogtariff.com Ends-->
Code customization:
- Replace blogtariff with your Feed burner user name
- Replace blogtariff with your Twitter Username
- Replace https://www.facebook.com/blogtariffcom with your Facebook Page URL
- Replace 108581316248547169217 with your Google Plus ID or Page ID
Conclusive Words:
This Social media icons widget would double your subscribers with effective color and hover based icons. Visitor always keeps in touch with you by using email subscription box with social media icons at one stop.
Post a Comment Gmail ID Facebook
Do not Try to Add Spam Comments