A Perfect Simple Stylish And Best Social Profile Share Box Widget for Your Blog And Website...
I am going to show how to add A Perfect Share Box Widget for your blog and website. As you can see this widget contains links to your Facebook Fan page, Google+ page and twitter follow button, RSS and most importantly an attractive subscription form that will further increase the number of your Email subscribers. I have configure all this button for blogs and website, so you can add this share box quickly to your blog.
I am going to show how to add A Perfect Share Box Widget for your blog and website. As you can see this widget contains links to your Facebook Fan page, Google+ page and twitter follow button, RSS and most importantly an attractive subscription form that will further increase the number of your Email subscribers. I have configure all this button for blogs and website, so you can add this share box quickly to your blog.
Features:-
1.) Facebook Account Link.
2.) Google Plus Account Link.
3.) Twitter Account Link.
4.) RSS Link.
5.) FeedBurner Counter.
6.) E-Mail Subscription Form.
7.) Simple And Stylish Social Widget.
How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Layout.
4.) Click "Add A Gadget" Where You Want To Add It.
5.) Now Scroll To "HTML-JAVASCRIPT"
6.) Click "+" Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.
How To Add In Website?
1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.
<style type="text/css">
.exebar{width:300px;float:left;background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwgxKt8-WSp8X3nlj0qFKa8nU7lYaJwZSLow8IXNsrMApR-MPsgbCqQ6eUwO3xTCGp7-GVCS8BstSVhvq0mViXmx7VAsvcX1bXeK7VZdfEz1T8jUM9iTtMztereVHY5GskkVStvKAnGv1j/s1600/%5Bwww.gj37765.blogspot.com%5Dsidebartop.gif) top no-repeat;margin:0 0 10px;padding:10px;border:1px solid #DDD;}
.exebar .exe-credit{}.exebar .exe-credit a{float:right;font-size:10px;font-weight:bold;text-shadow:1px 1px white;color:#1E598E;text-decoration:none;}
.exebar h2{background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpwiVINEV8q9Xx9D0m0gfMqdnY1O90NnMuYfJU4lNBtLmYr9I-9JZ6juUj1qNnq_ENeRgFejQuGoYYWUcZqJxCUa5EvzKcjyXnV7z_igdfP3PQu5oLWQLEv1FWAjb2ieCK9KUGfZTQ0MnZ/s1600/%255Bwww.gj37765.blogspot.com%255DSUBSCRIBE.gif) no-repeat;height:50px;margin:0px 0 0px 0;padding:0px 20px 0px 0px;font-size:0px;font-family:Sans-serif, Arial, Helvetica;font-weight:bold;text-transform:uppercase;color:#ffffff;text-shadow:0 1px 0 #fff;}
.exebar .count{color:#F17C18;font-size:14px;font-weight:bold;font-family:Helvetica, Arial;height:40px;line-height:40px;vertical-align:middle;width:310px;padding:0 0px 0 4px;margin:0;}
.exebar .count span.bigcount{color:#F17C18;font-size:24px;font-family:Helvetica, Arial;line-height:39px;vertical-align:middle;margin:0px;padding:10px 0px 0px 0;}
.exebar .subicons{border-bottom:1px solid #e6e6e6;margin:0px 0 0px 0;float:left;width:300px;font-family:Helvetica, Arial;font-size:12px;}
.exebar .subicons a{text-decoration:none;color:#333333;}
.exebar .subicons a:hover{text-decoration:underline;color:#333333;}
.exebar .subicons .rssicon{border-right:1px solid #e6e6e6;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2IIZJ0FJNHeDPN48kCEX55gJhy2DsnlB8gaBpa2Sb_ggHy196XC34NFY-5VDdAv6nWcYARX1gU4SN8iazhuX9hfHlSDx2Oqh1DeQs_SzORj5DnEoTW5X2b6caAb4HwEvqDXFwDefdxIIa/s1600/%255Bwww.gj37765.blogspot.com%255Drsssprite.png) no-repeat;background-position:0px 5px;min-width:2px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}
.exebar .subicons .googleicon{border-right:1px solid #e6e6e6;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2IIZJ0FJNHeDPN48kCEX55gJhy2DsnlB8gaBpa2Sb_ggHy196XC34NFY-5VDdAv6nWcYARX1gU4SN8iazhuX9hfHlSDx2Oqh1DeQs_SzORj5DnEoTW5X2b6caAb4HwEvqDXFwDefdxIIa/s1600/%255Bwww.gj37765.blogspot.com%255Drsssprite.png) no-repeat;background-position:0px -37px;min-width:2px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}
.exebar .subicons .fbicon{border-right:1px solid #e6e6e6;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2IIZJ0FJNHeDPN48kCEX55gJhy2DsnlB8gaBpa2Sb_ggHy196XC34NFY-5VDdAv6nWcYARX1gU4SN8iazhuX9hfHlSDx2Oqh1DeQs_SzORj5DnEoTW5X2b6caAb4HwEvqDXFwDefdxIIa/s1600/%255Bwww.gj37765.blogspot.com%255Drsssprite.png) no-repeat;background-position:0px -79px;min-width:20px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}
.exebar .subicons .twittericon{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2IIZJ0FJNHeDPN48kCEX55gJhy2DsnlB8gaBpa2Sb_ggHy196XC34NFY-5VDdAv6nWcYARX1gU4SN8iazhuX9hfHlSDx2Oqh1DeQs_SzORj5DnEoTW5X2b6caAb4HwEvqDXFwDefdxIIa/s1600/%255Bwww.gj37765.blogspot.com%255Drsssprite.png) no-repeat;background-position:0px -121px;min-width:20px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}
.exebar .emailsub{border-bottom:0px solid #e6e6e6;padding:15px 0 0px 0;float:left;width:100%;font-family:Helvetica, Arial;}
.exebar .emailsub .emailicon{background:url(http://www.fordfarmhouse.com/images/email.png) no-repeat 0 2px;float:left;padding:0px 15px 0px 50px;margin:0 0 0 5px;width:300px;line-height:20px;vertical-align:middle;font-size:14px;color:#333;}
.exebar .emailsub .emailupdatesform{margin:15px 0 5px 5px;width:300px;float:left;}
.exebar .emailsub .emailupdatesform input.emailupdatesinput{background:#fff !important;float:left;border:1px solid #d2d2d2;padding:0px 8px 0px 8px;color:#a19999;font-size:12px;height:25px;width:185px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.exebar .emailsub .emailupdatesform input.joinemailupdates{/*linear-gradient*/background:-webkit-gradient(linear,left top,left bottom,color-stop(#F9EAD4,0),color-stop(#F9780E,1));background:-webkit-linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:-moz-linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:-o-linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#F9780E));border:1px solid #F9780E;text-transform:none;font:bold 12px arial;color:#fff;height:25px;padding:0 12px 0 12px;margin:0 0 0 5px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;cursor:pointer;}
</style>
<div class="exebar">
<h2 class='title'>Subscribe Now!</h2>
<div class="count">
<span class="bigcount">
<a rel="nofollow" href="http://feeds.feedburner.com/nasvetkay"><img style="border:0" alt="" src="http://feeds.feedburner.com/%7Efc/nasvetkay?bg=F2F2F2&fg=666&anim=1" height="26" width="88" /></a>
</span>
Learn Free Pro Tricks daily
</div>
<div class="subicons">
<div class="rssicon">
<a rel="nofollow" href="http://feeds.feedburner.com/nasvetkay" target="_blank"> RSS</a>
</div>
<div class="googleicon">
<a href="https://plus.google.com//u/0/101171373965747613245/" rel="author" target="_blank"> G+</a>
</div>
<div class="fbicon">
<a href="https://www.facebook.com/nasvet222" target="_blank" rel="nofollow">FB</a>
</div>
<div class="twittericon">
<a href="https://www.twitter.com/nasvet1" target="_blank" rel="nofollow">Twitter</a>
</div>
</div>
<div class="emailsub">
<div class="emailicon">
<p style=" width:270px; color:#3A3A3A; font-size: 13px; font-weight: normal; font-family: Helvetica, Arial; padding:0; margin:0;">Receive Our All Updates In Your Inbox by submitting your Email ID below.</p>
</div>
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=nasvetkay', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" /><input value="nasvetkay" name="uri" type="hidden" /><input value="Submit" class="joinemailupdates" type="submit" /></form>
<span class="exe-credit" style="font-family: Arial, Helvetica, sans-serif;">
<a href="http://www.exeideas.com" target="_blank" >Want This >></a>
</span>
</div>
</div>
</div>
.exebar{width:300px;float:left;background:#FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwgxKt8-WSp8X3nlj0qFKa8nU7lYaJwZSLow8IXNsrMApR-MPsgbCqQ6eUwO3xTCGp7-GVCS8BstSVhvq0mViXmx7VAsvcX1bXeK7VZdfEz1T8jUM9iTtMztereVHY5GskkVStvKAnGv1j/s1600/%5Bwww.gj37765.blogspot.com%5Dsidebartop.gif) top no-repeat;margin:0 0 10px;padding:10px;border:1px solid #DDD;}
.exebar .exe-credit{}.exebar .exe-credit a{float:right;font-size:10px;font-weight:bold;text-shadow:1px 1px white;color:#1E598E;text-decoration:none;}
.exebar h2{background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpwiVINEV8q9Xx9D0m0gfMqdnY1O90NnMuYfJU4lNBtLmYr9I-9JZ6juUj1qNnq_ENeRgFejQuGoYYWUcZqJxCUa5EvzKcjyXnV7z_igdfP3PQu5oLWQLEv1FWAjb2ieCK9KUGfZTQ0MnZ/s1600/%255Bwww.gj37765.blogspot.com%255DSUBSCRIBE.gif) no-repeat;height:50px;margin:0px 0 0px 0;padding:0px 20px 0px 0px;font-size:0px;font-family:Sans-serif, Arial, Helvetica;font-weight:bold;text-transform:uppercase;color:#ffffff;text-shadow:0 1px 0 #fff;}
.exebar .count{color:#F17C18;font-size:14px;font-weight:bold;font-family:Helvetica, Arial;height:40px;line-height:40px;vertical-align:middle;width:310px;padding:0 0px 0 4px;margin:0;}
.exebar .count span.bigcount{color:#F17C18;font-size:24px;font-family:Helvetica, Arial;line-height:39px;vertical-align:middle;margin:0px;padding:10px 0px 0px 0;}
.exebar .subicons{border-bottom:1px solid #e6e6e6;margin:0px 0 0px 0;float:left;width:300px;font-family:Helvetica, Arial;font-size:12px;}
.exebar .subicons a{text-decoration:none;color:#333333;}
.exebar .subicons a:hover{text-decoration:underline;color:#333333;}
.exebar .subicons .rssicon{border-right:1px solid #e6e6e6;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2IIZJ0FJNHeDPN48kCEX55gJhy2DsnlB8gaBpa2Sb_ggHy196XC34NFY-5VDdAv6nWcYARX1gU4SN8iazhuX9hfHlSDx2Oqh1DeQs_SzORj5DnEoTW5X2b6caAb4HwEvqDXFwDefdxIIa/s1600/%255Bwww.gj37765.blogspot.com%255Drsssprite.png) no-repeat;background-position:0px 5px;min-width:2px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}
.exebar .subicons .googleicon{border-right:1px solid #e6e6e6;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2IIZJ0FJNHeDPN48kCEX55gJhy2DsnlB8gaBpa2Sb_ggHy196XC34NFY-5VDdAv6nWcYARX1gU4SN8iazhuX9hfHlSDx2Oqh1DeQs_SzORj5DnEoTW5X2b6caAb4HwEvqDXFwDefdxIIa/s1600/%255Bwww.gj37765.blogspot.com%255Drsssprite.png) no-repeat;background-position:0px -37px;min-width:2px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}
.exebar .subicons .fbicon{border-right:1px solid #e6e6e6;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2IIZJ0FJNHeDPN48kCEX55gJhy2DsnlB8gaBpa2Sb_ggHy196XC34NFY-5VDdAv6nWcYARX1gU4SN8iazhuX9hfHlSDx2Oqh1DeQs_SzORj5DnEoTW5X2b6caAb4HwEvqDXFwDefdxIIa/s1600/%255Bwww.gj37765.blogspot.com%255Drsssprite.png) no-repeat;background-position:0px -79px;min-width:20px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}
.exebar .subicons .twittericon{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2IIZJ0FJNHeDPN48kCEX55gJhy2DsnlB8gaBpa2Sb_ggHy196XC34NFY-5VDdAv6nWcYARX1gU4SN8iazhuX9hfHlSDx2Oqh1DeQs_SzORj5DnEoTW5X2b6caAb4HwEvqDXFwDefdxIIa/s1600/%255Bwww.gj37765.blogspot.com%255Drsssprite.png) no-repeat;background-position:0px -121px;min-width:20px;height:48px;line-height:57px;vertical-align:middle;float:left;padding:0px 10px 0px 30px;margin:0 0 0 5px;}
.exebar .emailsub{border-bottom:0px solid #e6e6e6;padding:15px 0 0px 0;float:left;width:100%;font-family:Helvetica, Arial;}
.exebar .emailsub .emailicon{background:url(http://www.fordfarmhouse.com/images/email.png) no-repeat 0 2px;float:left;padding:0px 15px 0px 50px;margin:0 0 0 5px;width:300px;line-height:20px;vertical-align:middle;font-size:14px;color:#333;}
.exebar .emailsub .emailupdatesform{margin:15px 0 5px 5px;width:300px;float:left;}
.exebar .emailsub .emailupdatesform input.emailupdatesinput{background:#fff !important;float:left;border:1px solid #d2d2d2;padding:0px 8px 0px 8px;color:#a19999;font-size:12px;height:25px;width:185px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.exebar .emailsub .emailupdatesform input.joinemailupdates{/*linear-gradient*/background:-webkit-gradient(linear,left top,left bottom,color-stop(#F9EAD4,0),color-stop(#F9780E,1));background:-webkit-linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:-moz-linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:-o-linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:linear-gradient(top,#F9EAD4 0%,#F9780E 100%);background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#F9780E));border:1px solid #F9780E;text-transform:none;font:bold 12px arial;color:#fff;height:25px;padding:0 12px 0 12px;margin:0 0 0 5px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;cursor:pointer;}
</style>
<div class="exebar">
<h2 class='title'>Subscribe Now!</h2>
<div class="count">
<span class="bigcount">
<a rel="nofollow" href="http://feeds.feedburner.com/nasvetkay"><img style="border:0" alt="" src="http://feeds.feedburner.com/%7Efc/nasvetkay?bg=F2F2F2&fg=666&anim=1" height="26" width="88" /></a>
</span>
Learn Free Pro Tricks daily
</div>
<div class="subicons">
<div class="rssicon">
<a rel="nofollow" href="http://feeds.feedburner.com/nasvetkay" target="_blank"> RSS</a>
</div>
<div class="googleicon">
<a href="https://plus.google.com//u/0/101171373965747613245/" rel="author" target="_blank"> G+</a>
</div>
<div class="fbicon">
<a href="https://www.facebook.com/nasvet222" target="_blank" rel="nofollow">FB</a>
</div>
<div class="twittericon">
<a href="https://www.twitter.com/nasvet1" target="_blank" rel="nofollow">Twitter</a>
</div>
</div>
<div class="emailsub">
<div class="emailicon">
<p style=" width:270px; color:#3A3A3A; font-size: 13px; font-weight: normal; font-family: Helvetica, Arial; padding:0; margin:0;">Receive Our All Updates In Your Inbox by submitting your Email ID below.</p>
</div>
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=nasvetkay', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" /><input value="nasvetkay" name="uri" type="hidden" /><input value="Submit" class="joinemailupdates" type="submit" /></form>
<span class="exe-credit" style="font-family: Arial, Helvetica, sans-serif;">
<a href="http://www.exeideas.com" target="_blank" >Want This >></a>
</span>
</div>
</div>
</div>
Customization:-
1.) Change All Red Text To Your Own Data.
2.) No More Prob, Just Enjoy...
No comments:
Post a Comment