Cara Membuat Author Box Keren Seperti Jagoandzgn di Bawah Postingan Blog
Agustus 23, 2020
Hallo sobat blogger. Sesui dengan judul postingan saya akan berbagi tutorial cara membuat author box keren di bawah postingan. Author Box adalah sebuah widget yang berfungsi menampilkan foto profil seorang penulis artikel, deskripsi dan media sosial pengarang. Jadi pengunjung blog kita bisa mengetahui siapa penulis artikel dalam blog itu. Setiap blog biasanya memiliki author box yang berbeda - beda.
Saya mencoba memasang author box di template VioMagz seperti di bawah postingan ini. Ok langsung saja ikuti langkah - langkah dibawah ini.
Cara Membuat Author Box Keren di Bawah Postingan Blog
1. Buka blog kalian
2. Pilih tema lalu pilih edit HTML
3. Cari kode ]]></b:skin> jika sudah ketemu salin kode di bawah ini dan letakan tepat di atas ]]></b:skin>
/* Kotak Author Box */
.bape-Author{text-align:center;margin-top:20px;}
.bape-Author .top{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:flex-start;justify-content:center;}
.bape-Author .bottom{text-align:center;margin-top:-35px;padding:45px 15px 15px;background: #1589E3;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;}
.bape-Author img{width:50px;height:50px;border:5px solid #fff;border-radius:100px;}
.bape-Author .author-name{font-size:20px;font-weight:700;margin-bottom:7px;}
.bape-Author .author-name a{color:#ffffff;font-weight:bold}
.bape-Author .author-desc {color: #eaeaea;overflow: hidden;line-height: 1.6em;}
.bape-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;}
.bape-Author .author-desc a:hover {color:#000000;}
.bape-Author .author-desc li {display : inline-block;padding-top: 5px;}Merubah warna background background: #1589E3; ubah sesuai keinginan kalian.
4. Cari kode <b:includable id='postsharebutton' var='post'> jika sudah ketemu salin kode di bawah ini dan letakan tepat di bawah <b:includable id='postsharebutton' var='post'>
<div class='bape-Author'>
<div class='top'>
<img itemprop='image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipSkHLRXGua1-UKZtd1mNNS_kXLQNj7uWfKKZAZ2F_ncIftv-snpv0afbPcdjwNCWRFfZlAFRDd__0EwdHI-lYZHGUGUVxUjnDMSQpTeU5TqnVFap3YB7enkfIysdvJeCGnp2HKcGTzcd-/s1600/DEFAULT_USER_PROFILE_LOGO.png' width='90px'/>
</div>
<div class='bottom'>
<div class='author-name'>
<a href='https://www.blogger.com/follow.g?blogID=6479446256188251383' rel='author' title='Nama Anda'>
<span itemprop='name'>Nama Anda</span>
</a>
</div>
<div class='author-desc'>Seseorang yang ingin sukses. Bayangin aja dulu kenyataannya belakang.
<br/>
<li><a href='https://www.facebook.com/108385560784010' title='Facebook'>Facebook</a></li>
<li><a href='https://wa.me/+6287710266952' title='WhatsApp'>WhatsApp</a></li>
<li><a href='https://www.instagram.com/namaanda/' title='Instagram'>Instagram</a></li>
</div>
</div>
</div>5. Simpan template kalian dan selesai.
• Ganti url gambar ini dengan url gambar milik kalian https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipSkHLRXGua1-UKZtd1mNNS_kXLQNj7uWfKKZAZ2F_ncIftv-snpv0afbPcdjwNCWRFfZlAFRDd__0EwdHI-lYZHGUGUVxUjnDMSQpTeU5TqnVFap3YB7enkfIysdvJeCGnp2HKcGTzcd-/s1600/DEFAULT_USER_PROFILE_LOGO.png.
• Ganti ID blog dan Nama blog kalian https://www.blogger.com/follow.g?blogID=6479446256188251383 rel='author' title='Nama Anda'>
• Untuk Bio ganti dengan Bio kalian dan
Ganti Facebook , Whatsapp , dan Instagram dengan milik kalian.
Itulah sedikit tutorial yang saya berikan cara membuat author box di blog yang keren. Jika artikel ini bermanfaat jangan lupa share ke temen kalian siapa tahu dia juga membutuhkan. Selamat mencoba!
