How To Add 4 In One Box Social Media Widget In Blogger

Hello folks, today in this article we are going to explain How to add 4 in one boxed style social media widget in blogger template.This widget is very useful for the any website or blog.In box social media profile gadget we have added three social media Facebook , twitter and google plus and additionally we have added section for join our site plugin to follow the blogspot website.Box 4 in one social media is very light weight widget with the integration of the font awesome icons on it.We have used CSS for styling and html for the box.Box social media widget will surely going to enhance the look of any website.In order to get the 4 in one boxed social media widget follow the steps mentioned below.

DEMO

See the Pen BOXED style social media widget for blogger template by BloggersStand (@bloggersstand) on CodePen.

How to Install 4 in one box social media widget in blogger template

Installation Steps:

Step 1. Log in to your Blogger account and Go to your Blogger Dashboard.

Step 2. Now Click on  Template -> Edit HTML.

Step 3. Now Search for </head> tag by Pressing Ctrl+F keys.

Step 4. Copy the below Fontawesome CSS stylesheed and paste it just before the </head> tag.( If you already added fontawesome stylesheet then skip 4th step.)

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

Step 5. Now Search for ]]></b:skin> or </style> by Pressing Ctrl+F keys.
Step 6. Copy the below CSS code and paste it just before the ]]></b:skin> or </style> tag.

#HTML20
.bsdbox-info h4 {
  background: transparent;
  position: relative;
  padding: 0;
  margin: 0;
  border: 0;
  text-align: center;
  font-size: 110%
}

.bsdbox-img {
  position: relative;
  max-height: 135px;
  overflow: hidden
}

.bsdbox-img img {
  max-width: 100%;
  width: 100%;
  transition: all .6s;
}

.bsdbox-img:hover img {
  transform: scale(1.2) rotate(-9deg)
}

.bsdbox-img:before {
  content: '';
  background: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  transition: all .3s
}

.bsdbox-img:hover:before {
  background: rgba(0, 0, 0, 0.5);
}

.joinfloat-img {
  width: 56%;
  position: absolute;
  top: 36%;
  bottom: 36%;
  left: 22.6%;
  z-index: 4
}

.bsdbox-float {
  text-align: center;
  display: table;
  width: 100%;
  height: 100%
}

.bsdbox-float a {
  background: transparent;
  color: #37B185;
  padding: 8px 14px;
  z-index: 2;
  display: table-cell;
  width: 100%;
  font-size: 90%;
  text-transform: uppercase;
  vertical-align: middle;
  border: 1px solid #37B185;
  border-radius: 4px;
  transition: all .3s
}

.bsdbox-float:hover a {
  background: #37B185;
  color: #fefefe;
  border-color: transparent;
}

.bsdbox-float a i {
  font-weight: normal;
  margin: 0 6px 0 0
}

.bsdbox-wrap {
  display: block;
  margin: 14px auto;
  position: relative;
}

.bsdbox-wrap .bsdextend {
  width: 100%;
  display: block;
}

.bsdextend {
  text-align: center;
  font-size: 17px
}

.bsdextend .bsdbox-icon {
  display: inline-block;
  border: 0;
  margin: 0;
  padding: 0;
  width: 32%;
}

.bsdextend .bsdbox-icon a {
  background: #768187;
  display: inline-block;
  font-weight: 410;
  color: #fefefe;
  padding: 0 12px;
  line-height: 32px;
  border-radius: 4px;
  font-size: 11px;
  width: 100%;
}

.bsdextend .bsdbox-icon i {
  font-family: fontawesome;
  margin: 0 4px 0 0
}

.bsdbox-icon.facebook a {
  background: #3b5998
}

.bsdbox-icon.twitter a {
  background: #19bfe5
}

.bsdbox-icon.circle a {
  background: #d64136
}

.bsdbox-icon.facebook a:hover,
.bsdbox-icon.twitter a:hover,
.bsdbox-icon.circle a:hover {
  background: #415471
}

.bsdextend .bsdbox-icon:hover a,
.bsdextend .bsdbox-icon a:hover {
  color: #fefefe;
}

.bsdbox-info {
  margin: 11px 0 0 0;
  font-size: 12px;
  text-align: center;
}

.bsdbox-info p {
  margin: 6px 0
}

.bsdbox-info h4 {
  position: relative;
  margin-bottom: 11px;
  font-size: 15px;
  text-transform: uppercase;
  color: #37B185;
  font-weight: 600
}

.bsdbox-info h4 span {
  position: relative;
  display: inline-block;
  padding: 0 11px;
  margin: 0 auto;
}

.bsdbox-info h4:before,
.bsdbox-info h4:after {
  position: absolute;
  top: 52%;
  overflow: hidden;
  width: 50%;
  height: 1px;
  content: '\a0';
  background-color: rgba(0, 0, 0, 0.07);
}

.bsdbox-info h4:before {
  margin-left: -50%;
  text-align: right;
}

Step 7. Now copy the below HTML code and paste it between <body> - </body> tag.

<b:widget id='HTML20' locked='false' title='Join us' type='HTML' visible='true'>
        <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
 <div class="widget-content">
  <div class="author-sidebar">
    <div class='inner_wrapper'>
      <div class='bsdbox-img'>
        <img alt='Bloggersstand' class='img-responsive' height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTWieRh2vs7kexLprI5HFgsXKk_Ub_sybZeuc36dBJXS2ffz55QD4bx8AbWAPL8vgfAaJfa8eTzY35qNapd1xWU-x0SoMuxFM57UpBh_cCc0S-rIAUgbmJkIGhrolfmJ5J_clPY194GEE/s1600/subscribe+to+bloggersstand+feed.jpg' title='Bloggersstand' width='300' ></img>
        <div class='joinfloat-img'><span class='bsdbox-float'><a href='https://www.blogger.com/follow-blog.g?blogID=8771880403313863692' rel='nofollow' target='_blank' title='Join Our Site'><i class='fa fa-laptop'></i> Join Our Site</a></span></div>
      </div>
    </div>
    <div class='bsdbox-info'>
      <h4><span>Bloggersstand.com</span></h4>
      <p>Micro Blogging + SEO Tips + Make Money</p>
    </div>
    <div class='bsdbox-wrap'>
      <ul class='bsdextend'>
        <li class='bsdbox-icon facebook'>
          <a href='https://www.facebook.com/bloggersstand' target='_blank' title='Follow us on Facebook'><i class='fa fa-facebook fa-fw'></i>Follow Us</a>
        </li>
        <li class='bsdbox-icon twitter'>
          <a href='https://twitter.com/bloggersstand' target='_blank' title='Follow us on Twitter'><i class='fa fa-twitter fa-fw'></i>Follow Us</a>
        </li>
        <li class='bsdbox-icon circle'>
          <a href='https://plus.google.com/+Bloggersstand' rel='nofollow' target='_blank' title='Follow us on Google+'><i class='fa fa-google-plus fa-fw'></i>Circle Us</a>
        </li>
      </ul>
    </div>
  </div>
</div>
</b:includable>
</b:widget>

Customization:
Remove social media profile name bloggersstand with your username.
To change inside title of the widget, please replace bloggersstand.com with your title.
To change the description or text inside the widget, replace blogging + ...</p> with your text.
To change the background image of the box style widget ,replace the image url.

Step 8. Now Save your template..Done !