Cara Memasang Author Box Social Widget di Sidebar Blogger

Cara Memasang Author Box Social Widget di Sidebar Blogger

Cara Memasang Author Box Social Widget di Sidebar Blogger

media sosial

Author Box Social Widget yaitu link profil dan media sosial di Sidebar Blogger seperti gambar berikut ini:

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 hingga responsive dan cocok untuk sidebar ukuran 300 pixel. Desain aslinya ada di Codepen bagian 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 kode 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="Author Box" class="img-responsive" height="auto" src="https://1.bp.blogspot.com/-_YcSyRlw5uc/WfnYU6dMfXI/AAAAAAAApAc/DdaWaLIJnJQnuBH0gM7FYtDnM4rWmbSKwCPcBGAYYCw/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=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/contohblogcb/' 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 kode warna merah dengan milik Anda
4. Save!

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


Related Posts

0 Komentar untuk "Cara Memasang Author Box Social Widget di Sidebar Blogger"

1. Komentar spam, menyertakan Link Aktif dan Alamat Blog tidak akan muncul.
2. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *