Nowadays social subscription boxes playing a very important role in social media management and you would see social share icons, mostly on every website because it has become a big trend as well as need also, without social power no one can achieve much success in an online business whether it is on the WordPress platform or on blogger. it has lots of advantages which will surely fulfill with your needs as mentioned below.
- It will save your page speed by combining all social icons including subscription box in one place.
- It will implement a social friendly interface for upcoming visitors.
- It has a multi-color background which makes it more professional and premium.
- It is clean coded and free from bugs and errors.
- Easy Implementation and Customization for newbies.
How to Add Multi Social Subscription Box Widget in Blogger
It’s so simple, just read the steps and implement easily.
First open your blogger account.
Go to Layout>> Add a Gadget>> Choose HTML/Javascript.
Then, add the below code in HTML/javascript.
<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>
- For Feed Burner (Signup) box, replace hvbloggers with your Feed Burner name or ID.
- Replace YOUR-FACEBOOK-PLUGIN with your Facebook like button plugin which you will get from the Facebook developer site.
- Replace YOUR-TWITTER-PLUGIN with your Twitter follows button plugin which you will get from the Twitter developer site.
- Replace YOUR-GOOGLEPLUS-PLUGIN with your Google plus follow button plugin which you will get from Google plus developer site.
- Replace YOUR-PINTEREST-PLUGIN with your Google plus follow button plugin which you will get from Google plus developer site.
- Ultimately, click on save.
Conclusion
I know you are feeling comfortable and happy after installing this all in one multi social subscription box, this subscription box will decrease your page speed and create eye touch mood with your visitors. You can add more colorful social boxes in this box like LinkedIn, Reddit and Instagram just you have to add some CSS classes and div tags for making it more socially.
COMMENTS