Cara Memasang Author Box di Bawah Postingan Blog

Apa itu Author Box ? mungkin buat rekan-rekan newbie/baru didunia bloging istilah itu masih awam, tapi tetap saja penasaran ingin memasangnya sehingga mencari tutorialnya hingga tertuju ke blog ini. mari kita bahas apa itu Author Box dan langkah-langkah pemasangannya dibawah postingan artikel di blogger rekan-rekan.

Author Box adalah semacam widget yang biasanya berisi himbauan atau keterangan penulis tentang isi postingan yang terkait dan yang paling penting Author Box juga bisa berfungsi sebagai Permalink, Untuk melihat contoh demonya silakan lihat Author Box yang ada di blog ini (dibagian bawah akhir postingan), atau lihat screenshot gambar nya di bawah ini, dalam tutorial ini jika rekan-rekan mengikuti langkahnya dengan benar, akan mendapatkan Author Box yang persis dengan Author Box blog ini.

Berikut langkah-langkah pemasangan Author Box :

Login ke akun Blogger rekan-rekan.
Pilih Menu Template >> Edit HTML.
Cari kode ]]></b:skin> gunakakan Ctrl+F untuk mempermudah pencarian, letakan kode berikut diatas kode ]]></b:skin>.

<!-- Awal Author Box -->
.author-box {margin: 10px 0 5px 0;padding: 10px;background: linear-gradient(to bottom, white 5%, #F6F6F6 100%) repeat scroll 0 0 transparent;border: 1px solid #C5C5C5;border-radius: 3px 3px 3px 3px;box-shadow: 0 1px 0 0 white inset;overflow: auto width:640px;font-size:11px}
.author-box p {margin: 0;padding: 0;;font-size:12px;color: #444444;font-family:Helvetica;font-size: 11px;line-height: 20px}
.author-box img {background: #FFFFFF;float: left;margin: 0 10px 5px 0;padding: 4px;border: 1px solid #F1F1F1;}
<!-- Akhir Author Box -->

Cari kode <data:post.body/> gunakakan Ctrl+F untuk mempermudah pencarian, akan muncul lebih dari satu kode <data:post.body/> jadi pilih kode yang kedua kalau masih belum berhasil paste dibawah kode yang pertama, pada blog ini diletakan setelah kode yang kedua.

<!-- Awal Author Box --> 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='author-box'>
<p><img alt='Ferry Nurdianto' class='avatar avatar-70 photo' height='90' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjotdkU-SkCC6ZqQoY4rral36l0HS-rY2dw3FdnbQyvjTlQgTg5Ju-vXjz-DaP6X4ZJgryYG-GVKTckMRxCAg89WpdoSYs4PZlM9NfRcxTZdyQ13CjUde1LV0dxbmZCz4QF2bQZax6AlvvF/s251/Ferry+nurdianto.jpg' width='90'/><b>Ditulis Oleh :  <a href='https://plus.google.com/u/0/113537360821338990141' target='_blank'>Ferry Nurdianto</a></b>
</p><p>
Artikel <a expr:href='data:post.url'><data:post.title/></a>, diterbitkan oleh <data:post.author/> pada hari <data:post.dateHeader/>. Semoga artikel ini dapat menambah wawasan Anda. Oleh Admin, Sobat diperbolehkan mengcopy paste / menyebar luaskan artikel ini, namun anda harus meletakkan <blink><strong>link dibawah ini</strong></blink> sebagai sumbernya.
<textarea cols='71' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea> </p> 
</div> 
</b:if>
<!-- Akhir Author Box -->

Customasi agar sesuai dengan blog rekan-rekan :

Ganti kode warna "#F6F6F6" dengan warna yang sesuai dengan blog rekan-rekan.
Ganti ukuran "640px" dengan ukuran yang sesuai dengan lebar kolom Post blog rekan-rekan.
Ganti "Ferry Nurdianto" dengan nama atau inisial atau identitas pada blog rekan-rekan.
Ganti ukuran "height='90' width='90'" untuk mengatur tinggi avatar / foto pada Author Box.
Ganti alamat url "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjotdkU-SkCC6ZqQoY4rral36l0HS-rY2dw3FdnbQyvjTlQgTg5Ju-vXjz-DaP6X4ZJgryYG-GVKTckMRxCAg89WpdoSYs4PZlM9NfRcxTZdyQ13CjUde1LV0dxbmZCz4QF2bQZax6AlvvF/s251/Ferry+nurdianto.jpg" dengan alamat url avatar / foto rekan-rekan.
Silahkan sesuaikan kalimat deskripsi yang menurut rekan-rekan sukai.