Cara Membuat Author Box Keren di Blogger

Cara Membuat Author Box Keren di Blogger - Selamat datang di Imamkunblog dan pada kali kesempatan ini saya akan memberikan Tutorial Blogger dan membahas Cara Membuat Author Blog Keren dengan Sosial Button di Blogger.

Author Box atau Kotak Pemilik adalah sebuah tanda untuk memberitahukan kepada pembaca tentang pemilik atau penulis blog yang sedang pengunjung buka. Widget Author Box biasanya terletak di bagian sidebar dan dibawah postingan pada blog.

Pada artikel kali ini saya membahas Cara Membuat Author Box di Bawah Postingan artikel Blog. Cara membuat author box kali ini mirip dengan template buatan mas sugeng yaitu VioMagz.

Tetapi disini ada yang sedikit berbeda yaitu terdapat tombol sosial medianya juga seperti Facebook, Twitter dan Instagram sedangkan yang versi mas sugeng (Template Viomagz) tidak terdapat Social Button.

Dengan adanya Author Box ini dan dilengkapi dengan Social Button juga sangat bermanfaat supaya para pembaca dapat mengetahui Sosial Media si pemilik Blog dan dapat menghubungi si Author.

Untuk cara membuat author box dilengkapi social button kali ini sangatlah mudah anda tinggal mengikuti saja langkah-langkahnya dibawah ini dan untuk kode-kodenya sudah saya persiapkan. OK, Let's Start!!

Cara Memasang Author Box di Blogger

1. Login terlebih dahulu ke Blogger.com
2. Pada bagian Dashboard pilih Template > Edit HTML
3. Kemudian cari kode <data:post.body/> (Biasanya kode tersebut lebih dari satu kode jadi coba satu persatu)
4. Salin dan pastekan kode dibawah ini tepat dibawah kode <data:post.body/>

<!-- deskripsi anda -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='authorboxwrap'>
<div class='authorboxfull'>
<div class='avatar-container'>
<a href=''>
<img class='author_avatar' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='110' width='110'/>
</a>
</div>
<div class='author_description_container'>
<h4><a href='https://www.imamkunblog.com/' rel='author'><data:post.author/></a></h4>
<p>
  Hanya Seorang blogger pemula yang ingin terus belajar mengenai Dunia Teknologi Informasi dan Mencari ide-ide yang kreatif yang bisa di manfaatkan oleh banyak orang
<data:post.authorAboutMe/>      
</p>
<div class='authorsocial'>
&lt;a class=&#39;img-circle1&#39; href=&#39;https://www.facebook.com/MASUKKAN NAMA FB KAMU?ref=bookmarks&#39; rel=&#39;nofollow&#39; target=&#39;_blank&#39;&gt;&lt;i class=&quot;fab fa-facebook&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a class=&#39;img-circle2&#39; href=&#39;https://twitter.com/MASUKKAN NAMA TWITTER KAMU&#39; rel=&#39;nofollow&#39; target=&#39;_blank&#39;&gt;&lt;i class=&quot;fab fa-twitter&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a class=&#39;img-circle3&#39; href=&#39;https://www.instagram.com/MASUKKAN NAMA IG KAMU&#39; rel=&#39;nofollow&#39; target=&#39;_blank&#39;&gt;&lt;i class=&quot;fab fa-instagram&quot;&gt;&lt;/i&gt;&lt;/a&gt;
<div class='clr'/>
</div>
</div>
</div>
</div>
<div style='clear:both'/>
</b:if>
<!-- deskripsi akhir anda -->

5. Berikutnya kamu masukkan kode CSS dibawah ini tepat diatas kode ]]></b:skin> atau </style>

/* CSS Author Box */
.authorboxwrap{
    background: #fff;
    margin: 0px 0px -4px;
    padding: 15px;
    overflow: hidden;
 border: 1px solid #f0f0f0;
}
.avatar-container {float:left;margin-right:20px;}
.avatar-container img{width:110px;height:auto;}
.author_description_container h4{font-weight:700;font-size:16px;display:block;margin:0;margin-bottom:2px}
.author_description_container h4 a{color:#00b02a}
.author_description_container h4 a:hover{color:#333}
.author_description_container p{margin:0;color:#888;font-size:95%;margin-bottom:8px}
.authorsocial a{display:inline-block;text-align:center;margin-right:10px}
.authorsocial a i{font-family:Fontawesome;width:20px;height:20px;line-height:20px;padding:5px;display:block;opacity:1;border-radius:2px;transition:all .3s;}
.authorsocial a:nth-child(1) i {background:#2d609b;color:#fff;    border-bottom: 4px solid #273d6b;
    border-radius: 0px 15px 0px 15px;}
.authorsocial a:nth-child(2) i {background:#19bfe5;color:#fff;    border-bottom: 4px solid #2a7bab;
    border-radius: 0px 15px 0px 15px;}
.authorsocial a:nth-child(3) i {background:#eb4026;color:#fff;    border-bottom: 4px solid #902319;
    border-radius: 0px 15px 0px 15px;}
.authorsocial a:hover:nth-child(1) i,.authorsocial a:hover:nth-child(2) i,.authorsocial a:hover:nth-child(3) i {opacity:0.90;}

6. Terakhir tinggal kalian klik Save Template dan lihat hasilnya!! Jika salah posisi kamu bisa mencoba meletakkan kode pertama di bagian <data:post.body/> pertama, kedua atau ketiga didalam theme anda.

Baca Juga: Cara Memasang Web Push Notification di Blogger

Saya rasa untuk artikel kali ini cukup sampai disini dulu ya, demikianlarh artikel ini mengenai Cara Membuat Kotak Author Blog. Semoga dapat bermanfaat dan berhasil anda coba!!!

Happy Blogging!!

Share this post