Modifikasi Tampilan Author Box Template Viomagz Agar Lebih Stylish

Hari ini saya kembali akan memberikan tutorial untuk custom template sejuta ummat yaitu viomagz. Sebelum itu saya mohon maaf nih buat yang requestnya belum di buat, soalnya kondisi saya belum sehat dan hanya bisa kuat se-jam saja di depan komputer, jadi harap maklum.

Sesuai request, kemarin ada pembaca idnxmus yang minta untuk buat agar author box default pada template viomagz di ubah agar mirip dengan author box yang terpasang di blog ini.

Setelah saya pikir-pikir, sepertinya gaya author box yang seperti itu kurang cocok untuk di terapkan pada template viomagz, jadi saya buat sedikit berbeda.

Saya tidak mengubah banyak element pada kode HTMLnya. Saya cuma menambahkan satu buah follow button agar terlihat lebih padat. Selebihnya saya ubah di bagian CSSnya.

Jika anda berminat menerapkan author box ini pada template viomagz anda, ikuti langkah - langkah berikut ini.

Modifikasi Tampilan Author Box Viomagz

Sebelum itu, sebaiknya backup dulu template anda untuk menghindari kesalahan edit saat mengikuti tutorial ini.

Selanjutnya masuk ke menu Dashboard Blog » Edit HTML, lalu cari kode author box viomagz seperti di bawah 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>

Kemudian ganti dengan kode HTML di bawah ini.

<b:includable id='postauthorbox' var='post'>
<!--Author Box idnxmus.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>

Perhatikan tanda yang saya beri highlight. Silahkan ganti dengan kode id blog anda.

Informasi :
Anda dapat menemukan id blog pada kotak url browser pada halaman dashboard blog.

Selanjutnya, ganti semua kode CSS author box bawaan template. Cari kode CSS berikut ini.

/* AUTHOR POST PROFILE */
.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);
}

Ganti semua kode tersebut menjadi seperti di bawah ini.

/* AUTHOR BOX IDNXMUS */
.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
}

Kemudian simpan template dan lihat hasilnya.

Untuk melihat hasil dari modifikasi author box yang saya buat, anda bisa melihat demonya dengan meng-klik tombol demo di bawah ini.

Memodifikasi tampilan author box template viomagz ini tergolong cukup mudah karena hanya menambahkan tombol follow blog saja di dalamnya. dan sedikit memperbaiki tampilan.

Untuk menerapkannya pun cukup mudah. Bagaimana menurut anda? apakah sudah terlihat senada dengan tampilan template?

Jangan lupa tinggalkan komentar anda dan share artikel ini jika di rasa bermanfaat.