Cara Membuat Author Box Dibawah Posting

Cara Membuat Author Box Dibawah Posting Single Link
Alternative Link : [ Click Here... ] Direct Link

Cara Membuat Author Box Dibawah Posting | Hay sobat apa akabar kalian semua ? Kali ini Acep-Computer akan berbagi tutorial lagi ni sob. Tutorial kali ini adalah Cara Membuat Author Box Dibawah Posting. Pasti sudah tau kan apa itu author box ? Yang belum tau berikut adalah penjelasan lengkapnya. Author Box adalah sebuah kotak keterangan penulis yang ada di bawah posting blog yang berfungsi sebagai kata atau pesan penutup dan juga bisa peraturan. Berikut adalah gambar author Box yang ada di blog ini :

Sudah tau kan sekarang apa itu author box ? Terus gimana kalau saya ingin memasangnya di blog saya ? Oke tak perlu risau, Kali ini saya akan memberikan tipsnya tutorialnya kepada sobat :

1. Buka Blogger
2. Masuk ke dasboard
3. Pilih template => Edit HTML => Centang expand template widget
4. Lalu Copy kode dibawah ini diatas ]]></b:skin>

.author-box {

background: #F7F7F7;

margin: 20px 0 40px 0;

padding: 10px;

border: 1px solid #E6E6E6;

overflow: auto;

}

.author-box p {

margin: 0;

padding: 0;

}

.author-box img {

background: #FFFFFF;

float: left;

margin: 0 10px 0 0;

padding: 4px;

border: 1px solid #E6E6E6;

}

5. Setelah itu  cari kode <div class='post-footer'> untuk mempermudah pencarian ketik saja class='post-footer
salin kode dibawah ini , kemudian letakkan tepat diatas kode tadi

<!-- Author Box by www.acep-computer-science.blogspot.com --> 

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='author-box'>

<p><img alt='Acep Derby Yudha Anggara' class='avatar avatar-70 photo' height='90' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghJvUSZCUFMRzgDayQUKLpnigUl1_9QbpftxSBfxZI26FNqNsbMNrq3Oit90bMSGvmkXnavY2gwp9Yw9S5JAabHLdfchQ_XDrgXsSFqhcBudhG4W6M7EG0a5WFGoA7_irzcSWostisxIpF/s1600/avatar_2.png' width='90'/><b>Ditulis Oleh :  <a href='https://plus.google.com/102882415136938230719' target='_blank'>Acep Derby Yudha Anggara</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, dan baca peraturan <a href='http://acep-computer-science.blogspot.com/2012/12/disclaimer.html' title='Disclaimer Blog Acep-Computer'><strong>Disclaimer</strong></a> sebelum copy-paste.

<textarea cols='73' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='2'>&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 by www.acep-computer-science.blogspot.com -->

KET :

kode berwarna ungu ganti dengan alt nama sobat.
kode berwarna hijau ganti dengan url foto sobat.
kode berwarna biru ganti dengan nama sobat.

Cukup mudah kan sob ? oke cukup sekian tips kali ini dari saya semoga bisa bermanfaat.