Salam Blogging, Kali ini saya akan berbagi Cara Membuat Widget Profile Penulis Dibawah Postingan Blog. Widget Profle blogger memainkan peran penting di blog Anda ketika pengunjung Blog ingin melihat profile penulisnya. Dalam posting ini saya akan berbagi dengan Anda sebuah widget yang akan memungkinkan Anda untuk menampilkan biodata dan profile penulis di bawah posting seperti dalam gambar di atas. Langsung saja ke langkah langkahnya :
Editing Kode Untuk Author Widget ( Profile Penulis )
1Masuk ke Blogger > Template > Edit Html
2Sekarang cari ]]> </ b: skin>
3Lalu copy / Paste kode berikut tepat di atas ]]> </ b: skin>
CSS
/****Bloggingpasuruan Widget Profile Blogger *****/
. bloggingpasuruan-author-box {
background: #f6e4db;
margin: 5px 0 20px 0;
padding: 12px;
border: 1px solid #e3e3e3;
border-radius:5px;
box-shadow:2px 2px 1px #e3e3e3;
overflow: hidden;
color: #3b3b3b;
font-size: 14px;
font-family: Arial, Tahoma, Verdana;
line-height: 1.6em;
}
/****www.bloggingpasuruan.blogspot.com*****/
.bloggingpasuruan-author-box p {
margin: 0px;
padding: 0px;
}
.bloggingpasuruan-author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 5px;
border: 3px solid #e3e3e3;
}
4. Simpan template.
5. Bagian utama dilakukan, sekarang setiap kali Anda mempublikasikan posting tamu cukup ikuti langkah-langkah sederhana ini diberikan di bawah ini untuk menambahkan tamu penulis widget.
Cara Tambah Widget Profile Penulis dalam Blog Post?
1 Setelah menulis posting Anda masuk ke bagian HTML dari posting blog Anda dengan mengklik HTML di samping Compose sebagai menunjukkan pada gambar di bawah.
2 Sekarang paste kode berikut di akhir kode HTML (bawah html Tag terakhir dalam Bagian HTML)
HTML
<div class=" bloggingpasuruan-author-box">
<img alt="author-pic" height="85" src="IMG" width="85" /> <strong>Tentang Profile Penulis</strong><br />Tulis disini tentang profile Anda</div>
Keterangan :
Ganti IMG dengan URL gambar foto Anda
Ubah Tulisan warna HIJAU dengan “ kata kata profile tentang penulis ( tentang Anda )
Saran saran :
>>> Kode diatas akan Anda pastekan setiap anda melakukan posting ( tidak praktis ).
>>> Jika Anda ingin Widget tampil permanent di bawah posting BLOG silahkan ikuti petunjuk berikut ini :
1. Cari kode berikut tekan Ctrl-F agar lebih cepat dalam pencarian kodenya
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
2. Lihat dibawahnya ada kode <data:post.body/>
3.Pastekan kode berikut dibawah <data:post.body/>
Saran saran :
>>> Kode diatas akan Anda pastekan setiap anda melakukan posting ( tidak praktis ).
>>> Jika Anda ingin Widget tampil permanent di bawah posting BLOG silahkan ikuti petunjuk berikut ini :
1. Cari kode berikut tekan Ctrl-F agar lebih cepat dalam pencarian kodenya
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
2. Lihat dibawahnya ada kode <data:post.body/>
3.Pastekan kode berikut dibawah <data:post.body/>
HTML
<div class=" bloggingpasuruan-author-box">
<img alt="author-pic" height="85" src="IMG" width="85" /> <strong>Tentang Profile Penulis</strong><br />Tulis disini tentang profile Anda</div>
Jika Anda memiliki pertanyaan atau memiliki masalah menerapkan widget ini ke blog Anda memberikan komentar di bawah ini saya akan dengan senang hati membantu Anda.