Memasang Author Box Social Widget di Sidebar Blogger

Apa itu Author Box Social Widget. Author box social widget adalah link profil dan media sosial di sidebar blogger atau website.

Author box social widget ini berisi link follow blog, media sosial facebook, instagram dan twitter.

Cara Memasang Author Box Social Widget di Sidebar

Cara pemasangan pun sangat mudah tanpa harus mengedit ataupun menghapus isi pada template.

1. Klik Layout - Pilih HTML/Javascript

2. Salin kode dibawah ini:

<style>
.bsd-container{position:relative;display:block;background:#fff;width:100%;margin:5% auto;padding:0;border-bottom:1px solid rgba(0,0,0,0.1);overflow:hidden}
.bsd-container a {color:#fff!important}
.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:400;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;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: #d6249f;
  background: radial-gradient(circle at 1% 1%, #fdf497 1%, #fdf497 0%, #fd5949 1%,#d6249f 40%,#285AEB 90%)}
.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;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="cb blogger" class="img-responsive" height="auto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf81PvDo4zmg-lC0mhcVikxwcGwwNAiQG5goMfzq3HklSxEwx79S2JbnUaRkOWhOkpbshyphenhypheniIEM3BOg-ZSpKvhJ5QWLZ85whmgKZMWy-hBhgxa5JYoMFY5Ijtj1dlnB4ccXaJvygOdG8ehXL2f7Qe6pIudoUgafeUEJg8WvdwEn7ZPovnGtpm-TPs00Dp-h/s772/IMG_20240302_165034.png" title="Blogger" width="100%" />
        <div class="joinfloat-img"><span class="bsdbox-float"><a href="https://www.blogger.com/follow-blog.g?blogID=X596307012226247XXX" 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>situsanda.com</span></h4>
      <p><b>Blogging + SEO + Themes</b></p>
    </div>
    <div class="bsdbox-wrap">
      <ul class="bsdextend">
        <li class="bsdbox-icon facebook">
          <a href="https://www.facebook.com/link-anda" 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/link-anda" 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://instagram.com/link-anda" rel="nofollow" target="_blank" title="Follow us on Instagram"><i class="fa fa-instagram fa-fw"></i>Follow us</a>
        </li>
      </ul>
    </div>
  </div>
</div>

Ganti yang bertanda dengan kode Anda, jika sudah simpan template.