Baiklah saya sangat semangat kali ini untuk memberikan informasi seputar blogging dan membagikan beberapa cara dan tips untuk membuat blog anda semakin keren lagi dengan tampilannya
Penjelasan
Oke sekarang saya akan membahas bagaimana cara untuk membuat atau mempercantik Author box yang saat ini mungkin anda sudah bosan dengan Tampilan Author box yang anda pakai saat ini
Cara Pembuatan
Untuk memperbagus atau mempercantik tampilan pada Author box anda, kita bisa memulai untuk langkah awalnya dulu, disimak baik baik yak
1. Login keakun Blogger kamu
2. Pergi ke Template kalau pilih edit HTML
3. Cari kode ]]></b:skin> dan letakkan kode CSS dibawah ini tepat diatasnya
/* Auto Author box by Icloudice */
.icloudice-Author{text-align:center;margin-top:20px;}
.icloudice-Author .top{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:flex-start;justify-content:center;}
.icloudice-Author .bottom{text-align:center;margin-top:-35px;padding:45px 15px 15px;border-radius:5px;background:#f80000;}
.icloudice-Author img{width:50px;height:50px;border:5px solid #fff;border-radius:100px;}
.icloudice-Author .author-name{font-size:20px;font-weight:700;margin-bottom:7px;}
.icloudice-Author .author-name a{color:#ffffff;font-weight:500}
.icloudice-Author .author-desc {color: #eaeaea;font-family: 'Google Sans',sans-serif;overflow: hidden;line-height: 1.6em;font-size:14px}
.icloudice-Author .author-desc a {background: #ffffff;padding: 5px 8px;color: black;border-radius: 6px;font-family: 'Google Sans',sans-serif;font-size: 13px;!important: ;}
.icloudice-Author .author-desc a:hover {color:#0081ff;}
.icloudice-Author .author-desc li {display : inline-block;padding-top: 5px;}4. Kemudian cari kode seperti ini
<b:if cond='data:post.authorAboutMe'><---sampai kode penutupnya----></b:if>5. Terakhir ganti semua kode tersebut dengan kode dibawah ini
<b:if cond='data:post.authorAboutMe'>
<div class='icloudice-Author'>
<b:if cond='data:post.authorPhoto.url'>
<div class='top'>
<img class='lazy' expr:data-src='data:post.authorPhoto.url' itemprop='image' src='data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' width='90px'/>
</div>
</b:if>
<div class='bottom'>
<div class='author-name'>
<a expr:title='data:post.author' href='https://Icloudice.com/p/about.html' rel='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/Icloudicepage' title='Facebook'>Facebook</a></li>
<li><a href='https://t.me/icloudice' title='WhatsApp'>Telegram</a></li>
<li><a href='https://www.youtube.com/UCi_8VC2-wGg46N-i3PvD5lw' title='Instagram'>YouTube</a></li>
</div>
</div>
</div>
</b:if>Simpan template dan coba lihat hasilnya
Baiklah segitu dulu yak, selebihnya agan bisa mempelajari template yang agan punyai agar agan bisa mengetahui setiap Tag tag yang terdapat pada Template, karena setiap template itu berbeda beda tata letak dan juga style nya
Dengan agan agan menambahkan sendiri beberapa tampilan melalui situs blog yang tersebar di internet, secara otomatis skill ataupun kemampuan agan akan bertambah, ya meskipun agak lama dan sedikit pusing, ya begitulah