Cara Membuat Author Box Profile

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

   .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>
   

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. Jika kalian rasa tampilan author box yang saya bagikan ini ada yang kurang kalian dapat memodifikasinya menjadi semenarik mungkin.

Bagikan Artikel ini