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://3.bp.blogspot.com/-LHodvRlaSpo/WpDzfQ_dCcI/AAAAAAAAARg/KHS28BadClI48ynpUWAJF58ru9Z1KXHVACLcBGAs/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://4.bp.blogspot.com/-AyAJ2vFbKig/WpDxLSrs7vI/AAAAAAAAARU/B8D4bQycYbc5Whp0dR7YcKK8Lix5LhdfwCLcBGAs/s200/28059511_186897182075307_274476366400597665_n%2B%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

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://3.bp.blogspot.com/-LHodvRlaSpo/WpDzfQ_dCcI/AAAAAAAAARg/KHS28BadClI48ynpUWAJF58ru9Z1KXHVACLcBGAs/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://4.bp.blogspot.com/-AyAJ2vFbKig/WpDxLSrs7vI/AAAAAAAAARU/B8D4bQycYbc5Whp0dR7YcKK8Lix5LhdfwCLcBGAs/s200/28059511_186897182075307_274476366400597665_n%2B%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

3 komentar: