Cara Mengganti Tampilan Author Box Template Viomagz Menjadi Stylish

Hello sobat blogger, kembali lagi dengan saya, pada kesempatan kali ini saya akan membagikan sebuah tutorial Cara Mengganti Tampilan Author Box Template Viomagz Menjadi Stylish.

Nah, buat anda yang bosen dengan tampilan author box lama, anda bisa mengganti tampilan author box tersebut menjadi lebih keren dan menarik.

Untuk mengganti nya pun cukup mudah, karena tidak mengubah banyak element pada kode HTMLnya, disini saya akan menambahkan tombol button follow agar terlihat lebih menarik, selebihnya saya ubah dibagian CSSnya.

Jika anda tertarik untuk mengubahnya, anda bisa simak dibawah ini untuk menerapkan nya.

Cara Mengganti Tampilan Author Box Template Viomagz Menjadi Stylish

Sebelum anda memulai, alangkah baiknya Anda melakukan backup template terlebih dahulu, agar terhindar dari kesalahan saat melakukan nya.

Jika sudah backup template, anda bisa mengikuti dibawah ini untuk menerapkan nya.

Langkah 1 : masuk ke menu TEMA > Edit HTML.

Langkah 2 : cari kode yang ada 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>

Langkah 3 : jika sudah ketemu, maka langkah selanjutnya anda ganti kode tersebut dengan kode yang ada dibawah 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=3160075017628299303' 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>

Jangan lupa ganti kode yang saya tandai warna biru, dengan kode id blog anda.

Langkah 4 : selanjutnya anda cari kode CSS dibawah ini, setelah ketemu kode nya lalu anda hapus semua kode tersebut.

/* 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); }

Langkah 5 : Setelah itu anda ganti kode tersebut dengan kode yang ada dibawah ini.

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

Langkah 6 : Kemudian anda simpan dan Selesai.

Akhir Kata :

Sampai disini tutorial Cara Mengganti Tampilan Author Box Template Viomagz Menjadi Stylish, jika ada pertanyaan bisa komentar dibawah ini.

SHARE POSTS

Facebook

Twitter

Pinterest

More

Less

E-Mail

WhatsApp

Telegram

Line