Multi Social Subscription Box Widget for Google Blogger

First Step -: login Your Blogger Account.Select Layout Option.Add Gadget.Select HTML+ or Paste This Code Under Html Box

<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600,700" rel="stylesheet" type="text/css" />
<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="feedburner1-emailsubs">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=hvbloggers" method="post" target="_new">
<input class="feedburner1-email" name="email" placeholder="Your Email Address" type="text" />
<input class="feedburner1-button" type="submit" value="Sign Up!" />
</form>
</div>
<div class="fb1-likebox">
YOUR-FACEBOOK-PLUGIN
</div>
<div class="twitter1-follow">
YOUR-TWITTER-PLUGIN
</div>
<div class="gplus1-follow">
YOUR-GOOGLEPLUS-PLUGIN
</div>
<div class="pinterest1-follow">
YOUR-PINTEREST-PLUGIN
</div>
<style>
.fb1-likebox {
padding: 10px;
background: #213F92;
height: 26px;
}
.twitter1-follow {
background: #00ACEE;
height: 20px;
padding-top: 10px;
padding-left: 10px;
padding-bottom: 10px;
}
.gplus1-follow {margin-left:0px;}
.pinterest1-follow {
padding: 10px;
background: #CB2027;
height: 25px;
}
.linkedin1-follow {padding:10px; background:#069; height:25px;}
.feedburner1-emailsubs {padding-left: 10px;
padding-top: 15px;
padding-bottom: 0.2px;
background: #0D9BFF;}
.feedburner1-email {
width: 66%;
height: 35px;
padding: 8px;
background-color: white;
color: black;
border-radius: 5px 5px 5px 5px;
font-family: open sans;
outline: none;
border: 1px solid #F7B276;
}
.feedburner1-button {padding: 7px 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-button1:hover {
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #7f8c8d),color-stop(1, #95a5a6));
}
#socialsubwidget {
float: left;
width: 315px;
background: #95a5a6;
border: 0px 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 class="clear"></div>

1. Replace This Wording-- Feed Burner (Signup) box, Replace hvbloggers with your Feed Burner name or ID.
2. Replace This Wording--  YOUR-FACEBOOK-PLUGIN with your Facebook like button plugin which you will get from the Facebook developer site.
3. Replace This Wording--  YOUR-TWITTER-PLUGIN with your Twitter follows button plugin which you will get from the Twitter developer site.
4. Replace This Wording--  YOUR-GOOGLEPLUS-PLUGIN with your Google plus follow button plugin which you will get from Google plus developer site.
5. Replace This Wording--  YOUR-PINTEREST-PLUGIN with your Google plus follow button plugin which you will get from Google plus developer site.
6. Last, click on save

ENJOY

Author : Gulwinder Singh Batth

Share this

Related Posts