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 yang akan tampil di setiap postingan, hal ini akan membuat pengunjung lebih mengetahui lagi tentang si penulis artikel, ya walaupun singkat, kita secara tidak langsung akan membuat si pengunjung untuk membacanya, nah berikut adalah cara memasang multi author box di bawah postingan blog nya.

Cara Memasang Multi Author Box di Bawah Postingan Blog

1. Buka Blogger seperti biasa.
2. Klik Template, lalu klik Edit HTML.
3. Cari kode.

<data:post.body/>

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

<data:post.body/>

5. Biasanya terdapat lebih dari satu.

<data:post.body/>

6. Kemudian copy code di bawah ini, dan letakan 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 di bawah ini sebelum/di atas : </style> atau ]]></b:skin>

Kode CSS :

/* 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;}

8. Terakhir, klik "Simpan".

Jika Author Box masih belum muncul di bawah postingan, masuk ke menu tata letak, kemudian pada blog posts klik edit, lalu centang "Tampilkan Profil Penulis", selesai. Demikianlah Cara Memasang Multi Author Box di Bawah Postingan Blog, semoga dapat bermanfaat.