How To Add Stylish Social Media sharing Widget With Email Subscription Box To Your Blogger

Views:

Friends , Now i share a smart widget for you. This widget make with social sharing buttons and special email subscription box. You can add this widget simply in your blogger. It also have a mouse hover effect in outline. You can add this widget simply in your blogger. Do you want to add this widget into your blogger. Follow this post ….

Select Layout option

Click on Add a Gadget

Select HTML/JavaScript from the given list

Copy and Paste the following code in HTML/Javascript box.

<div class='widget-content'>
<style type='text/css'>
.social a{padding: 6pt 6pt 6pt 5px;font: bold 12px Calibri,Helvetica, Arial, sans-serif;text-decoration: none;position: relative;display: inline-block;text-shadow: 0 1px 0 #fff;-webkit-transition: border-color .218s;-moz-transition: border .218s;-o-transition: border-color .218s;transition: border-color .218s; background: #f3f3f3;border: solid 1px #dcdcdc;}
.social a:hover {color: #333;border-color: #999;-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);-webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);}
.social a:active{color:#000;border-color: #444;}
.sub-box{
background: #fff;
width: 270px;
padding: 2px 5px 7px 7px;
border: 2px solid #000;
border-radius: 15px;
}
.sub-box:hover{
border-style:dashed; 2px solid: #389af2;
}
.emailform{margin:30px 0 0; display:block; clear:both;}
.emailtext{margin:20px 0 0;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7kFEtAk1UZdC7PIlKUDPuUbrh2ihGVUs9w19AR13EdL-vUwKRGX_ewGFgEgVl-Z9K-tFjwIDtXkTRHOPbND2TutvufnOtGTqz-N_z4iI7aFhzo9rkLuM2GU9E3bzt5uty348gWwj6R70/s1600/email.png) no-repeat scroll 0px center;padding:5px 5px 4px 30px;color:#444;font-weight:bold; text-decoration:none;border:1px solid #ccc;width:170px;}
.emailtext:focus{outline:none;}
.sub-button{color:#eee;font-weight:bold; text-decoration:none;padding:6px 8px; border:1px solid #666;cursor:pointer;background:#ff748c}
.sub-button:hover{color:#eee;border-color: #999;background:#ffa7b6}
</style>
<div class='sub-box'>
<center><div class="social">
<table><tbody><tr><td>
<a href='YOUR-FACEBOOK-PAGE-LINK-HERE ' target='_blank'><img alt='Facebook' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6y3dPsd-3bF357mlYe8pEi3F5N7wp9wN-klvNoZvz-y6MotRjL9Wsm1mKYyxqtDuRz2M2tZXh9cjFb6KIJ8qxy6Rc1s8xZSymSzzU8sB_3_z_sIlnRC9SbNrcpA3Kd8uUjqRJ3UWdRm0/s1600/facebook.png" border="0" title='Follow Us On Facebook'/></a> </td>
<td> <a href='YOUR-TWITTER-LINK-HERE ' target='_blank'><img alt='Twitter' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkCMSNLrP-GyMmFEO3AbT8AhBamt94jAoNJzF-R_Ok2C3PMrwTB-WGjKLeb2dpnkObsby_No3vdxP621glJxKfHUqr_x226myEmbL2kJoAJnvlgI3BTDccT6I9LfnIOs9Azb0medxhQh8/s1600/twitter.png" border="0" title='Follow Us On Twitter'/></a> </td>
<td> <a href=' YOUR-GOOGLE-PLUS-LINK-HERE ' target='_blank'><img alt='Google Plus' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMxNdGlCpTBBQ3d_KgzHzee2cqNzBzYCDnrHDYWstv-9G7wTsBMXHQ0DUnJSYt1oEV4bzrNAjiJ5NjkAfPnbtwrbGiA7nyFQp7fYqdTDXB3sIl0Wr38v3KCvw8oJa2fWityjG5t9cl19I/s1600/googleplus.png" border="0" title='Follow Us On Google Plus'/></a> </td>
<td> <a href='http://www.pinterest.com/' target='_blank'><img alt='Pinterest' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMbE9YWXLpNRKNuFfSiEkNAUqUzp_ltavshYaHktVH-29oi70CZ9GoNr-uJsCzGkKvMoaxN6wLehx-v6rD_4P6Z-_ssr5o2mH0MpEifXkY3fNtC9aztD3kqdLWZKV5h8WABNL-jRg_JTE/s1600/pinterest.png" border="0" title='Follow Us On Pinterest'/></a> </td>
<td> <a href='YOUR-STUMBLE UPON-LINK-HERE ' target='_blank'><img alt='Stumble Upon' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif2XFjwILuiFyMyxoB3jI9DKNJ5oYiRe8UdyBHEDzLTCyTqIIZG8ghoeGr7QCpAKBrHDiWuF-OQCn_WgDZ8x8tjEBei_DRA8RKSnxz2hbDKdumSoP5eIBfKfD5qg_lJ1bKJf5meNhdWwE/s1600/stumbleupon.png" border="0" title='Follow Us On Stumble Upon'/></a>
</td></tr></tbody></table> </div></center>
<center>
</center>
<div style="text-align: left; display: inline-block;">
<h8 style="display:block;font-family:'calibri';font-size:17px;font-weight:bold;">Enter Your Email Below And Subscribe To Our Daily Newsletter !!</h8>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR-RSS-LINK-NAME-HERE ', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="hidden" value="YOUR-RSS-NAME-HERE " name="uri"/>
<input type="hidden" name="loc" value="en_EN" />
<input type="text" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" value="Enter your email..." name="email" class="emailtext" />
<input type="submit" class="sub-button" value="Enter" title='' alt='' />
</form></div><small> PS : We Hate Spamming Too ! You Are Safe With Us.</small></div></div>