Cara Merubah Tampilan Author Box Viomagz

Cara Merubah Tampilan Author Box Pada Viomagz - Box Author merupakan salah satu hal yang diperlukan didalam template bogspot karna Author box berfungsi untuk memperkenalkan siapa pemilik blog tersebut dan biasanya tedapat di bawah postingan, contoh nya saja seperti di bawah postingan saya ini

Nah kali ini saya akan membuatkan tutorial Cara Merubah Tampilan Author Box Viomagz untuk Demo nya silahkan dilihat di bawah ini

Baiklah tanpa basa - basi langsung saja Cara Merubah Tampilan Author Box Viomagz dibawah ini 1. Silahkan masukan kode di bawah ini tepat di atas kode ]]</b:skin>

/* Auto Author Box by Arsadpedia */
.arsadpedia-Author{text-align:center;margin-top:20px;}
.arsadpedia-Author .top{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:flex-start;justify-content:center;}
.arsadpedia-Author .bottom{text-align:center;margin-top:-35px;padding:45px 15px 15px;border-radius:5px;background:teal;background-image: linear-gradient(110deg,rgba(255,255,255,0.1) 16%,rgba(255,255,255,0.1) 17%,rgba(255,255,255,0.05) 17%,rgba(255,255,255,0.05) 23%,transparent 8.5%,transparent 78%,rgba(255,255,255,0.05) 78%,rgba(255,255,255,0.05) 84%,rgba(255,255,255,0.1) 84%,rgba(255,255,255,0.1));}
.arsadpedia-Author img{width:50px;height:50px;border:5px solid #fff;border-radius:100px;}
.arsadpedia-Author .author-name{font-size:20px;font-weight:700;margin-bottom:7px;}
.arsadpedia-Author .author-name a{color:#ffffff;font-weight:500}
.arsadpedia-Author .author-desc {color: #eaeaea;font-family: 'Google Sans',sans-serif;overflow: hidden;line-height: 1.6em;font-size:14px}
.arsadpedia-Author .author-desc a {background: #ffffff;padding: 5px 8px;color: black;border-radius: 6px;font-family: 'Google Sans',sans-serif;font-size: 13px;!important: ;}
.arsadpedia-Author .author-desc a:hover {color:#0081ff;}
.arsadpedia-Author .author-desc li {display : inline-block;padding-top: 5px;}

2. Selanjutnya silahkan cari kode dibawah ini

<b:if cond='data:post.authorAboutMe'>...</b:if>

Kemudian ganti dengan kode di bawah ini

<b:if cond='data:post.authorAboutMe'>
<div class='arsadpedia-Author'>
<b:if cond='data:post.authorPhoto.url'>
<div class='top'>
<img itemprop='image' expr:src='data:post.authorPhoto.url' width='90px'/>
</div>
</b:if>
<div class='bottom'>
<div class='author-name'>
<a expr:href='data:post.authorProfileUrl' rel='author' expr:title='data:post.author'>
<span itemprop='name'><data:post.author/></span>
</a>
</div>
<div class='author-desc'><data:post.authorAboutMe/>
<br/>
<li><a href='https://www.facebook.com/' title='Facebook'>Facebook</a></li>
<li><a href='https://wa.me/' title='WhatsApp'>WhatsApp</a></li>
<li><a href='https://www.instagram.com/' title='Instagram'>Instagram</a></li>
</div>
</div>
</div>
</b:if>

Penutup

Demikian Tutorial pertama saya semoga bermanfaat sekian trimakasih

Berbagi :