Wednesday, January 2, 2013

Cara Membuat Kotak Admin di dalam Postingan



Bisa dibilang salah satu tujuan Membuat Kotak Admin di dalam Postingan adalah supaya pemilik blog (admin) bisa dikenal dan lebih dekat dengan pengunjung. Disisi lain bisa ajang pamer fotolah...kayak gak tahu saja nih. Hahahahaha. Keuntungannya pemilik blog tidak capek-capek lagi nulis kata-kata penutup diakhir tulisan. Bisa juga untuk mempercantik tampilan postingan blog.

Hayo... penasaran nih yah.... Yuk kita lihat seperti apa sih Cara Membuat Kotak Admin di dalam Postingan.
Ada 2 cara yang AB berikan untuk Membuat Kotak Admin Dipostingan

Hasil Cara Membuat Kotak Admi dipostingan dengan Gambar

Cara Membuat Kotak Admin di dalam Postingan dengan Script Pake Gambar / Foto
1. Seperti biasa, buka akun blog kawan.
2. Masuklah pada Rancangan Template anda kawan (sepertinya kawan-kawan sudah menggunakan tampilan blog yang baru kan), dimana pilih Opsi Lain lalu pilih lagi Template lalu klik Edit HTML.
3. Selanjutnya Klik / pilih Lanjutkan
4. Centang Expand Template Widget
5. Carilah kode ]]></b:skin> di template anda (seperti biasa gunakan Ctrl + F untuk memudahkan pencarian.
6. Copy / Salin lah kode script di bawah ini dan paste-lah tepat berada di atas kode ]]></b:skin>
.admin-tulisan{
display:block;
width:auto;
background:#DFE6EF;
border:2px solid #DFE6EF;
box-shadow:0 1px 3px #CCE9FD;-moz-box-shadow:0 1px 3px #CCE9FD;-webkit-box-shadow:0 1px 3px #CCE9FD;
padding:0;
margin:30px 0 10px 0;
font:normal 12px Arial, Sans-Serif;
color:#222;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#777;
border:none;
border-bottom:1px solid #CCE9FD;
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 #F0F5FA;
padding:2px;
background:#F5F9FD;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}
7. Setelah Anda menempatkannnya kemudian langkah selanjutnya adalah carilah kode<data:post.body/>.
8. Setelah ketemu kode <data:post.body/>, copylah scrip di bawah ini dan paste-lah tepat di bawah kode <data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Kotak Admin -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-tulisan'>
<h4><a expr:href='data:blog.homepageUrl'><data:post.author/></a> Tutorial Bagi Pemula</h4>
<div class='kontainer'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWKqqWVwaLNbWsXBq2W9_e-j_6iatUfevTO9AOu8VK44slG4d9xF6ejKbAxrkDTNDUREj41fZ1sx91cZ_KgnZRKZKKXKJlIIEt9k9cerA9U7lWyYtjMiyqMEQ4KapigSClqNHpyDnDfwT6/s45/sepeda_ontel.jpg'/>
Terimakasih Anda telah membaca tentang <a expr:href='data:post.url'><data:post.title/></a> Semoga informasi <a expr:href='data:post.url'><data:post.title/></a> bisa memberikan hiburan bagi Anda. Jangan lupa komentar Anda dan Jempol Anda di tunggu di Halaman Facebook Kami. Salam Sukses.
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Kotak Admin -->
</b:if>
9. Setelah selesai, simpan template blog anda. Dan lihat hasilnya.

Catatan :
  • Untuk tulisan berwarna pink silahkan ganti kode warna kesukaan anda klik disini untuk mencari kode warna
  • Untuk tulisan berwarna merah silahkan ganti apa saja, AB sarankan tulisanya Deskripsi blog anda.
  • Untuk tulisan berwarna orange silahkan gantilah dengan link gambar yang anda inginkan.
  • Untuk tulisan berwarna biru silahkan ganti dengan kata-kata anda.

Contoh Kotak Admin tanpa Gambar
Cara Membuat Kotak Admin di dalam Postingan dengan Tabel (tanpa gambar/foto).
1. Abaikan langkah no 5 dan no 6 di atas
2. Lakukan langkah no 7 pencarian kode <data:post.body/>
3. Copy-lah script di bawah ini dan paste-kan tepat di bawah kode <data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table><tr>

<td>&lt;center&gt;Terimakasih Anda telah membaca tentang <a expr:href='data:post.url'><data:post.title/></a> Semoga informasi <a expr:href='data:post.url'><data:post.title/></a>bisa memberikan hiburan bagi Anda. Jangan lupa komentar Anda dan Jempol Anda di tunggu di Halaman Facebook Kami. Salam Sukses.&lt;/center&gt;</td>

</tr></table>
</b:if>
4. Simpan template anda dan lihat hasilnya.


Lihat sumbernya disini : http://adf.ly/JZMW0



No comments: