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 */
.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 SHOWDZGN */
.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.
Tampilkan Komentar
Sembunyikan Komentar

2 Responses to "Modifikasi Tampilan Author Profil Box di Template Viomagz Menjadi Lebih Keren"

  1. gagal di edit mas.. untuk kode setelah /* AUTHOR BOX SHOWDZGN */

    ReplyDelete
    Replies
    1. Silahkan mas cek lagi artikelnya, Ganti Author Profil lama ke yang baru

      Delete

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar semua.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel