Cara Memasang Multi Author Box Di Bawah Postingan

Author Box ialah salah satu kotak yang dimana kotak itu ada Profil si pengarang di sebuah blog, biasanya terletak di bab 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 dapat memperkenalkan diri dan juga mempromosikan diri anda sendiri di blog anda sendiri.

Nah, untuk kau yang Juga hendak memasang Author Box tersebut, disini aku bakal menyebarkan Author Box itu dengan Style yang mungkin unik untuk kau pasang di blog.

Berikut tampilan author box yang akan aku bagikan

Cara Memasang Author Box Keren Di Bawah Postingan

1. Buka dasbord Blogger sobat.
2. Pinda ke hidangan 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 instruksi HTML di bawah ini sempurna sesudah instruksi <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 sahabat 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 goresan pena Tampilkan Profil Pengarang Di Bawah Pos.

Kemudian Simpan template dan lihat hasil nya,

Nah itulah cara Membuat Author Box di bawah postingan blog, biar artikel nya dapat membantu dan salam blogger.
Sumber https://www.denylistianto.com/

Bagikan Artikel ini