Cara Membuat Author Box di Bawah Postingan Blog

Membuat data penulis di bawah postingan blog

Ok. Langsung saja aja gaes....

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

<!-- Awal Author Box -->
.author-box {margin: 10px 0 5px 0;padding: 10px;background: linear-gradient(to bottom, white 5%, #F6F6F6 100%) repeat scroll 0 0 transparent;border: 1px solid #C5C5C5;border-radius: 3px 3px 3px 3px;box-shadow: 0 1px 0 0 white inset;overflow: auto width:640px;font-size:11px}
.author-box p {margin: 0;padding: 0;;font-size:12px;color: #444444;font-family:Helvetica;font-size: 11px;line-height: 20px}
.author-box img {background: #FFFFFF;float: left;margin: 0 10px 5px 0;padding: 4px;border: 1px solid #F1F1F1;}
<!-- 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, tapi biasanya sih saya letakkan di kode yang kedua.
  

  <!-- Awal Author Box --> 
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='author-box'>
  <p><img alt='Portal Statistik' class='avatar avatar-70 photo' height='90' src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizKmywVYkW5BAiv6xSwBR8-kwdOMoDKl3NdryW9dsbeq3GP93PlPet2Sc65frky__CSbx-aC_WP3Pa4uBJKZ07GKWEXZxo6NS-hpZ4Z8IMNJu_7kPYPQOMuCH1818w4CC7b0mjkH6i0Sg/s108-no/portal+statistik.png' width='90'/><b>Ditulis Oleh :  <a href='https://plus.google.com/u/0/113537360821338990141' target='_blank'>M Nashihun Ulwan</a></b>
  </p><p>
  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.
  <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> 
  </div> 
  </b:if>
  <!-- Akhir Author Box -->
  

• Selanjutnya silahkan sobat kostumisasi sendiri sesuai keinginan dan kebutuhan blog sobat.
• Ganti kode warna "#F6F6F6" dengan warna yang sesuai dengan blog sobat.
• Ganti ukuran "640px" dengan ukuran yang sesuai dengan lebar kolom Post blog sobat.
• Ganti "M Nashihun Ulwan" dengan nama atau inisial atau identitas pada blog sobat.
• Ganti ukuran "height='90' width='90'" untuk mengatur tinggi avatar / foto pada Author Box.
• Ganti alamat url
  "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizKmywVYkW5BAiv6xSwBR8-kwdOMoDKl3NdryW9dsbeq3GP93PlPet2Sc65frky__CSbx-aC_WP3Pa4uBJKZ07GKWEXZxo6NS-hpZ4Z8IMNJu_7kPYPQOMuCH1818w4CC7b0mjkH6i0Sg/s108-no/portal+statistik.png" dengan alamat url avatar / foto sobat.
• Silahkan sesuaikan kalimat deskripsi sesuai keinginan.
• Jika ada kesulitan silahkan bertanya langsung di form komentar.

Update: Setelah saya terapkan semuanya ternyata ada error kode HTML di kolom "src", kalo anda juga demikian silahkan tambahkan kode ' ini setelah sama dengan jadi bentuknya kaya gini "src='http"

demikian, semoga bermanfaat

Sumber klik disini