Cara Memasang Author Box Social Widget di Sidebar Blogger

Baca Juga

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

Author Box Social Widget ini berisi link Follow Blog dan Media Sosial Facebook, Twitter, dan Instagram.

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 memasangnya sangat mudah, tidak mesti edit template.

1. Klik Layout > pilih HTML/JavaScript
2. Copas kode 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="Author Box" class="img-responsive" height="auto" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL5Q0o_RcIw9pCEI-CssMh3HQx2axFYWEJxdbdYqhwDHVtUkIwCjacSgyxrLuVVLar8cO-6W9uYcvORyRfNLhAhwIO1Jntb_Vl1ik3sPZJhrAafUSmEtAvpQ1FJ_HyP5gZNZgG3E80L7Bn/s320/contoh-blog-seo-keren.JPG" alt='cb blogger' 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>contohblog.com</span></h4>
      <p><b>Blogging + SEO Tips + Make Money</b></p>
    </div>
    <div class='bsdbox-wrap'>
      <ul class='bsdextend'>
        <li class='bsdbox-icon facebook'>
          <a href='https://www.facebook.com/contohblog' 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://instagram.com/' 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 kode warna merah dengan kepunyaan Anda.

3.Save!

Style #2 Author Box Social Widget

Desain kedua seperti gambar berikut ini:

Cara memasangnya:

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjxvinXzKIm74olmvz0wzj0bf_Eug0Oy1NFZpG9Yoxln4wdm5yO039uNIsIYJFwshEwh9nZ_IU3LgiJVNc8zT2-Yr64E1iFvrOVoP5ga6tqGxlTlqUrVTtFW6zAVJQZ2Sh_xYKv1xT96w5/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!

Bonus!

Kotak Berlangganan Plus Media Sosial

Cara pasangnya sama seperti yang di atas.

Kodenya:

<style> .tbisubscribe { border: 1px solid #D3D3D3; padding: 8px; width:95%; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .tbimailbox,.tbisubmit{padding:5px} </style> <link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css" /> <div class="tbisubscribe"> <div style="color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;"> Get Free Updates in your Inbox</div> <div style="color: #666666; font-weight: bold; font: 11px Oswald, cursive; margin: 0px 0px 10px 15px;"> Receive Quality Posts Straight in your Inbox by submitting your Email ID below</div> <div style="margin: 10px 0 0 6px;"> <!--Subscription Box--> <br /> <form action="http://feedburner.google.com/fb/a/mailverify" class="emailform" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=contohblognih', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="margin: 0pt;" target="popupwindow"> <input name="uri" type="hidden" value="contohblognih" /> <input name="loc" type="hidden" value="en_US" /> <input class="tbimailbox" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" type="text" value="Enter your email..." /> <input alt="" class="tbisubmit" title="" type="submit" value="Subscribe" /> </form> </div> <div style="border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;"> Follow:</div> <div style="margin: -32px 0 0 85px;"> <!--Facebook URL--> <a href="http://www.facebook.com/cbblogger" target="_blank" title="Join us on Facebook"><img alt="facebook" src="http://3.bp.blogspot.com/-ChHaXU5VfIE/UJkIg5tptTI/AAAAAAAABEg/kzXjQ2QxEPo/s1600/facebook.png" /></a> <!--Twitter URL--> <a href="http://www.twitter.com/contohblogcb" rel="nofollow" target="_blank" title="Follow us on Twitter"><img alt="twitter" src="http://3.bp.blogspot.com/-aG-POFOiBHc/UJkIkayVTGI/AAAAAAAABE4/hhun4Hjaudw/s1600/twitter.png" /></a> <!--Google+ URL--> <a href="https://plus.google.com/106869251529186655236" rel="author" target="_blank" title="Follow us on Google+"><img alt="gplus" src="http://2.bp.blogspot.com/-gxpckVUYzWI/UJkIh5kHQ5I/AAAAAAAABEo/IlR9Bt-FVBE/s1600/googleplus.png" /></a> <!--LinkedIn URL--> <a href="http://www.linkedin.com/in/cbblogger" rel="nofollow" target="_blank" title="Follow us on LinkedIn"><img alt="linkedin" src="http://1.bp.blogspot.com/-c7m7fLXHewI/UJPaWsVTZ6I/AAAAAAAAA-M/uvdMMglb8fE/s1600/linkedin-circle-2.png" /></a> <!--RSS URL--> <a href="http://feeds.feedburner.com/contohblognih" rel="nofollow" target="_blank" title="Subscribe to RSS"><img alt="rss" src="http://4.bp.blogspot.com/-aN0dAN4mIno/UJkIje-dmSI/AAAAAAAABEw/gyK0zwpvjdE/s1600/rss.png" /></a> </div> </div> <!-- End -->

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

See the Pen BOXED style social media widget for blogger template by BloggersStand (@bloggersstand) on CodePen.