Today i came with a elegant style subscription box widget for you guys, this widget is very beautiful and very rich with feautes. I hope you all will love it. So lets how to add this widget to your blog.
How to add this widget to your blog. Just follow this simple steps
>>Open Your Blogger Dashboard
>> Then Layout
>>Then Click on the Add a Gadget Button
>>Then Open HTML/JavaScript box
>>Now Paste the below code in the box of gadget.
CSS part
Make sure to add this below code to above ]]></b:skin> tag and save it.
/* Social &Newsletter Widget *//* Social */.social {
background:#fcfcfc;
height:80px;
padding:0 15px;
border-bottom:1px solid #f0f0f0;
}
.social li {
float:left;
width:52px;
margin-right:15px;
text-align:center;
}
.social li.last {
margin-right:0;
}
.social li a {
opacity:0.6;
filter:alpha(opacity=60);
font-size:11px;
color:#666;
padding-top:42px;
line-height:34px;
}
.social li a:hover {
opacity:1.0;
filter:alpha(opacity=100);
color:#666;
text-decoration:none;
}
.social .social-feed {
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhKvT6Lvckj0joj0CkLlvkYK2xLy-qNynrsE4joyjNkwGYgiJ3mHB2ZusBH0JvcSO3nWvMYg6DIp9WawuFtXIoobZvcxMpFKAL1l4pZILizZ4Au_wH0SJztZTLA508Yb_fqnyoftrGFmE/s1600/ico-social-rss.png) no-repeat;
}
.social .social-twitter {
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJFrSFD2SpQ_lB4xdDJItG9QEoKcjabJuMK5tElkvoNkWntBbFSfKT63iiA2CyXYMRcKnJii8galpOy3nwn_a8KeByCwpu65gU2OOiFYQP1pAAeHp1-kKnhEoiEgrKokskjW2japxbQWs/s1600/ico-social-twitter.png) no-repeat;
}
.social .social-facebook {
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFgePzWR2xCn2MAQXr3kt1OY_mxhOgb7SiKSG5t5KAL6Flz51um2EXecGqqmwq93uylQzKd-dwBdTcBxMZMj7vdoUPbqAjBvOUf3yRfBkiKhS21KppGs0n0YDEAJ1DKaazy6AZ7YHUc1k/s1600/ico-social-facebook.png) no-repeat;
}
.social .social-youtube {
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMPKhyphenhyphenTl2if_tbkVk85Hp8XjdqVQCT19DeKkGOYtJA_hsjmc3U-RjL9I5tEFrEA_kgv-WBAq78hz-C6fJ6ADaEPKWGXR-rbqG0ztLY9M0SBRNxjkflpHaXfO5u-mcfXkoyStWNSeVhRdU/s1600/ico-social-youtube.png) no-repeat;
margin-right:0;
}
form.emailform {
margin:20px 0 0;
display:block;
clear:both;
}
.emailtext {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeaYqaNIyRyNBDzGSKWMjKRhB9vGO69B9AlYUlZP0nGsussuDyTN5zmyrFqtMrBEBwsk7klyJkD-i0BMtob1zuerv1rsDWebPWDL1gKFdKdAxYq2OokBb4h67Nklb8PTPeDKVbV5sea91n/s28/w2b-mail.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 33px;
color:#444;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
-moz-box-shadow:1px 1px 2px #CCC inset;
-webkit-box-shadow:1px 1px 2px #CCC inset;
box-shadow:1px 1px 2px #CCC inset;
}
.ebutton {
color:#444;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
cursor:pointer;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-goog-ms-border-radius:4px;
border-radius:4px;
background:#fbfbfb;
background:-moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fbfbfb), color-stop(100%, #f4f4f4));
background:-webkit-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background:-o-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background:-ms-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4', GradientType=0 );
background:linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
}
HTML part
<div class="widget-content">
<div style="border: 1px solid DodgerBlue; padding: 1mm;">
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv2fw-JAoBb_7s5MO4GHMFIx6o3E2v7XZcJTG8-7RBPUS9TGAqL_SLJ-L6f7ncRvCJaroyaqkiLhSnNdCnpU_1XxFom1upPdr6peGCk7RMQFwIPYLAX9Jj7vKC5iU2POnDb7FxaHNV6fk/s1600/email-px-png.png" /></center>
<center><span style="font-weight: bold;font-size:small;">Subscribe by E-mail & receive free updates of these cool Tips N Tricks straight to your inbox!</span>
<ul class="social">
<li><a class="social-facebook" href="https://www.facebook.com/funwtf" rel="nofollow" target="_blank">Facebook</a></li>
<li><a class="social-twitter" href="http://twitter.com/vishalassassin" rel="nofollow" target="_blank">Twitter</a></li>
<li><a class="social-feed" href="http://feeds2.feedburner.com/cybergeekos" rel="nofollow" target="_blank">RSS</a></li>
<li><a class="social-youtube" href="http://www.youtube.com/user/vishalassassin" rel="nofollow" target="_blank">YouTube</a></li>
</ul>
</center>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" class="emailform" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=cybergeekos', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="hidden" value="cybergeekos" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input type="text" value="Enter your email..." name="email" class="emailtext" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" />
<input type="submit" class="ebutton" value="SignUp" title="" alt="" />
</form>
<center>
<span class="Apple-style-span" style="color: rgb(51, 51, 51); font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, sans-serif; font-size: 10px; font-style: italic; background-color: rgb(255, 255, 255); ">Your email address will not be shared with anyone</span>
</center>
<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="http://cybergeeko.blogspot.com/" target="_blank" title="Blogger Widget"><span style="font-size: xx-small;">Blogger Widget »</span></a></div>
</div>
</div>
<div style="border: 1px solid DodgerBlue; padding: 1mm;">
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgv2fw-JAoBb_7s5MO4GHMFIx6o3E2v7XZcJTG8-7RBPUS9TGAqL_SLJ-L6f7ncRvCJaroyaqkiLhSnNdCnpU_1XxFom1upPdr6peGCk7RMQFwIPYLAX9Jj7vKC5iU2POnDb7FxaHNV6fk/s1600/email-px-png.png" /></center>
<center><span style="font-weight: bold;font-size:small;">Subscribe by E-mail & receive free updates of these cool Tips N Tricks straight to your inbox!</span>
<ul class="social">
<li><a class="social-facebook" href="https://www.facebook.com/funwtf" rel="nofollow" target="_blank">Facebook</a></li>
<li><a class="social-twitter" href="http://twitter.com/vishalassassin" rel="nofollow" target="_blank">Twitter</a></li>
<li><a class="social-feed" href="http://feeds2.feedburner.com/cybergeekos" rel="nofollow" target="_blank">RSS</a></li>
<li><a class="social-youtube" href="http://www.youtube.com/user/vishalassassin" rel="nofollow" target="_blank">YouTube</a></li>
</ul>
</center>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" class="emailform" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=cybergeekos', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input type="hidden" value="cybergeekos" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input type="text" value="Enter your email..." name="email" class="emailtext" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" />
<input type="submit" class="ebutton" value="SignUp" title="" alt="" />
</form>
<center>
<span class="Apple-style-span" style="color: rgb(51, 51, 51); font-family: 'Trebuchet MS', Trebuchet, Arial, Verdana, sans-serif; font-size: 10px; font-style: italic; background-color: rgb(255, 255, 255); ">Your email address will not be shared with anyone</span>
</center>
<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="http://cybergeeko.blogspot.com/" target="_blank" title="Blogger Widget"><span style="font-size: xx-small;">Blogger Widget »</span></a></div>
</div>
</div>
After pasting this code, Just replace the coloured code with your us ernames. That's all. You can also edit it more. You can change the values of readers and fb likes as you want.
Enjoy
Enjoy

Popular
Tags
Videos
0 comments:
Post a Comment