Cara Mengganti Tampilan Author Box Template Viomagz Menjadi Stylish

Cara-Mengganti-Author-Box-Di-Blog.png

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 MAS ARIF */ .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 :

Semoga dengan adanya artikel diatas, dapat memberi manfaat untuk anda semua.

2 Responses to "Cara Mengganti Tampilan Author Box Template Viomagz Menjadi Stylish"

  1. seperti ini toh ternyata caranya buat author box, nanti saya coba deh thks infonya mas, sukses terus

    ReplyDelete
    Replies
    1. Iyah mas cara mengganti nya seperti itu, terimakasih mas atas kunjungan nya, sukses terus mas.

      Delete

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel