cara membuat kotak admin di bawah postingan blog

ingin membuat kotak admin seperti saya???? Buat sobat yang ingin membuat kotak admin seperti saya dengan menampilkan profil atau biografi singkat, maka sobat bisa mengikuti langkah berikut ini.

1. Masuk Design / Template , pilih edit HTML, kemudian centang bagian  
  Expand Template Widget agar seluruh elemen pembangun posting tampil.

2. Cari kode ini:
    <div class='post-footer'>

TIPS: Tekan CTRL + F lalu Copas (Copy paste ) <div class='post-footer'> untuk 
            mempermudah pencarian.

Salin kode ini, kemudian letakkan tepat 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> ~ Great Works Of Art</h4>
<div class='kontainer'>
<img src='http://i1297.photobucket.com/albums/ag22/jeskarex/theres.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 Sobat serta kesediaan Sobat 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://rexroom.blogspot.com/2012/10/cara-membuat-kotak-admin-dibawah.html' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Kotak Admin -->

Keterangan :
Ganti kode yang berwarna merah dengan image profil sobat.
Ganti kode yang berwarna Biru dengan descripsi sobat.

4. Dilanjutkan dengan search kode ]]></b:skin> pada template sobat. Kemudian copy 
    kode CSS dibawah ini dan paste tepat diatas kode ]]></b:skin>. Jika gagal sobat bisa 
    juga meletakkan kode CSS ini tepat dibawah kode <data:post.body/>.

    .admin-tulisan{
    display:block;
    width:auto;
    background:#FFE500;
    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:#000000;
    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:#FFFF00;}
    .admin-tulisan img{
    width:70px;
    height:70px;
    margin:0 10px 0 0;
    float:left;
    border:1px solid #954B02;
    padding:2px;
    background:#000000;
    box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
    }

Keterangan : 
Kode - kode warna bisa di ganti dengan keinginan sobat.

5. Langkah terakhir Simpan template sobat.
    Untuk selanjutnya saya yakin sobat mempunyai kreasi sendiri untuk lebih mempercantik 
    tampilan blognya, semoga tips singkat tentang Cara Membuat Kotak Admin Dibawah 
    Postingan Blog ini bermanfaat bagi para pembaca setia. Jika sobat berkenan, mohon 
    jangan dihapus kredit link yang menuju ke tutorial ini. Terimakasih.

Related Post: