Cara Memasang Kotak Admin di Bawah Artikel

Apakah anda pernah melihat blog orang lain yang di bawah artikelnya terdapat sebuah kotak yang berisi biodata tentang penulis blog / artikel ? Kalau pernah,pasti anda ingin juga memasang di blog / site anda.Jangan khawatir,saya akan membantu anda untuk memasangnya.Nah,jadi untuk memasangnya,silakan perhatikan langkah-langkah berikut ini :

1. Blogger - Rancangan - Edit HTML - Centang Expand Template Widget
2. Cari kode <div class='post-footer'>
3. Copy-Paste kode script di bawah ini dan letakkan di atas kode  <div class='post-footer'>

<!-- Kotak Admin -->

<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> ~ Deskripsi Blog Anda</h4>

<div class='kontainer'>

<img src=' http://www.metalmusicarchives.com/images/covers/avariel-no-end-in-sight(demo)-20110719103608.jpg'/>

Artikel <a expr:href='data:post.url'><data:post.title/></a> ini diposting oleh <data:post.author/> pada hari <data:post.dateHeader/>. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar.

<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://rayhanzhampiet.blogspot.com/2011/11/cara-membuat-kotak-admin-dibawah.html' target='_blank'>:: Get this widget ! ::</a></span></p>

<div style='clear:both;'/>

</div>

</div>

</b:if>

<!-- Kotak Admin -->

4. Kemudian cari lagi kode ]]></b:skin> ,dan copy-paste kode script di bawah ini di atasnya,Jika gagal sobat dapat juga meletakkan kode CSS tadi tepat dibawah kode<data:post.body/>.

.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;
}

Keterangan : 
Pada langkah ke tiga,yang berwarna merah,silakan anda ganti dengan deskripsi blog anda.Yang berwarna biru,silakan anda ganti foto yang akan ditampilkan pada kotak admin tersebut.Yang berwarna orange,silakan anda dengan kata-kata yang anda inginkan.

 Untuk jenis font, warna background dan border juga dapat sobat ganti/edit sesuai keinginan. 


Selesai


Semoga Bermanfaat


Sumber: Hompimpa Alaihum Gambreng