Widget HTML Atas

DESAIN BLOGGER | BERIKUT CARA MEMBUAT AUTHOR BOX DI TEMPLATE VIOMAGZ RESPONSIVE

DESAIN BLOGGER | BERIKUT CARA MEMBUAT AUTHOR BOX DI TEMPLATE VIOMAGZ RESPONSIVE


Tutorial ini khusus dibuat untuk pengguna template viomagz yang ingin mengubah tampilan author box defaultnya agar terlihat lebih bergaya.

Hari ini saya kembali akan memberikan tutorial untuk custom template sejuta ummat yaitu viomagz.

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 awalssh.my.id-->
<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 ANKA 1234567890123456789,GANTI DENGAN ID BLOG AGAN

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 A.AWAL */
.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.

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.

Tidak ada komentar untuk "DESAIN BLOGGER | BERIKUT CARA MEMBUAT AUTHOR BOX DI TEMPLATE VIOMAGZ RESPONSIVE"

Berlangganan via Email