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.

RIO ANGGA RISMAWAN

Saya seseorang yang lebih suka menulis dan membagikan apa yang di tuliskan agar dunia tahu.

Facebook

WhatsApp

Instagram

BAGIKAN ARTIKEL INI KEPADA TEMAN KALIAN