Cara bikin Anuthor box profil keren responsive

Masbrio - Cara membuat tampilan anuthor box pada setiap bawah postingan artikel kita, dengan tampilan desain yang keren ini dan responsive sangat sekali yang memasang kode css ini.

Author Box profil keren responsive
Author box kali ini adalah kode css kotak pengarang profil degan tampilan desain yang menarik pada kotak pengarang author box ini, selain bisa di pasang foto bulat yang responsive tetapi juga bisa menulis bio tentang diri kita di kotak author box ini.

Cara memasang author box pada template

Silahkan login pada akun blogger kalian
Masuk di menu pengeditan Template
Dan cari kode ]]></b:skin> dan paste
kan kode di bawah ini tepat di atas kode ]]></b:skin>

/* Kotak Author */
.jagoan-Author{text-align:center;margin-top:20px;}
.jagoan-Author .top{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:flex-start;justify-content:center;}
.jagoan-Author .bottom{text-align:center;margin-top:-35px;padding:45px 15px 15px;background: #ff0000;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));border-radius: 5px;}
.jagoan-Author img{width:50px;height:50px;border:5px solid #fff;border-radius:100px;}
.jagoan-Author .author-name{font-size:20px;font-weight:700;margin-bottom:7px;}
.jagoan-Author .author-name a{color:#ffffff;font-weight:bold}
.jagoan-Author .author-desc {color: #eaeaea;overflow: hidden;line-height: 1.6em;}
.jagoan-Author .author-desc a {margin: 3px; padding: 5px 8px;color: #ffffff;border-radius: 3px;font-family: 'Google Sans',sans-serif;font-size: 13px;border: 1px solid;}
.jagoan-Author .author-desc a:hover {color:#000000;}
.jagoan-Author .author-desc li {display : inline-block;padding-top: 5px;}
/* Kotak Author */

Dan sekarang cari kode <div id='share-container bilah suda ketemu sekarang paste kan kode di bawah ini tepat di atas kode <div id='share-container

<div class="jagoan-Author">
<div class="top">
<img itemprop="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVdL1xC_yhFKAEO1FKariNWeBKno4CxMVH9mL15NVPI7Dg-QE0dy4zEq2XI4dDtcpZn_1YnBKZulX2dEdi6qFkIBs_D6hVCUN0RT-L2lc2dIBkyWRJnZLeE6uFpAVnamDC3NuvFfiBMgQ/s1600/DEFAULT_USER_PROFILE_LOGO-picsay.png" width="90px" />
</div>
<div class="bottom">
<div class="author-name">
<a href="https://www.blogger.com/follow.g?blogID=3847880655462421526" rel="author" title="Rio angga rismawan">
<span itemprop="name">RIO ANGGA RISMAWAN</span>
</a>
</div>
<div class="author-desc">
Saya seseorang yang lebih suka menulis dan membagikan apa yang di tuliskan agar dunia tahu.
<br />
<br />
<li><a href="https://www.facebook.com/rioangga2000" title="Facebook">Facebook</a></li>
<li><a href="https://wa.me/+6285366836683" title="WhatsApp">WhatsApp</a></li>
<li><a href="https://www.instagram.com/kosong" title="Instagram">Instagram</a></li>
</div>
</div>
</div>

Terus ganti link profil ini https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVdL1xC_yhFKAEO1FKariNWeBKno4CxMVH9mL15NVPI7Dg-QE0dy4zEq2XI4dDtcpZn_1YnBKZulX2dEdi6qFkIBs_D6hVCUN0RT-L2lc2dIBkyWRJnZLeE6uFpAVnamDC3NuvFfiBMgQ/s1600/DEFAULT_USER_PROFILE_LOGO-picsay.png dengan link profil kalian

Silahkan baca terlebih dahulu

Silahlan edit bio sesuka hati kalian
Ganti link facebook dengan link facebook kalian
Ganti Id blogger dengan id kalian
Ganti link intstragam dengan link kalian
Ganti nomer wa dengan nomer kalian

Author box profil responsive
kalau semua udah di baca dan di lakukan seperti yang saya tulis pasti 100% berhasil membuat author profil pada blog, desain yang di berikan author blog ini sangat lah keren dan responsive pasti nya.