Baik sobat... Apakah sobat pernah berpikir untuk memiliki Author Box seo responsive yang keren? Kami tahu pasti anda semua menginginkan itu.
Tapi, pertanyaannya apakah anda mengetahui cara membuat Author Box seo responsive yang keren pada blog tepatnya dibawah postingan Blog anda seperti halnya yang saya punya dibawah postingan Blog saya ini.
Tetapi sebelum kelangkah membuat Author Box dibawah postingan blog saya ingin sedikit menjelaskan Apa fungsi Author Box pada Blog.
Cara Membuat Author Box Seo Responsive Pada Bloggerhttps://t.co/sULfW9mcr1— BlogManado (@BlogManado) November 17, 2019
"Author Box Pada sebuah Blog sangat penting, dengan itu seseorang yang mengunjungi website atau blog anda mengetahui siapa penulis dari artikel/postingan yang mereka baca, dan dengan adanya author box akan membuat seseorang menambahkan anda kelingkaran pertemanan media sosial mereka"- Fungsi singkat Author Box
Langsung saja saya akan memberikan sourch Codenya untuk membuat Author Box keren pada sebuah Blog. tetapi sebelumnya perhatikan tampilan Author Box yang akan anda buat.
keren seperti gambar di atas, Oke kalo begitu kita mulai dari sekarang.
Langkah 1# Login ke Blog Anda
Langkah 2# Pada dashboard Blog anda klik Tema
Langkah 3# Klik Edit HTML
Langkah 4# Cari kode ]]></b:skin> lalu tempatkan kode dibawah ini tepat di atasnya.
Fungsi dari kode CSS dibawah ini adalah untuk mengatur tampilan Author Box yang akan Anda Buat. Misalnya ukuran Author Box dan ukuran Image, Jadi sangat gampang untuk mengeditnya asalkan sobat paham sedikit HTML.
/*Professional Author Box CSS Code*/
.about-author {
width : 565px;
overflow : hidden;
margin:10px 0px;
border:0px;
background: #f2f2ef;
margin: 0 0 30px 0;
padding: 10px;
border: 1px solid #EAEDEF;
overflow: hidden;
color: #333333;
font-size: 14px;
font-family: inherit;
line-height: 24px;
}
.about-author img {
display: block;
width: 90px;
height: 90px;
margin: 0 1.2em 0 0;
float: left;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
-webkit-border-radius: 999em;
-moz-border-radius: 999em;
border-radius: 999em;
border: 2px solid #ddd;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.about-author h3{
font-family:georgia !important;
font-size:18px !important;
margin:9px 0px !important;
color:#666 !important;
border-bottom:2px solid #666 !important;
border-top:0px !important;
}
.about-author p {
margin:0px;
text-align:justify;
color:#666;
}
/*Professional Author Box CSS Code*/
Langkah 5# Cari kode <data:post.body/> lalu tempatkan kode dibawah ini tepat dibawahnya.
<div class='about-author'>
<img align='left' src='#URL IMAGE'/><p>Menjadi seorang Blogger adalah hal yang sulit saya jalani, dimana setiap hari saya harus selalu Memikirkan apa yang harus saya tuangkan dalam sebuah Kertas Digital dan itu adalah kewajiban yang harus dijalani sebagai sorang Blogger - Arman Basir</p><br/>
<p>Mari Terhubung:
<a href='#URL TWITTER' rel='nofollow' target='_blank'><font color='#00aced'>Twitter</font></a> |
<a href='#URL INSTAGRAM' rel='nofollow' target='_blank'><font color='#CD853F'>Instagram</font></a> |
<a href='#URL LINKEDIN' rel='nofollow' target='_blank'><font color='#00aced'>Linkedin</font></a> |
<a href='#URL YOUTUBE' rel='nofollow' target='_blank'><font color='#dd4b39'>Youtube</font></a> |
<a href='#URL FACEBOOK' rel='nofollow' target='_blank'><font color='#3b5998'>Facebook</font></a> |
<a href='#URL GOOGLE+' rel='nofollow'><font color='#dd4b39'>Google Plus</font>
</a></p>
</div>
Catatan
Url warna merah, ganti dengan url gambar sobat dan url medsos sobat. Untuk url warna hijau terserah sobat mau ruba sesuai warna yang sobat suka.
Sekian share artikel saya kali ini semoga kalian semua mempunyai Author box yang keren, lengkap dan berisi informasi yang jelas, supaya para pengunjung blog anda mengetahui identitas penulis dan memungkinkan mereka untuk menambahkan anda kelingkaran pertemanan mereka.
