Cara Membuat Author box/riwayat Penulis di Bawah Postingan

Share:
Apa sih itu author box  lalu bagaimana cara memasang Author Box  dibawah postingan blog
Author box adalah sebuah widget yang memberikan sebuah info tentang riwayat penulis blog atau pemilik blog itu sendiri,dengan memasang author blog kita dapat mengenalkan diri kita kepada pengunjung setia blog kita..dibawah ini contoh gambar dari author blog.gambar contoh ini saya ambil dari blog saya di Cyber2dakwah.blogspot.com

Berikut langkah-langkah pemasangan Author Box :


  • Login ke akun Blogger rekan-rekan.
  • Pilih Menu Template >> Edit HTML.
  • Cari kode ]]></b:skin> gunakakan Ctrl+F untuk mempermudah pencarian, letakan kode berikut diatas kode ]]></b:skin>.

  1. <!-- Awal Author Box -->  
  2. .author-box {margin10px 0 5px 0;padding10px;background: linear-gradient(to bottomwhite 5%#F6F6F6 100%) repeat scroll 0 0 transparent;border1px solid #C5C5C5;border-radius: 3px 3px 3px 3px;box-shadow: 0 1px 0 0 white inset;overflowauto width:640px;font-size:11px}  
  3. .author-box p {margin0;padding0;;font-size:12px;color#444444;font-family:Helvetica;font-size11px;line-height20px}  
  4. .author-box img {background#FFFFFF;floatleft;margin0 10px 5px 0;padding4px;border1px solid #F1F1F1;}  
  5. <!-- Akhir Author Box -->  
  • Cari kode <data:post.body/> gunakakan Ctrl+F untuk mempermudah pencarian,  akan muncul lebih dari satu kode <data:post.body/> jadi pilih kode yang kedua kalau masih belum berhasil paste dibawah kode yang pertama, pada blog ini diletakan setelah kode yang kedua.
  1. <!-- Awal Author Box -->   
  2. <b:if cond='data:blog.pageType == &quot;item&quot;'>  
  3. <div class='author-box'>  
  4. <p><img alt='Alimsyahwana' class='avatar avatar-70 photo' height='90' src='http://3.bp.blogspot.com/-u4bcwKdOq0E/VLnq9rvF--I/AAAAAAAAALg/TBPtugTliCc/s1600/Ferry%2Bnurdianto.jpg' width='90'/><b>Ditulis Oleh :  <a href='https://plus.google.com/u/0/113537360821338990141' target='_blank'>Alim Syahwana</a></b>  
  5. </p><p>  
  6. Artikel <a expr:href='data:post.url'><data:post.title/></a>, diterbitkan oleh <data:post.author/> pada hari <data:post.dateHeader/>. Semoga artikel ini dapat menambah wawasan Anda. Oleh Admin, Sobat diperbolehkan mengcopy paste / menyebar luaskan artikel ini, namun anda harus meletakkan <blink><strong>link dibawah ini</strong></blink> sebagai sumbernya.  
  7. <textarea cols='71' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='1'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea> </p>   
  8. </div>   
  9. </b:if>  
  10. <!-- Akhir Author Box -->  

Customasi agar sesuai dengan blog rekan-rekan :

  • Ganti kode warna "#F6F6F6" dengan warna yang sesuai dengan blog rekan-rekan.
  • Ganti ukuran "640px" dengan ukuran yang sesuai dengan lebar kolom Post blog rekan-rekan.
  • Ganti "Alim Syahwana" dengan nama atau inisial atau identitas pada blog rekan-rekan.
  • Ganti ukuran "height='90' width='90'" untuk mengatur tinggi avatar / foto pada Author Box.
  • Ganti alamat url "http://3.bp.blogspot.com/-u4bcwKdOq0E/VLnq9rvF--I/AAAAAAAAALg/TBPtugTliCc/s1600/Ferry%2Bnurdianto.jpg" dengan alamat url avatar / foto rekan-rekan.
  • Silahkan sesuaikan kalimat deskripsi yang menurut rekan-rekan sukai.

Jika ada kesulitan silahkan bertanya  form komentar, semoga Bermanfaat

No comments