CARA MEMBUAT KOTAK ADMIN DI BAWAH POSTINGAN BLOG

DUNIA BLOG - CARAKU 67 kali ini ingin berbagi tutorial blogging tentang cara membuat kotak admin di bawah postingan blog yang bertujuan untuk menambah kekuatan SEO blog. Kotak admin ini pada dasarnya persis sama dengan navigasi perrmalink, hanya mengalami sedikit perubahan sehingga mampu tampil cantik untuk menghias blog.

Contoh kotak admin yang kita buat hasilnya seperti pada gambar di atas.

Cara membuat kotak admin tersebut adalah :

1. Log in ke blog anda, pilih menu template kemudian edit html, dan carilah kode <div class='post-footer'>, letakkan rangkaian script di bawah ini persis di atasnya.

<!-- 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='<div class='kontainer'><img src='<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> 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 -->

Anda dapat mengganti yang tercetak tebal dengan alamat url gambar anda sendiri.

2. Carilah kode ]]></b:skin> dan letakkan script berikut ini tepat di atasnya :

Kode Script:

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

3. Simpan template anda dan lihatlah hasilnya.

Demikianlah cara membuat kotak admin di bawah postingan blog, semoga bermanfaat.

Description: CARA MEMBUAT KOTAK ADMIN DI BAWAH POSTINGAN BLOG
Reviewer: Chakra Sendi
Rating: 4.0
ItemReviewed: CARA MEMBUAT KOTAK ADMIN DI BAWAH POSTINGAN BLOG

Artikel Terkait :