Modifikasi Tampilan Author Profil Box di Template Viomagz Menjadi Lebih Keren

Jagoandzgn.com - 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 umat 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 Jagoandzgn.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 Biru. 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 */
.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 JAGOANDZGN */
.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.
Seorang yang memiliki kepribadian yang menyendiri, tanpa mengenal dunia luar hanya melalui dunia online.
  • Facebook
  • WhatsApp
  • Instagram
  • Tampilkan Komentar
    Sembunyikan Komentar

    4 Komentar

    1. Kalau mindahin posisinya caranya gimana gan?

      BalasHapus
      Balasan
      1. Posisi apa bang ? Profil tau apanya bang

        Hapus
      2. iya bang posisi profil,caranya gimana ya?

        Hapus
      3. Caranya silahkan mas cari kode berikut ini (.jagoan-Author .top) lalu cari (justify-content: center;) Tinggal mas ubah mau kemana left ...terima kasih sudah berkunjung di jagoandzgn

        Hapus

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel