Cara Modifikasi Tampilan Author Profil Box di Template Viomagz Menjadi Lebih Keren

Pada kesempatan kali ini saya akan membagikan sebuah tutorial bagaimana cara Modifikasi Tampilan Author Profil Box di Template Viomagz Menjadi Lebih Keren dan mempunyai nilai lebih dari pengunjung. Tepat pada kali ini saya kembali akan memberikan sebuah tutorial untuk custom template sejuta ummat yaitu viomagz.

Untuk tutorial kali ini tidak mengubah banyak element pada kode HTMLnya. Hanya cuma menambahkan satu buah follow button agar terlihat lebih padat. Selebihnya diubah di bagian CSSnya saja.

Modifikasi Tampilan Author Profil Box di Template Viomagz Menjadi Lebih Keren

1. Silahkan kamu login ke Blogger.com dengan menggunakan Gmail kamu.
2. Masuk ke menu TEMA > klik Edit HTML
3. Lalu, kamu cari kode author box seperti dibawah ini.

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

4. Kemudian silahkan kamu GANTI dengan kode HTML di bawah ini.

<b:includable id='postauthorbox' var='post'>
<!--Author Box Showdzgn.com-->
<b:if cond='data:post.authorAboutMe'>
  <div class='author-profile' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
  <div class='img-follow'>
  <b:if cond='data:post.authorPhoto.url'>
    <img expr:src='data:post.authorPhoto.url' itemprop='image' width='90px'/>
  </b:if>
  <a href='https://www.blogger.com/follow.g?view=FOLLOW&amp;blogID=1234567890123456789' rel='nofollow noopener' target='_blank' title='Ikuti Blog'>Follow</a>
  </div>
  <div class='writer'>
    <a class='writer-name' href='/' itemprop='url' rel='author' title='author profile'><span itemprop='name'><data:post.author/></span></a>
    <svg style="width:16px;height:16px" viewBox="0 0 24 24">
      <path d="M23,12L20.56,9.22L20.9,5.54L17.29,4.72L15.4,1.54L12,3L8.6,1.54L6.71,4.72L3.1,5.53L3.44,9.21L1,12L3.44,14.78L3.1,18.47L6.71,19.29L8.6,22.47L12,21L15.4,22.46L17.29,19.28L20.9,18.46L20.56,14.78L23,12M10,17L6,13L7.41,11.59L10,14.17L16.59,7.58L18,9L10,17Z" fill="#55acee"></path>
    </svg>
    <span itemprop='description'><data:post.authorAboutMe/></span>
  </div>
  </div>
</b:if>
</b:includable>

5. Perhatikan tanda yang saya beri highlight. Silahkan ganti dengan kode id blog anda.
6. Selanjutnya, Silahkan kamu ganti semua kode CSS author box bawaan template. Untuk kodenya seperti kode CSS berikut ini.

/* AUTHOR POST PROFILE By Expxo */
.author-profile {
    overflow: hidden;
    margin: 30px 0;
 line-height: 1.5;
}
.author-profile img {
    border: none;
    float: left;
    margin-right: 15px;
    border-radius: 46px;
}
.author-profile > span {
    font-size: 14px;
    opacity: 0.8;
}
.author-profile a.g-profile {
 font-weight: bold;
    color: $(body.link.hover.color);
    font-size: 18px;
    margin-bottom: 5px;
    display: inline-block;
}
.author-profile a.g-profile:hover {
 color: $(body.link.color);
}
.author-profile a.g-profile::after {
 content: "\f058";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    padding-right: 4px;
    color: $(body.link.color);
}

7. Ganti semua kode diatas menjadi seperti kode di bawah ini.

/* AUTHOR BOX EXPXO.NET */
.author-profile {
    overflow:hidden;
    background:#f4f4f4;
    border:1px solid #e1e1e1;
    padding:15px;
    margin:30px 0;
    line-height:1.5
}
.img-follow {
    float:left;
    margin-right:15px
}
.img-follow a {
    display:block;
    font-size:14px;
    text-align:center;
    border:1px solid $(body.link.color)
}
.author-profile .writer-name {
    font-weight:bold;
    color:$(body.link.hover.color);
    font-size:18px
}
.author-profile .writer-name:hover {
    color:$(body.link.color)
}
.writer > span {
    display:block;
    margin-top:5px;
    font-size:15px;
    opacity:0.8;
    overflow:hidden
}

8. Kalau sudah silahkan SIMPAN dan Selesai.

Untuk melihat hasil dari modifikasi author box ini, silahkan kamu klik tombol DEMO dibawah ini.

Bagaimana mudah bukan, untuk tutorial Modifikasi Tampilan Author Profil Box di Template Viomagz Menjadi Lebih Keren bagi kamu yang masih bingung dengan tutorial tersebut atau memiliki pertanyaan mengenai blogger silahkan kamu komen di kolom komentar dibawah artikel ini.