Cara Membuat Kotak Admin Dibawah Postingan Pada Blog

Cara Membuat Kotak Admin Dibawah Postingan Pada Blog - Jika anda tertarik untuk menggunakan widget ini, anda mungkin harus sedikit berusaha. Widget ini tidak sulit dibuat, tetapi mungkin untuk penempatan pada posisi yang jadi masalah. Tetapi anda pasti tau widget apa ini. Ini juga bisa dibilang suatu pengenalan agar orang lain tau penulis dari blog ini, dan tentu jika anda tertarik, anda perlu mencoba widget ini. Contohnya, bisa dilihat di bawah sini : 

Langsung saja ikuti petunjuk dibawah ini :

1. Seperti biasa, login ke blogger
2. Cari Rancangan >> Edit HTML >> Centang Expand Widget Template
3. Cari kode ]]></b:skin> dengan menggunakan Ctrl + F, lalu paste kode berikut diatasnya

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

4. Lalu cari kode <data:post.body/> 

Nb :
Jika sudah menggunakan readmore, coba dengan kode  <data:post.body/> yang satunya

5. Lalu, paste-kan kode berikut dibawahnya

<!-- 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> ~ Blog Gunk - D</h4>
<div class='kontainer'>
<img src='http://i1205.photobucket.com/albums/bb422/Gunkde86/07032011004.jpg'/>
<a expr:href='data:post.url'><data:post.title/></a> - Terimakasih atas kunjungannya dan kesediaannya untuk membaca artikel ini. Semoga dapat bermanfaat bagi anda. Untuk kritik dan saran, silahkan sampaikan pada kotak komentar.
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Kotak Admin -->

6. Jika sudah oke, Klik Save

Nb:
Untuk warna merah ganti dengan Title Blog Sobat
Untuk warna orange ganti dengan Foto sobat
Untuk warna biru ganti dengan kata-kata sobat

Selamat Mencoba

Tweet