Cara Memasang Author Box Social Widget di Sidebar Blogger

Cara Memasang Author Box Social Widget di Sidebar Blogger Cara buat blog itu- Cara Memasang Author Box Social Widget di Sidebar Blogger

Author Box Social Widget yakni link profil dan media umum di Sidebar Blogger menyerupai gambar berikut ini:

Cara Memasang Author Box Social Widget di Sidebar Blogger Cara buat blog itu- Cara Memasang Author Box Social Widget di Sidebar Blogger

Author Box Social Widget ini berisi link Follow Blog dan Media Sosial Facebook, Twitter, dan Google Plus. Kodenya sudah CB modif sampai responsive dan cocok untuk sidebar ukuran 300 pixel. Desain aslinya ada di Codepen bab bawah.

Cara Memasang Author Box Social Widget di Sidebar Blogger

Cara memasangny mudah, tidak mesti edit template.

1. Klik Layout > Add a Gadget
2. Copas instruksi ini:

<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="Cara Memasang Author Box Social Widget di Sidebar Blogger Cara buat blog itu- Cara Memasang Author Box Social Widget di Sidebar Blogger" class="img-responsive" height="auto" src="https://1.bp.blogspot.com/-_YcSyRlw5uc/WfnYU6dMfXI/AAAAAAAApAc/DdaWaLIJnJQnuBH0gM7FYtDnM4rWmbSKwCPcBGAYYCw/s1600/google-seo-blogger.jpg" title="Cara buat blog itu- Cara Memasang Author Box Social Widget di Sidebar Blogger" width="100%" />
        <div class='joinfloat-img'><span class='bsdbox-float'><a href='https://www.blogger.com/follow-blog.g?blogID=3596307012226247629' 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/cbblogger' 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/carabuatblogitucb/' 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/106869251529186655236/' 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>

3. Ganti instruksi warna merah dengan milik Anda
4. Save!

Beres. Demikian  Cara Memasang Author Box Social Widget di Sidebar Blogger. Good Luck and Happy Blogging! (www.carabuatblogitu.com).*


Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours