Cara Memasang Multi Author Box Di Bawah Postingan

Deny Listianto    30 Maret 2018

Author Box adalah salah satu kotak yang dimana kotak itu ada Profil si pengarang di sebuah blog, biasanya terletak di bagian bawah artikel blog.



Author Box biasanya berisikan Foto dan Nama Pengarang, Deskripsi atau semboyan Pengarang, dan juga sosial media yang Pengarang Blog miliki.

Dengan adanya Author box anda bisa memperkenalkan diri dan juga mempromosikan diri anda sendiri di blog anda sendiri.

Nah, untuk kamu yang Juga hendak memasang Author Box tersebut, disini saya bakal berbagi Author Box itu dengan Style yang mungkin unik untuk kamu pasang di blog.

Berikut tampilan author box yang akan saya bagikan

Cara Memasang Author Box Keren Di Bawah Postingan

1. Buka dasbord Blogger sobat.
2. Pinda ke menu Tema Lalu Edit HTML.
3. Pastekan Kode di bawah ini sebelum Kode ]]></b:skin> atau </style>.

/* CSS Multi Author Box */
.authorboxwrap{border-radius:2px;margin:20px auto;display:block;position:relative;padding:35px 25px 25px;overflow:hidden;border:1px solid rgba(0,0,0,0.08)}
.authorboxwrap:before{content:'';display:block;width:100%;height:88px;border-bottom:1px solid rgba(0,0,0,0.08);position:absolute;top:0;left:0;right:0;z-index:0}
.avatar-container{margin-right:20px;display:inline-block;float:left;position:relative;z-index:1}
.avatar-container img{background:#fff;width:100px;height:auto;border-radius:99em;z-index:1;padding:7px;border:1px solid rgba(0,0,0,0.08)}
.author_description_container{z-index:1;position:relative;display:inline-block;float:right;width:calc(100% - 125px)}
.author_description_container p{margin:0;margin-bottom:8px;font-size:15px;font-weight:400;line-height:1.6em;color:#aaa}
.author_description_container h4{margin-bottom:5px;font-size:20px;font-weight:700;padding:0;display:block;margin:10px 0 32px}
.author_description_container h4 a{color:#222}
.author_description_container h4 a:hover{color:#e15e50}
.authorsocial{margin:15px auto 0 auto}
.authorsocial a{display:inline-block;text-align:center;margin-right:10px}
.authorsocial a i{background:#2f3542;color:#fff;font-family:Fontawesome;width:40px;height:25px;line-height:25px;display:block;transition:all .3s;text-align:center;border-radius:2px}
.authorsocial a:hover i{background:#e15e50;color:#fff;}

4. Tambahkan kode HTML di bawah ini tepat setelah kode <data:post.body/>

<div class='authorboxwrap ripplelink'>
<div class='authorboxfull'>
<div class='avatar-container'>
<a href=''>
<img class='author_avatar' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='110' width='110'/>
</a>
</div>
<div class='author_description_container'>
<h4><a href='' rel='author noopener'><data:post.author/></a></h4>
<p>
<data:post.authorAboutMe/>       
</p>
<div class='authorsocial'>
<a class='img-circle1 ripplelink' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<a class='img-circle2 ripplelink' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter'/></a>
<a class='img-circle3 ripplelink' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
<div class='clr'/>
</div>
</div>
</div>
</div>

Berikutnya Untuk memunculkan deskripsi Penulis

Pastikan sobat sudah mengisi keterangan di profil google plus. Jika Belum Caranya buka halaman profil google plus sobat, klik tab about, buka Story, isi keterangan pada Introduction.

Setelah itu, kembali ke blogger, klik tata letak, klik edit pada widget posting blog dan tambahkan tanda centang pada tulisan Tampilkan Profil Pengarang Di Bawah Pos.

Kemudian Simpan template dan lihat hasil nya,

Nah itulah cara Membuat Author Box di bawah postingan blog, semoga artikel nya bisa membantu dan salam blogger.