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

0
How To Add 4 In One Box Social Media Widget In Blogger template
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

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='http://3.bp.blogspot.com/-7wKGgvEtb18/Vv__yOuo8cI/AAAAAAAAF0Q/o4Ve_2_7YkYeGBOqe-ZvR0cOwG-YVEbeg/s1600/subscribe%2Bto%2Bbloggersstand%2Bfeed.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 !
Learn trick to install add create four in one boxed style social media profile network widget in blogger template.Facebook twitter google plus profile sharing buttons in one gadget tool for blogspot template.
Hello folks, today in this article we are going to explain How to add 4 in one boxed style soci...
SUMMARY

Learn trick to install add create four in one boxed style social media profile network widget in blogger template.Facebook twitter google plus profile sharing buttons in one gadget tool for blogspot template.

You Might Also Like:

We hope this article helped you to learn How To Add 4 In One Box Social Media Widget In Blogger. If you have any question or any complication please don't hesitate to ask us.You can drop your message below in the comment box or you can Contact Us!. If you liked this article please join us on : Facebook | Twitter | Google+

SUBSCRIBE ARTICLES BY EMAIL

Post a Comment Blogger Disqus

0 Comments on "How To Add 4 In One Box Social Media Widget In Blogger" So Far
Out Of Topic Show Conversion CodeHide Conversion Code Featured Post

MARKUP FOR WRITING COMMENTS:
1. To Insert Code Length Use<i rel="pre">Code Here</i>
2. To Insert Short Codes Use<i rel="code">Code Here</i>
3. To Insert Quote Use<b rel="quote">Quote</b>
4. To Insert Image Use<i rel="image">Image URL</i>
5. To Insert Video Use<i rel="youtube">You Tube Url</i>

Note: You Can Also Convert Your Code Directly From The Conversion Box.
--------------------------------------------------------------------------------------------------------------------------------------------------------
Please drop your comment according with the topic and feedback with hyperlinks may be removed.Thank you.
Regards:
Team Bloggersstand