Cara Memasang Author Box Info Di bawah Artikel

Caranya adalah sebagai berikut :

1. Login ke Akun Blogger anda masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode ]]></b:skin>
    Dan Simpan kode berikut diatasnya :

/* Author Info */
.authorinfo{
background:#e5f1fc;
margin:20px 0 40px 0;
padding:10px;
overflow:auto;
color:#000;
border: 1px solid #ff6600;
}
.authorinfo p{
margin:0;
padding:0
}
.authorinfo a{
color:#ff6600
}
.authorinfo img{
background:#FFF;
border: solid 1px #000;
float:Left;
margin:0 10px 0 0;
padding:4px
}

7. Cari kode atau yang mirip dengan kode berikut:

<b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a> 
      </div>
    </b:if>

8. Jika Sudah ketemu simpan kode berikut di bawah kode yang dicari tadi:

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='authorinfo'>
<p>
<img alt='Authorimage' class='avatar avatar-70 photo' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUjOsb-EaRZ1cR0RkOanmUiZkpIaNrAK2wN_lsy0R0AiUKhDgMgwmYfQmr7sSWAsAEu0-_HhGyPLgsg5leVZ4md_eIt0ARRVmVWTUDJLMK3oBXnSOdPHfw3cyCphHdECHwInnwfpuYPj4/s220/AdultNarutoAvatar_1242014135199.jpg' width='70'/>
<div style='font-family: kristen itc; color: #000;'>
<b><span><a expr:href='data:post.href'><data:post.title/></a></span></b></div>
<div style='text-align: justify; font-family:bedizen'>
<span>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a></span><br/>
<span>Pada : <a expr:href='data:post.href'><b:if cond='data:post.dateHeader'><data:post.dateHeader/></b:if></a></span><br/>
<span>Jam : <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a></span><br/>
<span>Kategori: <b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if></b:loop></b:if></b:loop></span>
</div>
     </b:if>

NB: Perhatikan yang ditandai dengan warna biru, silahkan sesuaikan dengan kreasi anda ataupun dikembangkan.

9. Simpan Template dan lihat hasilnya saat salah satu posting dibuka dibagian bawahnya.

Related Post