Top 10 Ultimate SEO Plugins For WordPress 2017-18
ProTechnify

01/11/2015

Multi Social Subscription Box Widget for Blogger

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 Word Press platform or on blogger. So today I decided to share beneficial and reliable multi-color social subscription box which was created by Blogger Yard, 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/Java script.

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=protechnify" 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>

Customization

  • For Feed Burner (Signup) box, replace protechnify 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-GOOGLEPLUS-PLUGIN with your Google plus follow button plugin which you will get from Google plus developer site.
  • Ultimately, click on save.
Read This:

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.




0 comments:

Post a Comment