TUTORIAL : Name Card (Author)

Bahagian Author ni selalu jadi tarikan para viewers blog kita kan? Contoh macam Zati punya sidebar Author. Follow tuto kat bawah ni

1. Layout > HTML/Javascript > Copy Paste code bawah ni

<style type="text/css">
.zaticard {
max-width: 300px;
margin: auto;
text-align: center;
}
.zatititle {
color: #666;
font-size: 14px;
}
zatibutton {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: #807175;
text-align: center;
letter-spacing:1px;
cursor: pointer;
width: 100%;
font-size: 14px;
}
zatibutton:hover, a:hover {
opacity: 0.7;
}
</style>
<div class="zaticard">
<img src="URL GAMBAR PROFILE" alt="Author" style="width:100%" />
<h1>NAMA</h1>
<p class="title">TEKS PENGENALAN </p>
<div style="margin: 24px 0;">
    <a href="URL FB"><img src="https://i.imgur.com/VLpcSyi.png"/></a>
    <a href="URL TWITTER"><img src="https://i.imgur.com/6akDG1V.png"/></a> 
    <a href="URL IG"><img src="https://i.imgur.com/ZvCn9OQ.png"/></a> 
    <a href="URL GOOGLE PLUS"><img src="https://i.imgur.com/3CaBRec.png"/></a>
    <a href="URL WHATSAPP"><img src="https://i.imgur.com/bsAGixb.png"/></a>
  </div>
  <zatibutton><a href="URL EMAIL" target="_blank">Send Email</a></zatibutton>
</div>

2. Korang boleh ubah apa yang patut mengikut citarasa sendiri.