Cara Menambahkan Author Box Dibawah Posting

Assalamualaikum w. w. Apa kabar sahabat minetutor ?  Setiap kita berkunjung ke sebuah situs atau blog, di akhir tulisan artikel ataupun tutorial tidak jarang kita jumpai terpampang data atau biografi dari sang penulis (author). Menurut sahabat yang budiman bagaimana, menarik atau tidak, menambah nilai seni blog atau tidak ..?  Bagaimana kira kira jika di blog kita juga ada yang seperti itu, are you interesting ??.  Sudah banyak blogger senior yang mengulas dan berbagi cara membuatnya, tinggal search dan muncul tuh teknik teknik teranyar,he2…Nah disini saya juga akan coba sedikit berbagi, walaupun masih newbie tapi dari hasil percobaan yang saya lakukan, Alhamdulillah, muncul seperti kotak author box di bawah posting ini.

Menambahkan Author box dibawah postingan

Adapun langkah yang perlu kita lakukan antara lain :

• Masuk ke dashboard blogger, pilih template, edit html dan jangan lupa expand template widgetnya di centang. Dianjurkan untuk mengback up template sahabat sebagai antisipasi jika terjadi kesalahan.
• Cari code berikut : <div class='post-footer-line post-footer-line-1'> , dugunakan f3 untuk mempercepat pencarian. Posisikan code berikut ini dibawah code tersebut :

contoh author box

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='author-box'>

<p><img alt='avatar' class='avatar avatar-70 photo' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj8GGN95cuJT0KsrIRjXJZyF2wHQw8glA0wACLst2kFeJvdrmEdont4TsqxDYsnu2F6kszOjJTejVVog5zKe0YWd0QRBGKBZXe8yNgxFaB_hzxWK_0usvqavOrLGZcv7qIwt6dOyPtbLeq/s1600/author.jpg ' width='70'/><a href='http://www.minetutor.blogspot.com/p/my-links.html' rel='author'>Tentang Author</a><br/>

Lulusan Teknik Pertambangan Unsri dan telah bekerja di beberapa perusahaan tambang di Indonesia. Tertarik dengan aktivitas blogging dan terus belajar hal hal baru. Terima kasih telah berkunjung ke blog ini, silahkan tinggalkan komentar sahabat<br/></p>

</div>

</b:if>

• Ganti code dengan warna merah dengan alamat/ url foto profile sahabat dan isikan keterangan tentang sahabat yaitu pada tulisan yang berwarna biru. Code yang berwarna kuning adalah link sisipan yang saya buat untuk link ke halaman google profile yang berguna untuk menampilkan author profile di search engine google. Baca juga postingan saya tentang “Menampilkan author profile di search engine google”. Silahkan ganti alamatnya dengan alamat page “about me” sahabat.
• Cari lagi code : ]]></b:skin> kemudian posisikan kode berikut di ATAS code tersebut  :

.author-box {

background: #add8e6;

margin: 20px 0 40px 0;

padding: 10px;

overflow: auto;

color:#191970;

font-family:fantasy,comic sans;

}

.author-box p {

margin: 0;

padding: 0;

}

.author-box a{

color:#ff4500;

}

.author-box img {

background: #FFFFFF;

float: left;

margin: 0 10px 0 0;

padding: 4px;

}

• Code yang berwarna hijau dapat sahabat modifikasi sesuai selera dan kreatifitas sahabat. Kemudian save template dan lihat hasilnya.

author box yang sudah terpasang dibawah posting

Demikianlah cara menambahkan author box dibawah posting, selamat mencoba dan semoga bermanfaat.