Beautifull Social Widget For Blogger makes your visitors to easily spread your content all around the globe.Social network also play a major role in your website traffic.Today I camed with a social widget which looks beautiful , Elegant and adopts with your blog width.This widget enable your user to connect with your blog in all top social sites like Facebook, Twitter, Google+ and Pinterest.Your visitor can subscribe to RSS feeds by just entering their Email into Email Box Given in this widget.This widget is created by simply using CSS3 properties and will be loaded faster on any browser.Design of this widget without doubt a great & attractive design. Now let’s add this widget to blogger.
Adding Beautifull Social Widget to Blogger:
- Go To Blogger > Design
- Click on Choose a Gadget
- Select HTML/Javascript Widget
- Paste the following code inside it
<style>
#socialbar-subscribe-box{width:300px;border:5px solid #aaa;border-radius:3px;padding:3px 0}
.socialbar-subscribe-box-wrapper{background:url(http://2.bp.blogspot.com/-Y3hbgki8hXE/UXZE9IlUi4I/AAAAAAAAAgI/gIGB-L-HKHo/s1600/background.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 3px 13px;text-align:center;text-transform:uppercase}
.socialbar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.socialbar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}
.socialbar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(http://3.bp.blogspot.com/-DfHJzP9Mlh4/UXZE9ONhVnI/AAAAAAAAAgM/5xtMqb9biR4/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}
.socialbar-subscribe-box-email-button {
background: rgba(0, 153, 255, 0.31);
border: 1px solid #007fff;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;
color: #fff;
cursor: pointer;
font-family: verdana;
font-weight: 700;
padding: 10px;
text-shadow: 1px 1px 0 rgba(0,0,0,.4);
text-transform: uppercase;
width: 100%;
}
.socialbar-subscribe-box-email-button:hover,.socialbar-subscribe-box-email-button:focus{background:#1ca4ff}
.socialbar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}
#footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}
a.social-icons{margin-right: 5px;height:45px;width:45px;}
a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}
</style>
<div id="socialbar-subscribe-box">
<div class="socialbar-subscribe-box-wrapper">
<br/>
<a class="social-icons" target="blank" href="https://www.facebook.com/myblogmyearning"><img src="http://3.bp.blogspot.com/-fTm8V4c7I4I/UbmkFgnfuSI/AAAAAAAABeM/hl-VvPTxfWo/s1600/facebook_64.png" /></a>
<a class="social-icons" target="blank" href="https://twitter.com/MyBlogMyEarning"><img src="http://2.bp.blogspot.com/-jJM83OvIJKM/UbmkGg5pkkI/AAAAAAAABeo/IG-O322i3rI/s1600/twitter_64.png" /></a>
<a class="social-icons" target="blank" href="https://plus.google.com/u/0/b/103682949044533859174/"><img src="http://2.bp.blogspot.com/-2lVQmyWbF5o/UbmkFA6CF8I/AAAAAAAABeA/EseO3zCM5VQ/s1600/google-plus_64.png" /></a>
<a target="blank" class="social-icons" href="http://pinterest.com/myblogmyearning"><img src="http://1.bp.blogspot.com/-wiM-gP0zFGE/UbmkFRbdJSI/AAAAAAAABeI/mfMyjuBLZ9g/s1600/pinterest_64.png" /></a>
<p><strong>Become Our Fan on Social Sites!</strong></p>
<div class="socialbar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=MyBlogMyEarning" class="socialbar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=MyBlogMyEarning', 'popupwindow', 'scrollbars=yes,width=550,height=520′);return true" target="popupwindow"><input name="uri" type="hidden" value="MyBlogMyEarning" />
<input name="loc" type="hidden" value="en_US" /><input class="socialbar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter Your Email Here"/>
<input class="socialbar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form> <!--Please Do not Remove the Credits --><p style=" float:left; margin-right:35px; font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.myblogmyearning.com"><strong>Blogger Widgets</strong></a></p></div></div></div>
Make Following Changes:
- The Green Text Above can be changed with your Desired Words.
- Replace myblogmyearning with your Facebook, Twitter, Pinterest username respectively.
- Replace Brown Link with Google+ Profile link
- Next replace twice MyBlogMyEarning with your feed title.
- Save the Widget
- Done
Happy Popuping
About Author:
Zeeshan is a young Online Entrepreneur running a number of websites from his living room. He is BSIT Degree Holder and SEO Consultant, Computer Engineer, Professional Blogger and an Certified Web Developer. Follow him @ Google+ | Facebook
Aslamualaikum Very Nice Blog
ReplyDeletebro can we exchange backlink with each other??
This post was very nicely written, and it also contains a lot of useful facts. Thanks for sharing wonderful information.
ReplyDeletesocial name.
Please Share Your Template!
ReplyDelete