Cara membuat author box tentang penulis dibawah postingan blog

OneszAccess - Selamat pagi sobat blogger, setelah kemarin sempat ganti template, kali ini oneszaccess akan berbagi lagi kepada sobat blogger, setalah kemarin juga ada beberapa postingan tentang dunia blogging seperti Teknik membagi postingan blog menjadi 2 kolom dan cara cepat membuat tabel pada blog. Kali ini akan berbagi tentang Authorbox. 

Ada yang tahu tentang authorbox ? itu tuu yang sering ada dibawah postingan blog yang ada photo dan deskripsi singkat tentang penulis dan artikel terkait postingan pada page itu. Author Box itu semacam widget yang biasanya berisi himbauan atau keterangan penulis tentang isi postingan yang terkait dan yang paling penting Author Box juga bisa berfungsi sebagai Permalink, kebetulan authorbox tersebut tidak saya pasang diblog ini, namun saya pasang diblog saya yang satunya, kalau mau lihat silahkan klik postingan ini Cara Analisis Cluster Metode Hirarkis dengan SPSS atau bisa sobat lihat pada gambar dibawah ini, karena nanti hasilnya kurang lebih seperti ini.

Ok. Langsung saja ke meluncur  TKP.

• 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/AVvXsEgFrAoYMmFqvw9o6IWBW6UCxI9hmBp9cYi2-Y0RN0WCpjy7nlhoLximvUDaQKMWV8zhB9gi8JZN_FTxInxt7xE87YhkHPGvoZNlZYLcC-HTnpmCP4HmOl3M2L5xAGvZlIiQLfODlMIqdVA/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/AVvXsEgFrAoYMmFqvw9o6IWBW6UCxI9hmBp9cYi2-Y0RN0WCpjy7nlhoLximvUDaQKMWV8zhB9gi8JZN_FTxInxt7xE87YhkHPGvoZNlZYLcC-HTnpmCP4HmOl3M2L5xAGvZlIiQLfODlMIqdVA/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.

Demikian, Semoga artikel ini bermanfaat.

Heve FUN.