Cara membuat kotak admin di bawah postingan

Banyak cara untuk membuat tampilan blog menjadi lebih baik dan komunikatif. Salah satunya adalah dengan membuat/memasang kotak admin dibawah postingan yang berisikan keterangan dari Penulis/Author blog tersebut tentang artikel yang ditulisnya

Kamu bisa juga menuliskan kata-katayang menarik didalamnya. Yang jelas untuk link nama penulis/author, judul posting dan tanggal publish postingan sudah di sertakan dalam script widget kotak admin ini, sehingga kamu tidak perlu lagi mengisikan linknya secara manual.

Kamu dapat melihat langsung contoh kotak admin (about author box) yang saya pasang dibawah postingan blog ini sebagai demo-nya.

Untuk cara membuat Kotak Admin Dibawah Posting Blog ikuti langkahnya dibawah ini :

1. Login ke dashboard blogger

2. Pilih Rancangan >> Edit HTML, centang Expand template widget

3. Cari kode

<div class='post-footer'> pada template.

4. Copy script kotak admin dibawah ini dan paste tepat di atas kode di atas

<b:if cond='data:blog.pageType == "item"'>
<div class='admin-tulisan'>
<h4>Penulis : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> ~ Sebuah blog yang menyediakan berbagai macam informasi</h4>
<div class='kontainer'>
<img src='http://i41.tinypic.com/2nbugas.png'/>
Artikel <a expr:href='data:post.url'><data:post.title/></a> ini dipublish oleh <data:post.author/> pada hari <data:post.dateHeader/>. Semoga artikel ini dapat bermanfaat dan menambah wawasan kita semua. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini.
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://mahasiswalugu.blogspot.com/2012/02/cara-membuat-kotak-admin-di-bawah.html' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>

5. Selanjutnya cari lagi kode

]]></b:skin>

6. Copy kode CSS dibawah ini dan paste tepat diatas kode kode diatas

   .admin-tulisan{
    display:block;
    width:auto;
    background:#FFFFFF;
    border:2px solid #F5FFFA;
    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:#9ACD32;
    border:none;
    border-bottom:1px solid #D3D3D3;
    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:#FF100%0;}
    .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;
    }

7. Simpan template dan lihat hasilnya. Jika gagal kamu dapat juga meletakkan kode CSS tadi tepat dibawah kode

<data:post.body/>.

NB :

Silahkan ganti link URL gambar profil yang berwarna merah dengan link gambar profil sobat. Jika sobat ingin menuliskan dengan kata-kata ulasan yang lain, ganti/edit dulu kata-kata ulasannya di notepad.

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

Preview dulu hasil kotak admin yang dibuat. Jika editing sudah dirasa cukup, Save/Simpan template anda.

Sekarang kotak admin sudah muncul dibawah postingan kamu, semoga bermanfaat :)

Mahasiswa Lugu