Cara Membuat Author Box di Blogger | Keterangan di Bawah Postingan Blog

Cara Membuat Author Box di Blogger | Keterangan di Bawah Postingan Blog - Author box atau kotak berisi tulisan atau keterangan di bawah postingan blog lagi ngetren. Bagaimana cara membuatnya?

1. Login ke blog anda
2. Masuk Layout, Edit HTML, centang Expand widget template.
3. Cari kode ]]></b:skin>
4. Masukkan kode di bawah ini sebelum kode ]]></b:skin>; tadi

.admin-tulisan{
display:block;
width:auto;
background:#CFE2E0;
border:2px solid #fff;
box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 3px #000;-

webkit-box-shadow:0 1px 3px #000;
padding:0;
margin:30px 0 10px 0;
font:normal 12px Arial, Sans-Serif;
color:#222;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#8A9C04;
border:none;
border-bottom:1px solid #699019;
color:#fff;
text-transform:normal;
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
font:bold 12px Arial,Sans-Serif;
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.admin-tulisan h4 a{color:#FEEA83;}
.admin-tulisan img{
width:70px;
height:70px;
margin:0 10px 0 0;
float:left;
border:1px solid #954B02;
padding:2px;
background:#C36702;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}

5. Cari kode <div class='post-footer-line post-footer-line-1'>
6. Masukkan kode di bawah ini setelah kode <div class='post-footer-line post-footer-line-1'> tadi.

<!—Author Box-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> Blogspotcorner</h4>
<div class='kontainer'>
<img src='http://2.bp.blogspot.com/-xQtK7hi9Aq8/T7EuiMGuHaI/AAAAAAAAOeM/hDgEJSHVm48/s400/banner.jpg'/>
Artikel <a expr:href='data:post.url'><data:post.title/></a> ini

diposting oleh <data:post.author/> pada hari <data:post.dateHeader/>.

Jika artikel <a expr:href='data:post.url'><data:post.title/></a> ini dirasa menarik, anda bisa sebarluaskan lewat blog anda, tapi mohon mencantumkan sumbernya. Terimakasih. Happy blogging.

<p><span style='float:right;font:italic 10px Arial, Sans- Serif;'/></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!—Author Box -->

7. Simpan, selesai.

NB:
- Ganti Blogspotcorner dengan nama blog anda
- Anda bisa mengganti kalimat ‘Jika artikel ini dst…’ sesuai selera
- Ganti http://2.bp.blogspot.com/-xQtK7hi9Aq8/T7EuiMGuHaI/AAAAAAAAOeM/hDgEJSHVm48/s400/banner.jpg dengan URL foto/banner anda


Image and video hosting by TinyPic