Cara Membuat Author Box Untuk Sidebar di Blogspot

Cara Membuat Author Box Untuk Sidebar di Blogspot - Membuat Author Box itu mudah-mudah sulit tergantung kita yang membuatnya dengan yang sabar.... He ngomong apa si ini Saya ngga jelas Hehehe.... Saya membuat Author Box ini terinspirasi dari Adhy Suryadi, yang menurut Saya Author Boxnya sangat bagus, sehingga Saya membuatnya di Blog ini. Berikut ini penampakannya....

Cara Membuat Author Box Untuk Sidebar di Blogspot :

• Langkah Pertama

Karena auhtor box ini menggunakan Font Awesome untuk menampilkan tombol-tombol sosial media, jadi pastikan Anda sudah menambahkan Font Awesome di blog Anda, saya anjurkan untuk menggunakan Font Awesome terbaru.

• Langkah Kedua

Silahkan simpan kode CSS ini di atas kode </head>

<style type='text/css'>

.sosmed-author,a.authorname,h2.author-title,a.authorname-url{display:block;text-align:center}

.authorbox{width:300px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQIbZ38Igv72c-axIHlLKQWIrIbQXqPEz2MPk12VEN3xgWSTS9rpmoPidY6yQHcxb_594G_LTDJEyvzbwlSqXvfC-E_Y68qwLBB4lrwRQo1soTAZ9U-duCcIFEGVG6Dfne5KyS3bIC8ew/s320/1872304m.jpg5) top center no-repeat #fff;border:1px solid #dedede;border-radius:3px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;padding:16px 0 0;margin:0 auto;}

h2.author-title{font-weight:bold;text-decoration:none;margin:0 auto 10px;font-size:22px;color:#fff!important}

.authorbox img{margin:55px auto 0;border-radius:100%;display:block}

a.authorname{margin:10px auto;font-weight:400;font-size:20px!important;text-decoration:none;}

a.authorname-url{margin:0 auto 10px;font-weight:400;font-size:16px!important;text-decoration:none;}

.sosmed-author li,.sosmed-author ul{list-style:none}

.sosmed-author ul{margin:0!important;padding:0!important}

.sosmed-author{margin:0 auto!important;padding:10px 0;background:#dfdfdf;border-top:1px solid #dedede}

.sosmed-author li{display:inline-block;margin-right:10px}

.sosmed-author li:last-child{margin-right:0}

.sosmed-author li a,a.authorname,a.authorname-url{color:#555!important;transition:all .4s ease-out}

.sosmed-author li a:hover,a.authorname:hover,a.authorname-url:hover{color:#111!important}

a.button-author{display:block;background:#4d90fe;border:1px solid #3079ed;color:#fff!important;font-weight:bold;font-size:16px!important;margin:10px 10px 0;padding:5px;text-align:center;border-radius:3px;transition:all .4s ease-out;text-decoration:none}

a.button-author:hover{background:#357ae8;border:1px solid #2f5bb7}

</style>

Catatan :

Silahkan anda ganti URL Image nya yang saya tandai dengan warna Kuning di atas dengan URL Image anda

• Langkah Ketiga

Silahkan simpan kode HTML di bawah ini di gadget sidebar HTML/JavaScript di Tata Letak.

<div class="authorbox">
  <h2 class="author-title">
Author
</h2>
  <img alt="author" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Cyr8q61gOF2Q6aUtFUgj2AGVMgiY05h2twpdvjZABlXTEpBXPfkhR6iq-8hm2RaiJJ5cQ-GsqcS7YKHWnM0hloOP4ZaO57IwpXekzP20DsZv1Xbfy2iabwwkTPqe1uPnyr3Or9CKWSA/s200/28059511_186897182075307_274476366400597665_n+%25281%2529.png" width="120" height="120" />
  <a class="authorname" href="https://plus.google.com/+MrIvanchan" rel="author" target="_blank" title="Mr . Ivanchan">Mr . Ivanchan</a>
  <a class="authorname-url" href="https://plus.google.com/+MrIvanchan" rel="author" target="_blank" title="google.com/+MrIvanchan">google.com/+MrIvanchan</a>
  <div class="sosmed-author">
    <ul>
          <li><a href="https://web.facebook.com/MrIvanchann/" target="_blank" title="Facebook" rel="nofollow"><i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i></a></li>
          <li><a href="https://twitter.com/MrIvanchann" target="_blank" title="Twitter" rel="nofollow"><i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i></a></li>
          <li><a href="https://plus.google.com/+MrIvanchan" target="_blank" title="Google+" rel="nofollow"><i class="fa fa-google-plus-square fa-2x" aria-hidden="true"></i></a></li>
      <li><a href="https://www.instagram.com/ivanchan___/" target="_blank" title="Instagram" rel="nofollow"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></li>
      <li><a href="https://www.youtube.com/channel/UCpAMtJ5znPrulFi0ko8Rqmg" target="_blank" title="Youtube" rel="nofollow"><i class="fa fa-youtube-square fa-2x" aria-hidden="true"></i></a></li>
    </ul>
    <div class="clear"></div>

<a class="button-author" href="https://www.blogger.com/follow.g?blogID=337447232187138573" target="_blank" title="Follow This Blog">Follow This Blog</a>

<a class="button-author" href="http://feeds.feedburner.com/MrIvanchan" rel="nofollow" target="_blank" title="Subscribe This Blog">Subscribe This Blog <i aria-hidden="true" class="fa fa-paper-plane"></i></a>

  </div>
</div>

Catatan :

Ganti yang tulisan Mr . Ivanchan dengan tulisan Nama Anda

Ganti yang warna Kuning dengan URL Foto Profil Anda
Ganti yang warna Merah dengan URL Google+ Anda

Ganti yang warna Hijau dengan URL Fanspage Facebook Anda

Ganti yang warna Biru dengan URL Twitter Anda

Ganti yang warna Orange dengan URL Instagram Anda

Ganti yang warna Ungu dengan URL Channel Youtube Anda

Ganti yang warna Merah dengan URL Follow Blog Anda
Ganti yang warna Biru dengan URL Rss Anda

• Langkah Keempat

Silahkan simpan javascript di bawah ini di atas kode </body>. Kode ini untuk men-defer photo profil, jika di blog Anda sudah ada kode ini maka kode berikut tidak perlu ditambahkan lagi.

<script>
//<![CDATA[
var imgDefer = document.getElementsByTagName("img");
for (var i = 0; i < imgDefer.length; i++) {
    if (imgDefer[i].getAttribute("data-src")) {
        imgDefer[i].setAttribute("src", imgDefer[i].getAttribute("data-src"));
    }
}
//]]>
</script>

Selesai... selamat mencoba.....

Regards,

Mr Ivanchan

BloggingTips & Triks

Share This :