Cara Memasang Multi Author Box Di Bawah Postingan Blog

Cara Memasang Multi Author Box Di Bawah Postingan Blog - Kali ini nyamukkurus akan memberikan Tutorial untuk membuat multi author box di bawah postingan blog, dengan membuat Author Box di setiap postingan blog akan membuat pengunjung lebih tau lagi tentang si Admin pada blog tersebut, ya walaupun singkat, kita secara tidak langsung akan membuat pengunjung membaca nya, dan bisa juga membuat pengunjung balik lagi ke blog kita, dengan membuat multi author box dibawah postingan/artikel blog akan memberikan tampilan yang sedikit berbeda seperti tambahan media sosial agar pengunjung bisa tau langsung facebook/instagram/twitter si pembuat artikel (Admin), nah Cara Memasang Multi Author Box Di Bawah Postingan Blog bisa kamu lihat pada gambar dibawah ini, artikel ini saya dapat dari twistedshape ataupun billy-art.

Cara Memasang Multi Author Box Di Bawah Postingan Blog

Lantas bagaimana cara membuat multi author box dibawah postingan blog ? berikut ini cara nya :

1. Buka blogger seperti biasa.
2. Klik Template lalu klik edit html.
3. Cari kode.

<data:post.body/>

4. Gunakan Ctrl+F agar memudahkan mencarinya, kode :

<data:post.body/>

5. Biasanya ada lebih dari satu, pada template yang saya pakai (evomagz hasil redesign) terdapat 3 kode.

<data:post.body/>

6. Jadi pilih yang terakhir, kemudian copy code dibawah ini dan letakan dibawah/tepat setelah kode

<data:post.body/>

Kode :

<b:if cond='data:blog.pageType == "item"'>
<div class='authorboxwrap'>
<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'><data:post.author/></a></h4>
<p>
<data:post.authorAboutMe/>
</p>
<div class='authorsocial'>
<a class='img-circle1' href=' ' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<a class='img-circle3' href=' ' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/></a>
<a class='img-circle2' href=' ' rel='nofollow' target='_blank'><i class='fa fa-facebook'/></a>
<div class='clr'/>
</div>
</div>
</div>
</div>
<div style='clear:both'/>
</b:if>

7. Setelah itu letakan kode dibawah ini sebelum/diatas :

</style>

Kode :

/* CSS Multi Author Box */
.authorboxwrap{background:#FFF;margin:0 auto 20px;padding:20px;overflow:hidden;border:1px solid #fff;}
.avatar-container {float:left;margin-right:20px;}
.avatar-container img{width:110px;height:auto;}
.author_description_container h4{font-weight:700;font-size:16px;display:block;margin:0;margin-bottom:2px}
.author_description_container h4 a{color:#ef4824}
.author_description_container h4 a:hover{color:#404040}
.author_description_container p{margin:0;color:#888;font-size:95%;margin-bottom:8px}
.authorsocial a{display:inline-block;text-align:center;margin-right:10px}
.authorsocial a i{font-family:Fontawesome;width:20px;height:20px;line-height:20px;padding:5px;display:block;opacity:1;border-radius:2px;transition:all .3s;}
.authorsocial a:nth-child(1) i {background:#2d609b;color:#fff;}
.authorsocial a:nth-child(2) i {background:#eb4026;color:#fff;}
.authorsocial a:nth-child(3) i {background:#2d609b;color:#fff;}
.authorsocial a:hover:nth-child(1) i,.authorsocial a:hover:nth-child(2) i,.authorsocial a:hover:nth-child(3) i {opacity:0.90;}

Atau :

]]></b:skin>

8. Lalu klik "Simpan".

Bila Author Box belum muncul dibawah postingan blog kamu, masuk saja ke menu tata letak kemudian pada blog posts klik edit, lalu centang "Tampilkan Profil Pengarang Di Bawah Pos", kemudian klik simpan. Demikian lah Cara Memasang Multi Author Box Di Bawah Postingan Blog, semoga dapat bermanfaat.