Widget Media Sosial Join Our Blog

Layout > Add a Gadget> HTML/JavaScript

Kode

<style>
.bsd-container {
  position: relative;
  display: block;
  background: #fff;
  width: 92%;
  margin: 5% auto;
  padding:10px 10px 0 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  overflow: hidden;
}


/* Sosial Media Widget */
.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: #fff;
  padding: 8px 14px;
  z-index: 2;
  display: table-cell;
  width: 100%;
  font-size: 90%;
  text-transform: uppercase;
  vertical-align: middle;
  border: 1px solid #fff;
  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:0px;
  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
}

.extender .bsdbox-icon:hover a,
.extender .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;
}
</style>

<div class="bsd-container">
  <div class="sidebar_about_author">
    <div class='inner_wrapper'>
      <div class='bsdbox-img'>
        <img alt="Author Box" class="img-responsive" height="auto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0fOGFFdHm2PLShhXQWqghL7c3p-VHkiMFY7dXy0MHbb1fcFjGK1bnSbZwI-ihaq4MKwIIqaJ7lGbVYtOgAJcLZRj-ozP8plLGh1HfK5AkmAp8AiH_cU8gQ6f8Fp1VaYKRxPTWLR3I2D9r/s1600/google-seo-blogger.jpg" title="CB Blogger" width="100%" />
        <div class='joinfloat-img'><span class='bsdbox-float'><a href='https://www.blogger.com/follow-blog.g?blogID=379304390441658233' 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>cbblogger.com</span></h4>
      <p>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/' 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/' 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/' 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>