Sabtu, 31 Maret 2012

Cara membuat kotak admin dibawah postingan di blog


Cara membuat kotak admin dibawah postingan, Sesuai permintaan saudara nanang ismail yang bertanya bagaimana cara membuat kotak admin dibawah postingan seperti punya agan. Sekarang saya jawab Caranya sebagai berikut ini.
1. Login blog anda kemudian menuju menu edit HTML
2. Beri centang pada Expand widget tempalte
3. Cari kode dibawah ini dengan menekan F3 atau CTRL+F agar lebih mudah dalam mencari kodenya
]]></b:skin>

Bila kode diatas sudah ditemukan letakan kode dibawah ini tepat diatasnya

.admin-tulisan{
display:block;
width:auto;
background:#666666;
border:2px solid #999999;
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:#999999;
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:#FEEA83;}
.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;
}

4. Sekarang tinggal anda ingin meletakan kotak admin tersebut dibagian mana, misalkan dibawah postingan cari kode dibawah ini.

<data:post.body/>
Bila blog anda sudah ada readmore nya silahkan <data:post.body/> ada dibawah tulisan readmore

copy kode dibawah ini dan letakan dibawah kode <data:post.body/>
<!-- 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> ~ Tutorial Blog, Tips, Trik, Download</h4>
<div class='kontainer'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBXLEYXv_Op7r_QvpyvBNqWFWCWfQv6K9GmB5H5w_l2Ug0I5pa-pYMKDPttX2iGn6G_GqK47_xowz6gs8z7VT_rl8D6IKnE7gMYLxiLdKLDWu9ZM0DeNp5nTyq3SdoGsvcOomh1ExgshCi/s220/madiuncoolinuk.jpg'/>
Artikel <a expr:href='data:post.url'><data:post.title/></a> Semoga bermanfaat bagi sobat blog. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar.
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Kotak Admin -->

Keterangan:
Warna kuning : Silahkan ganti dengan title blog anda
Warna hijau : ganti dengan URL/alamat gambar foto anda
Warna merah : Silahkan ubah dengan kata2 yang ingin anda sampaikan

Setelah selesai silahkan save template anda dan silahkan di cek sudah berhasil atau belum bila belum berhasil kemungkinan salah saat meletakan kode. Selamat mencoba.

Tidak ada komentar: