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.
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.
.exebar{width:300px;float:left;background:#FFF url(https://1.bp.blogspot.com/–FwYNSqnU8E/Tz-tndrLfGI/AAAAAAAACpE/aOkjARji_Qo/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://4.bp.blogspot.com/-a2nUTreokNE/Tz-rYtd10-I/AAAAAAAACo0/60_AXpABfRU/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://4.bp.blogspot.com/-x4EHRDCWjwg/Tz-rZV77-oI/AAAAAAAACo4/7rf_iOfi0ew/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://4.bp.blogspot.com/-x4EHRDCWjwg/Tz-rZV77-oI/AAAAAAAACo4/7rf_iOfi0ew/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://4.bp.blogspot.com/-x4EHRDCWjwg/Tz-rZV77-oI/AAAAAAAACo4/7rf_iOfi0ew/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://4.bp.blogspot.com/-x4EHRDCWjwg/Tz-rZV77-oI/AAAAAAAACo4/7rf_iOfi0ew/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(https://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/EXEIdeas“><img style=”border:0″ alt=”” src=”http://feeds.feedburner.com/%7Efc/EXEIdeas?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/EXEIdeas” target=”_blank”> RSS</a>
</div>
<div class=”googleicon”>
<a href=”https://plus.google.com/102256859586166648016” rel=”author” target=”_blank”> G+</a>
</div>
<div class=”fbicon”>
<a href=”https://www.facebook.com/EXEIdeas” target=”_blank” rel=”nofollow”>FB</a>
</div>
<div class=”twittericon”>
<a href=”https://www.twitter.com/EXEIdeas” 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=exeideas‘, ‘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=”EXEIdeas” 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=”https://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…
Hi! you are doing great job. I like your blog. You are doing great job.
pakistan web development company
web development services pakistan
web design company pakistan
Thanks…
great coding… thnx for sharing.. thinking of using it in my blog….
You Are Welcome…
Lovely Social Widget, Will Implement This On My Blogger Directory.
Thanks for sharing.
You Are Welcome To Visit Us…
Thanks Bro For This Awesome Social Network Widget,
I Have Just Used It On My Blog found here
http://inspite-of.blogspot.com/
GOD Bless.
You Are Welcome…
Thanks…
hey can u tell me how 2 make its background color 2 transparent????
Just Have A Loot On Second Line And Remove…
background:#FFF url(http://1.bp.blogspot.com/–FwYNSqnU8E/Tz-tndrLfGI/AAAAAAAACpE/aOkjARji_Qo/s1600/%5Bwww.gj37765.blogspot.com%5Dsidebartop.gif) top no-repeat;
Done…Feel Free To Ask More…
Informative article. However, you have shared some useful information regarding social media share buttons. Totally worth visiting here. Would you like to recommend some plugins for WordPress as well?
Welcome here and thanks for reading our article and sharing your views. You can use it anywhere if you want.