Click Below Ad for Leaning Blogging Tricks.
You can your own blog some old style social network widget but now your time once this widget add your blog then your blog look like a professional's websites.
Also Read:-Add Twitter Feed widget in Blogger
This widget are very easy to install our blog and your this widget include four types of social networking sites widget listed below:-
- Facebook Like Button
- Twitter Follower Button
- Google+ Button
- Pinterest Follow me Button
- Email Subscriber Button
These 5 Widgets looking to install very hard but no these all 5 widgets install at once
In my older Post you're understand that Add Facebook Sliding Like box for Blogger/Blogspot but this is old type widget old version. This widget also helps your to increase facebook like, make more twitter follower, more Google+ followers, more followers on pinterest and Email Subscriber in every day.
So, Put this widget in your blog/website from read this instructions. and this widget made by www.softwayrko.blogspot.com so, all credits goes to them.
How TO Add All in one Social Widget in Blogger:-
- Go To Blogger Dashboard>>Layout>>Add gadget
- Choose HTML/JavaScript Gadget
- Paste the following code in HTML/JavaScript Gadget
<div class="widget HTML" id="HTML3">Customization:-
<div class="widget-content">
<div id="socialsubwidget">
<div class="heading">
<h4><span style="font-weight:300;">Want To Get </span><b>Hot Updates?</b></h4>
<p>
Follow Us On Your Favourite Social Networking Site To Start Getting
Notified!
</p>
</div>
<div class="fb-likebox">
<iframe src="//www.facebook.com/plugins/like.php?
href=http://facebook.com/softwayrko&send=false&layout=standard&
width=250px&show_faces=false&action=like&colorscheme=dark& font&height=100px&"
scrolling="no" frameborder="0" style="border:none; overflow:hidden; color:whitesmoke;" width="250px"
height="50px">
</iframe>
</div>
<div class="twitter-follow">
<iframe title="" style="width: 300px; height: 20px;"
src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&
align=&button=blue&id=twitter_tweet_button_0&
lang=en&link_color=&screen_name=SoftwayRKO&show_count=& show_screen_name=&text_color="
frameborder="0" scrolling="no">
</iframe>
</div>
<div class="gplus-follow">
<!-- Place this tag where you want the widget to render. -->
<div style="text-indent: 0px; margin: 0px; padding: 0px; background-color: transparent; border-style: none;
float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width:
300px; height: 106px; background-position: initial initial; background-repeat: initial initial;"
id="___page_0"><iframe frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no"
style="position: static; top: 0px; width: 300px; margin: 0px; border-style: none; left: 0px; visibility:
visible; height: 106px;" tabindex="0" vspace="0" width="100%" id="I0_1401357853848" name="I0_1401357853848"
src="https://apis.google.com/u/0/_/widget/render/page?usegapi=1&href=%2F%2Fplus.google.com%2Fu
%2F0%2F111113545413563194890&theme=dark&layout=landscape&rel=publisher&hl=en_GB&origin=h
ttp%3A%2F%2Fwww.softwayrko.blogspot.com&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs
%2Fk%3Doz.gapi.en.Xh27AGpQ8ys.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Fz%3Dzcms%2Frs
%3DAItRSTOjHu85ttPOX7Dcbu5iIjt894HaVw#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe
%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Conload&id=I0_1401357853848&parent=http%3A%2F
%2Fwww.softwayrko.blogspot.com&pfname=&rpctoken=12173783" data-gapiattached="true"
title="+Badge"></iframe></div>
<!-- Place this tag after the last widget tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<div class="pinterest-follow">
<a href="http://pinterest.com/prajjwalzone/"><img src="http://passets-
cdn.pinterest.com/images/about/buttons/follow-me-on-pinterest-button.png" width="169" height="28"
alt="Follow Me on Pinterest" /></a>
</div>
<div class="feedburner-emailsubs">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=blogspot/NedJM"
method="post" target="_new">
<input class="feedburner-email" name="email" placeholder="Your Email &#10;&#10;Address" type="text" />
<input class="feedburner-button" type="submit" value="Sign Up!" />
</form>
</div>
<style>
.fb-likebox {padding:10px; background:#3b5998; height:25px;}
.twitter-follow {padding:10px;background:#3a92c8;height:20px; }
.gplus-follow {margin-left:-1px;}
.pinterest-follow {padding:10px;background:#cb2027;height:25px;margin-top:-10px;}
.linkedin-follow {padding:10px; background:#069; height:25px;}
.feedburner-emailsubs {padding:10px; background:#f39c12;}
.feedburner-email {width: 66%;
height: 20px;
padding: 8px;
background-color: white;
color: black;
border-radius: 5px 5px 5px 5px;
font-family: open sans;
outline: none;
border: 1px solid #F7B276;}
.feedburner-button {padding: 8px 10px;
vertical-align: top;
margin: auto;
margin-left: -7px;
text-align: left;
width: auto;
-moz-border-radius-topright: 5px !important;
-moz-border-radius-topleft: 0 !important;
-webkit-border-top-right-radius: 5px !important;
-webkit-border-top-left-radius: 0 !important;
-moz-border-radius-bottomright: 5px !important;
-moz-border-radius-bottomleft: 0 !important;
-webkit-border-bottom-right-radius: 5px !important;
-webkit-border-bottom-left-radius: 0 !important;
background: #95a5a6;
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #95a5a6),color-stop(1,
#7f8c8d));
background-image: -moz-gradient(linear,left bottom,left top,color-stop(0, #95a5a6),color-stop(1, #7f8c8d));
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
border-width: 1px;
border-style: solid;
border-color: #bdc3c7;
font: 14px open sans;
color: #fff;
cursor: pointer;
font-weight: 600;
text-shadow: 0 1px 0 rgba(0,0,0,.2);
transition:background-image 400ms;
-webkit-transition:background-image 400ms;
-moz-transition:background-image 400ms;
}
.feedburner-button:hover {
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #7f8c8d),color-stop(1,
#95a5a6));
}
#socialsubwidget {
float: left;
width: 296px;
background: #95a5a6;
border: 2px solid #7f8c8d;
font-family:open sans;
}
#socialsubwidget .heading {
height: 110px;
padding: 5px;
}
#socialsubwidget .heading p {
text-shadow: none;
font-size: 14px;
padding: 0px;
margin: 0px;
line-height: 20px;
color: #fff;
margin-top: 5px;
text-align: center;
}
#socialsubwidget .heading h4 {
text-shadow: none;
font-size: 21px;
margin: 0px;
padding: 0px;
text-align: center;
line-height: 25px;
color: #fff;
padding-top: 15px;
padding-bottom: 10px;
}
</style>
</div>
</div>
<div class="clear"></div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a class="quickedit" href="//www.blogger.com/rearrange?
blogID=1861722013486731147&widgetType=HTML&widgetId=HTML3&action=editWidget&sectionId=sideba
rright" onclick="return _WidgetManager._PopupConfig(document.getElementById("HTML3"));"
target="configHTML3" title="Edit">
<img alt="" height="18" src="http://img1.blogblog.com/img/icon18_wrench_allbkg.png" width="18" />
</a>
</span>
</span>
<div class="clear"></div>
</div>
- Replace softwayrko with your facebook page username
- Replace SoftwayRKO with your twitter username
- Replace 111113545413563194890 with your Google+ Page ID
- Replace prajjwalzone with your pinterest username
- Replace http://feedburner.google.com/fb/a/mailverify?uri=blogspot/NedJM with your feedburner URL
- That's all Finish!
Final Words
Thanks for You can put this widget on your blogger if you're getting errors or face some problem please write your problems in comment box and share this post with your friends on social networking sites
Thanks
0 blogger-facebook: