Membuat Author Box Dibawah Posting

Author box ini saya temukan di template mbak Arlina yang New Minima Colored, saya tertarik memasangnya pada template fastestmagz yang saya gunakan, dan akhirnya berhasil juga hanya dengan copy beberapa bagian aja, serta edit dikit jadi deh.

Baiklah untuk Anda yang menginkan memasang Author Box ini, bisa mengikuti tutorial singkat saya berikut ini, dan jika anda mengalami kesulitan dalam pemasangan widged ini bisa berkomentar dan akan saya bantu sebisa dan semampu saya.

Pertama tambahkan CSS berikut ini diatas </head> pada edit HTML.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
/* CSS Multi Author Box By Arlina Design */
.authorboxwrap {
  background:#f9f9f9;
  margin:-15px 0 25px 0;
  padding:20px;
  overflow:hidden;
  border:1px solid #e6e6e6;
}

.avatar-container {
  float:left;
  margin-right:20px;
}

.avatar-container img {
  background:#fff;
  width:90px;
  height:auto;
  padding:5px;
  border:1px solid #ccc;
}

.author_description_container {}

.author_description_container h4 {
  font-weight:600;
  font-size:16px;
  display:block;
  margin-bottom:10px;
}

.author_description_container h4 a {
  font-family:Oswald,arial;
  border-bottom:1px solid #0099cc;
  text-transform:capitalize;
  color:#333;
}

.author_description_container p {
  font-size:12px;
  line-height:1.6;
  margin-bottom:15px;
}

.authorsocial a {
  display:inline-block;
  text-align:center;
  float:left;
  margin-right:2px;
}

.authorsocial a i {
  width:30px;
  height:30px;
  padding:8px 9px;
  display:block;
  background:#E9E9E9 !important;
  color:#555;
}
</style>
</b:if>

Seperti biasa, saya pasti sisipkan tag kondisional agar hanya terpanggil dibagian posting saja sehingga tidak akan membebani pada bagian homepage. Dan selanjutnya Anda bisa mencari kode persis seperti berikut :

<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Dan tambahkan kode berikut ini tepat dibawah kode yang Anda temukan tadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='authorboxwrap'>
<div class='authorboxfull'>
<div class='avatar-container'>
<a expr:alt='data:post.author'>
<img class='author_avatar img-circle' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url' height='96' width='96'/></a></div>
<div class='author_description_container'>
<h4><a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
<span itemprop='name'><data:post.author/></span></a></h4>
<p>
Hanya seorang blogger biasa yang gemar menulis dan curhat tentang pengalaman hidup, serta belajar segala hal yang bermanfaat, dan terus memperbaiki diri.       
</p></div></div></div>
</b:if>
<!-- url : http://competitivgrace.blogspot.com
Author box Simpel By Arlina Deign
Share & Edited by Iwan Efendi -->

Selanjutnya Anda hanya perlu mengganti yang saya beri tanda merah itu dengan deskripsi yang anda inginkan. Sebenarnya dengan kode dari mbak Arlina telah di setting otomatis untuk deskripsinya, namun karena kadang nggak muncul, saya lebih memilih untuk memasukkannya secara manual sesuai keinginan saya sendiri.

Untuk yang lainnya sudah diset otomatis mengikuti profile g+ kita masing-masing. Setelah semuanya selesai Simpan Template lalu lihat hasilnya. Sangat mudah bukan? Semoga bermanfaat.