Elegant style subscribtion widget for blogger

Posted By: Unknown - 21:49

Share

& Comment


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 &amp; 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 == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" />
<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

About Unknown

Techism is an online Publication that complies Bizarre, Odd, Strange, Out of box facts about the stuff going around in the world which you may find hard to believe and understand. The Main Purpose of this site is to bring reality with a taste of entertainment

0 comments:

Post a Comment

Copyright © 2013 Cyber Geeko™ is a registered trademark.

Designed by Templateism. Built with Blogger Templates.