CARA GAMPANG MEMBUAT KOTAK ADMIN DI BAWAH POSTINGAN

Blog CARA GAMPANG kali ini akan memaparkan cara gampang membuat kotak admin di bawah postingan blog. Kotak admin di bawah postingan blog ini pada dasarnya hampir mirip dengan navigasi permalink, hanya saja memiliki sedikit kelebihan yaitu disertakannya thumbnail (gambar kecil) di pemiliki blog atau gambar lain yang dipilih sebagai logo blog. Cara membuatnyapun tidaklah terlalu sulit, anda tinggal mengikuti cara-cara yang akan kami paparkan berikut ini, bentuk kotak admin tersebut adalah seperti gambar berikut :

 

Cara membuatnya adalah sebagai berikut :

1. Login blogger dulu sobat

2. Pilih Rancangan , lalu Edit HTML

3. Centang Expand Template Widget

4. Cari kode berikut <div class='post-footer'>

5. Copy script dibawah ini tepat diatas <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> ~Semangat 888</h4>
<div class='kontainer'>
<img src=' http://img853.imageshack.us/img853/9519/dudukmenunggu.jpg'/>
Terimakasih anda telah membaca artikel  <a expr:href='data:post.url'><data:post.title/></a> ini diposting oleh <data:post.author/> pada hari <data:post.dateHeader/>. Dan saya ucapkan juga terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar. Semoga Bermanfaat untuk anda.
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='#' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Kotak Admin -->

Ganti script yang berwarna merah dengan gambar anda sendiri.

6. Selanjutnya cari lagi kode berikut  ]]></b:skin>

7. Copy kode CSS dibawah ini tepat diatas ]]></b:skin> , Jika gagal sobat dapat juga meletakkan kode CSS tadi tepat dibawah kode <data:post.body/>.

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

8. Silahkan sobat ganti tulisan berwarna merah dengan description blog sobat dan gambar sobat.

9. Untuk Jenis font dan Warna silahkan sobat edit sendiri tak apa.

10. Jangan lupa Save Template yah!