Tutorial Cara Membuat Kotak Author Box

Tweet

ALERON_LIGHT datang kembali untuk menshare TUTORIAL menarik, kali akan membahas tentang author box, APA ITU..?
Author Box adalah kotak kecil yang biasanya dipasang di bawah artikel / postingan blog. yang Guananya adalah untuk menggantikan widget About Me yang disediakan oleh google yang tampilannya biasa-biasa saja (menurut gue sich). Berbeda dengan Widget About Me yang disediakan goole, Widget Author Box lebih menarik, mudah diatur, dan bisa di modifikasi sesuai keinginan kita. Demo langsungnya Widget Author Box bisa anda lihat di bawah postingan / artikel ini scroll aja kebawah ( 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 ???

ougkey saya tau anda tidak sabar
Untuk memasang Widget Author Box di bawah setiap postingan / Artikel blog, silahkan ikuti panduan TUTORIAL 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 guna menghindari galat dalm pengeditan template...
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

/*--- 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. Jika ingin memberi background gambar, ganti kode background:#424242; dengan kode di bawah ini :

background:#424242 url(GANTI KALIMAT INI URL GAMBAR ANDA);
color:#FFFFFF; adalah kode warna huruf. Ganti kode #FFFFFF dengan kode warna anda untuk mengganti warna huruf.

Langkah berikutnya......

Copy kode berikut ini :

Paste / Pasang / Tempel, atau terserah anda menyebutnya apa di BAWAH kode

<div class='post-footer-line post-footer-line-1'>

pada 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='http://i1214.photobucket.com/albums/cc492/TBM77/JOZZZZZ_70x70.jpg' width='70'/><div style='text-align: justify; font-family:Comic Sans MS; font-size:13px;'><a href='http://www.blogger.com/profile/09720987939397577337' target='_blank'>CHRISTIAN.</a>Terima Kasih telah berkunjung di ALERON_LIGHT. Semoga artikel Tutorial Blogger yang anda baca ini bermanfaat.and Remember If GOD leads you to the edge of cliff, trust HIM fully. One or two things will happen, either HE will catch you when you fall, or HE will teach you how to fly. </div><br/></p>
</div>
</b:if>

Ganti kode http://i1214.photobucket.com/albums/cc492/TBM77/JOZZZZZ_70x70.jpg dengan URL gambar yang ingin anda tampilkan di kotak Author Box. Sebaiknya berukuran 70px X 70px.

Ganti kode http://www.blogger.com/profile/09720987939397577337 dengan URL profil blog anda.

Ganti kode CHRISTIAN. dengan nama anda.

Terima Kasih telah berkunjung di ALERON_LIGHT. Semoga artikel Tutorial Blogger yang anda baca ini bermanfaat.and Remember If GOD leads you to the edge of cliff, trust HIM fully. One or two things will happen, either HE will catch you when you fall, or HE will teach you how to fly ... 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....

Lumayan Ribet sih tapi aku jamin hasilnya lebih memuaskan...

Ougkey sekian dulu tutorial cara membuat author box dari saya...

Selamat mencoba.. Semoga berhasil

NB : Jangan Malu bertanya kalu anda benar tidak tahu....