Well , You Might Have Seen Many Widgets At Envy Blogging And Similar Websites . But Most Of Them Are not Unique And Can Be Spotted in Many Websites . So , We Created this Unique Metro UI Styled Social Profiles Widget with Search Box And Awesome CSS Effects And Stylish Hover Effects . We Are Beginners In Designing Widgets So Please report If You Find Any Bugs .This Widget also Contains A Search Box With Which You Can Search Your Blog . So , Yhis Is A total Social Sharing widget And It also Has the Metro UI Windows * Style Which Makes It Attractive , Stylish And Unique . Well , Heres A Live Demo Of It . This Widget includes Your Social Profiles In Facebook , Twitter , Google+ And your RSS Feeds . It Has A Beatiful And Stylish CSS3 Zoom Effect.
STEPS To Add This Widget To Your Blog
1 . Go To Blogger - Layout - Add A Gadget
2 . Now Paste this Code inside It
3 . The Code is given below .
4 . Customize the Highlighted Social Profiles Link With Your Link
5 . Save And Enjoy !
Source Coding
<!-- Newsletter Widget By www.envyblogging.blogspot.in -->
<style>
#envy-subsbox {
height:300px;
width:500px;
background:hsla(0,0%,95%,0.4);
padding:10px;
border:5px solid hsla(0,0%,67%,0.19);
border-radius:10px 10px 10px 10px;
}
#envy-subsboxh3 {
text-align:center;
margin:10px;
text-transform:uppercase;
font-weight:bold;
font-family:'Merienda';,cursive;
font-size:1.4em;
letter-spacing:1px;
}
#envy -subsboxheader {
border-bottom:1px solid #ddd;
border-top:1px solid #ddd;
font-size:16px;
padding-bottom:10px;
font-family:'Marmelad',sans-serif;
text-align:left;
}
.envy-subsbox-form {
padding:20px;
}
#envy-subsboxheader img {
padding-right:10px;
}
.envy-subsbox-name {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHWr230rRb64rmfOjJCwsUqPDIfynFcUvUb_ZaK4jkzp5vwTJd9RiD3DjOJMpqkQRLfd7knDZmJGIRAma_EQfY-NspbqXwWbpEVg6ov5wOBTOGupacoey7HRgly09xd-iAQ6KNBq7v6DY/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:90%;
height:24px;
padding:5px 15px 5px 28px;
vertical-align:top;
display:inline-block;
}
.envy-subsbox-email {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-lxMFi9onDcp688ycmIuaLWpBbNvH-nhvTmjkSwAuPLjnrEzvrDXDthBiLKzL9wPFqFPECLwvRQNGOCCRNviHOzn9RC0HY3Wi5By9s-rkUXIjg-k3ADC9SQaekM1qnIu6ubte35XkP3U/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:90%;
height:24px;
margin-top:10px;
padding:5px 15px 5px 28px;
vertical-align:top;
display:inline-block;
}
.envy-subsbox-name:hover,.envy-subsbox-email:hover {
border:1px solid #bebebe;
box-shadow:0.5px 1.5px 2px rgba(5,95,255,.1);
}
.envy-subsbox-submit {
float:right;
margin-top:20px;
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#ededed),color-stop(1,#dfdfdf) );
background:-moz-linear-gradient( center top,#ededed 5%,#dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed',endColorstr='#dfdfdf');
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:arial;
font-size:15px;
font-weight:bold;
padding:6px 24px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}
.envy-subsbox-submit:hover {
background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#dfdfdf),color-stop(1,#ededed) );
background:-moz-linear-gradient( center top,#dfdfdf 5%,#ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf',endColorstr='#ededed');
background-color:#dfdfdf;
}
.envy-subsbox-submit:active {
position:relative;
top: 1px;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Marmelad' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Merienda' rel='stylesheet' type='text/css'/>
<center>
<div id='envy-subsbox'>
<div id='envy-subsboxh3'>
Subscribe To Our Newsletter
</div>
<div id='envy-subsboxheader'>
<a href='http://goo.gl/6rQJK'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHhnHIfZfBvj55VApEu7YbrhyqzlblwBvmGwVi0nQrq1SrywTWMKyJoXLbnfDGM1hitRsvLauHbyX5C3V4kAQSJUtnHWNbpo82xM0TAGfCA-HGtsnes5azpQ1MZhT__djrHTMoNY2gC78/s1600/mail-icon.png' style='float:left;'/></a>
<p style='margin-top:13px;'>
Sign Up To our Newsletter Now To Get Professional Tutorials About Widgets, Blogging Tips , Make Money And SEO. It's 100% Free!
</p>
</div>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=envyblogging' class='envy-subsbox-form' method='post' target='_new'>
<input class='envy-subsbox-name' name='name' onblur='if (this.value == '') {this.value = 'Your Name';}' onfocus='if (this.value == 'Your Name') {this.value = '';}' value='Your Name'/>
<input class='envy-subsbox-email' name='email' onblur='if (this.value == '') {this.value = 'Your Email Adress';}' onfocus='if (this.value == 'Your Email Address') {this.value = '';}' value='Your Email Address'/>
<input class='envy-subsbox-submit' type='submit' value='Sign Up!'/>
</form>
<p style='font-family:times new roman;margin-top:10px;font-size:15px;'>
<b/>
</p>
</div>
<br/>
</center>
</b:if>
Final Words
Now That You Have Got A unique Widget for Your Blog , Please Share This Article . If You Think This Is just awesome then Subscribe To Us For more Awesome Widgets , Blogger Tips , SEO Tips Etc.
0 comments: