INFO BLOG 667 kali ini ingin sekali untuk berbagi tips-trik yang berkaitan dengan membuat Kotak Admin di bawah postingan blog. Kotak admin ini memiliki dua fungsi, yaitu pertama untuk menambah bagusnya penampilan blog kita, dan yang kedua juga berfungsi sebagai navigasi permalink yang akan memperkuat struktur navigasi pada blog kita.
Baiklah kita langsung saja menuju bagaimana cara membuatnya, begini :
1. Login blog 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 == "item"'>
<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 -->
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;
}
9. Untuk jenis font dan warna silahkan sobat edit
sendiri tak apa.
10. Jangan lupa Save Template yah!
Selesai sudah tips-trik ini.
0 komentar:
Posting Komentar
Blog ini bukan blog sembarangan, maka berkomentarlah secara sopan, No Link aktif, No Spam, No OOT, No Promosi, No Sara, No Pornografi dan jangan menggunakan Anonimous.
Anda dapat mempergunakan emoticon di bawah ini dalam komentar anda.
Mohon maaf bilamana terjadi keterlambatan balasan komentar ===>>