Cara Membuat Author Box Di Bawah Postingan / Artikel Blog

Author Box adalah kotak kecil yang biasanya dipasang di bawah artikel / postingan blog. Guananya untuk menggantikan widget About Me yang disediakan oleh google yang tampilannya biasa² saja. Berbeda dengan Widget About Me yang disediakan google, Widget Author Box lebih menarik, mudah diatur, dan bisa di modifikasi sesuai keinginan kita. Live Demo Widget Author Box bisa anda lihat di bawah postingan / artikel ini ( selama belum dihapus ).

Dengan tampilan yang bisa disesuaikan dengan keinginan sendiri, widget author box bisa diberi Background, Link, dll. Selain itu, kita bisa mengatur warna pinggiran, backgrund, warna huruf, jenis huruf, besar huruf,  dan hampir semua komponen yang ada di dalam Widget Author Box. Menarik bukan ???

Untuk memasang Widget Author Box di bawah setiap postingan / Artikel blog, silahkan ikuti panduannya berikut ini :

1. Pada halaman dasbor blog, klik tab RANCAGNAN

2. Pada halaman RANCANGAN, klik tab EDIT HTML.

3. Sebaiknya download dulu template anda untuk mencegah kerusakan template karena salah dalam melakukan pengeditan pada kode HTML Template blog.

4. Klik kotak kecil yang ada di depan tulisan EXPAND TEMPLATE WIDGET

5. Cari kode di bawah ini :

]]></b:skin>

Gunakan tombol F3 pada keyboard untuk melakukan pencarian cepat.

6. Copy kode berikut ini, lalu pasang / Paste di ATAS kode ]]></b:skin>

/*--- Author Box ---**/

.author-box {

background:#424242;

margin:20px 0 0 0;

padding:10px 10px 0px 10px;

overflow:auto;

color:#FFFFFF;

font-family:verdana, sans-serif;

}

.author-box p {

margin:0;

padding:0;

}

.author-box a{

color:#FFF;

}

.author-box img {

background: #FFFFFF;

float: left;

margin: 0 10px 0 0;

padding: 4px;

}

• Jika ingin mengganti warna background kotak Author Box, ganti kode #424242 dengan kode warna anda. Untuk melihat kode warna, silahkan scroll halaman blog ini ke atas, lalu klik TAB KODE WARNA yang ada di samping Logo Blog Bloggerbugis. Jika ingin memberi background gambar, ganti kode background:#424242; dengan kode di bawah ini :

background:#424242 url(GANTI KALIMAT MERAH INI URL GAMBAR ANDA);

•  color:#FFFFFF; adalah kode warna huruf. Ganti kode yang berwarna merah dengan kode warna anda untuk mengganti warna huruf.

Selanjutnya.............................

Copy kode berikut ini :

Paste / Pasang / Tempel, atau terserah anda menyebutnya apa di BAWAH kode <div class='post-footer-line post-footer-line-1'> template blog kesayangan anda. Berikut kodenya :

<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/AVvXsEjqa145nI3NPwOhktAXUKFMdW4cBQPF_7OQfiQQKddM2FyZWphdi4Hsuavaw7ex7On5kZfhVtgjrTB6oZDkHcJZxzzlDpZT4QKqE7_Gur5v3uRbRQFi0WuaPzyqD8rPqHT0mxncQoAbYv7m/s220/Foto+Contact+Me.png' width='70'/><div style='text-align: justify; font-family:trebuchet ms; font-size:13px; text-shadow:2px 2px 3px #000000;'><a href='http://www.blogger.com/profile/12066614431010301134' target='_blank'>AWALUDDIN.</a> Saya hanya orang biasa yang ingin menjadi luar biasa. Berharap bisa sukses di dunia dan selamat di akhirat. Terima Kasih telah berkunjung di BLOGGERBUGIS. Semoga artikel Tutorial Blogger yang anda baca di Blog BLOGGERBUGIS ini bermanfaat. Salam Blogger, happy blogging, Have a nice day, ... </div><br/></p>

</div>

</b:if>

• Ganti kode https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqa145nI3NPwOhktAXUKFMdW4cBQPF_7OQfiQQKddM2FyZWphdi4Hsuavaw7ex7On5kZfhVtgjrTB6oZDkHcJZxzzlDpZT4QKqE7_Gur5v3uRbRQFi0WuaPzyqD8rPqHT0mxncQoAbYv7m/s220/Foto+Contact+Me.png dengan URL gambar yang ingin anda tampilkan di kotak Author Box. Sebaiknya berukuran 70px X 70px.
•  Ganti kode http://www.blogger.com/profile/12066614431010301134 dengan URL profil blog anda.
• Ganti kode AWALUDDIN. dengan nama anda.
• Ganti kode Saya hanya orang biasa yang ingin menjadi luar biasa. Berharap bisa sukses di dunia dan selamat di akhirat. Terima Kasih telah berkunjung di BLOGGERBUGIS. Semoga artikel Tutorial Blogger yang anda baca di Blog BLOGGERBUGIS ini bermanfaat. Salam Blogger, happy blogging, Have a nice day, ... dengan kalimat yang ingin anda sampaikan di kotak Widget Author Box.

Anda masih bisa mengedit kode yang lain sesuai keinginan anda seperti Jenis Huruf, Warna huruf, dll. Silahkan acak² saja kodenya sampai puas hehehe....

Silahkan lihat hasilnya dengan mengklik PRATINJAU jika anda tidak mengguanakan READ MODE atau semacamnya, tapi jika sebaliknya, langsung saja klik SIMPAN TEMPLATE. Apabila ternyata anda melakukan kesalahan saat mengCOPY PATE kode HTMLnya, anda masih bisa mengembalikan template blog anda pada keadaan semula dengan mengUPLOAD kembali template yang sudah anda DOWNLOAD sebelumnya.