Cara Membuat Artikel Terkait Dibawah Postingan

Author Box adalah kotak kecil yang biasanya dipasang di bawah artikel / postingan blog. Gunanya untuk menggantikan widget About Me yang disediakan oleh google yang tampilannya biasa² saja. Berbeda dengan Widget About Me yang disediakan goole, 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 :

Tahap Pertama

1. Pada halaman dasbor blog, klik tab 'Rancangan'
2. 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. Letakan kode berikut ini 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. 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.

Tahap kedua

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/AVvXsEgYBii7sSTls_Y8EL1koCUEJ3zZ6g_MIVU7TnrSZoKtZlGT1rFgat4bSPMGdj31yNscyoYnJRekWc7aQnwVYoClTUtRs2wrShUn9c3mUPg_fRADrxTalkoOoMXc-WwuUh_XVwIh7MQPZZXR/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'>ANSTC.</a> Hidup adalah Perjuangam,</div><br/></p>
</div>
</b:if>

• Ganti kode https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYBii7sSTls_Y8EL1koCUEJ3zZ6g_MIVU7TnrSZoKtZlGT1rFgat4bSPMGdj31yNscyoYnJRekWc7aQnwVYoClTUtRs2wrShUn9c3mUPg_fRADrxTalkoOoMXc-WwuUh_XVwIh7MQPZZXR/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 ANSTC. dengan nama anda.
• Ganti kode Hidup Adalah Perjuangan 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.

Selamat Mencoba.