Cara Membuat Widget Author Box Profile Blogger

Haii teman teman blogger, pada postingan ini saya akan membagikan bagaimana caranya membuat Author Box Profile Ala Anirocksite. Author Box Profile berfungsi sebagai pengenal atau bio seorang penulis yang ada diblog tersebut. Author Box Profile biasanya diletakkan di akhir postingan atau bawah postingan, jika kamu bosan dengan tampilan author box profile yang biasa biasa aja atau bawaan dari template tersebut, kamu dapat mengikuti Tutorial diArtikel ini.

Author box profile ini sangat banyak manfaatnya, dengan memasang author box profile pastinya blog akan terlihat lebih menarik dan lebih lengkap, para senior senior blog juga menggunakan author box profile agar para pembaca mengetahui siapa penulis dan pendiri dari situs blog tersebut, Selain itu menggunakan widget Author box profile akan terlihat professional oleh karena itu pentingnya memasang widget tersebut.

Sebenarnya tiap template sudah memiliki widget author box profile dan kamu hanya perlu memasangnya dan jika tampilan author box profile dilihat kurang menarik maka kita hanya perlu melakukan desain. Nah jika kamu ingin mendesain author box ini langsung saja Terapkan tutor dibawah ini.

Penting Untuk Melakukan Backup apabila terjadi kesalahan pada saat melakukan penyettingan HTML

Cara Membuat Author Box Profile

1. Pertama login dulu ke Blogger,
2. Masuk ke menu Tema > Edit HTML,
3. Copy kode CSS dibawah ini dan letakkan tepat diatas kode </b:skin>,

   .anirock-Author{text-align:center;margin-top:20px;border-top:2px solid #efefef;}
   .anirock-Author .top{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:flex-start;justify-content:center;}
   .anirock-Author .bottom{background-color: #ffcce6;text-align:center;margin-top:-35px;padding:45px 15px 15px;border-radius:5px}
   .anirock-Author img{width:50px;height:50px;border:5px solid #fff;border-radius:100px;}
   .anirock-Author .author-name{font-size:20px;font-weight:700;margin-bottom:7px;}
   .anirock-Author .author-name a{color:#333333;font-weight:500}
   .anirock-Author .author-name a:hover{color:#ff69b4;}
   .anirock-Author .author-desc {color: #656565;font-family: 'Google Sans',sans-serif;overflow: hidden;line-height: 1.6em;font-size:14px}
   .anirock-Author .author-desc a {background: #ffcce6;padding: 4px 8px;color: black;border-radius: 100px;box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);-webkit-box-shadow: 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);font-family: 'Google Sans',sans-serif;font-size: 13px;!important;}
   .anirock-Author .author-desc a:hover {color:#ff69b4;}
   .anirock-Author .author-desc li {display : inline-block}
   
4. Kemudian cari kode <b:includable id='postauthorbox' var='post'>, dan Hapus semua kode yang ada didalamnya, kodenya seperti dibawah ini (Untuk template selain Viomagz silahkan cari sendiri kode author boxnya),

   <b:includable id='postauthorbox' var='post'>
   <b:if cond='data:post.authorAboutMe'>
   <div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
     <b:if cond='data:post.authorPhoto.url'>
    <img expr:src='data:post.authorPhoto.url' itemprop='image' width='90px'/>
     </b:if>
     <div>
    <a class='g-profile' href='/' itemprop='url' rel='author' title='author profile'>
      <span itemprop='name'><data:post.author/></span>
    </a>
     </div>
     <span itemprop='description'><data:post.authorAboutMe/></span>
   </div>
   </b:if>
   </b:includable>
   

5. Setelah dihapus kemudian ganti dengan kode dibawah ini 

   <b:if cond='data:post.authorAboutMe'>
   <div class='anirock-Author'>
   <div class='top'>
    <b:if cond='data:post.authorPhoto.url'>
       <img expr:src='data:post.authorPhoto.url' itemprop='image' width='90px'/>
     </b:if>
   </div>
   <div class='bottom'>
   <div class='author-name'>
   <a href='https://www.blogger.com/profile/1601347072632005256' rel='author' title='Miradeviluke Rock'>
   <span itemprop='name'><data:post.author/></span>
   </a>
   </div>
   <div class='author-desc'><data:post.authorAboutMe/>
     <br/>
     <li><a href='https://www.facebook.com/rahman.arcadia' title='Facebook'>Facebook</a></li>
   <li><a href='https://www.twitter.com/@rahmannm3' title='Twitter'>Twitter</a></li>
     <li><a href='https://www.instagram.com/rahman.n19' title='Instagram'>Instagram</a></li>
   </div>
   </div>
   </div>
         </b:if>
   </b:includable>
   

   Pada teks yang saya beri highlighter pink ganti dengan punya kalian
6. Terakhir simpan template.

Untuk memunculkannya dibawah postingan masuk ke Tata Letak > Widget Posting Blog > Edit > Tampilkan Profil Pengarang Dibawah Post. 

Sekian tutorial bagaimana cara membuat author box profile, untuk DEMOnya kalian dapat melihat diakhir postingan ini. Jika kalian rasa tampilan author box yang saya bagikan ini ada yang kurang kalian dapat memodifikasinya menjadi semenarik mungkin.