Kamis, 17 Januari 2013

Membuat Kotak Pesan di Bawah Postingan

Broo,, kali ini gue mau kasih tahu sama broo kalo broo mau pasang kotak pesan di bawah postingan yang sudah broo buat. Kotak pesan yang akan kita buat ini akan diisi oleh sahabat sendiri dengan menggunakan bahasa sendiri dan akan di letakkan dibawah setiap postingan sebagai contoh kotak pesan yang saya buat di blog ini yaitu pesan kepada para pembaca artikel agar dapat memberikan komentar ke artikel yang dibaca seperti dibawah ini


Sebelum kita mulai bagi Muslim jangan lupa baca

Ok langsung aja ke TKP langkah – langkah untuk membuat kotak pesan dibawah postingan  blog sebagai berikut :
1. Seperti biasa masuk ke akun blog anda 
2. Pilih rancangan 
3. Pilih edit HTML
4. Centang Expand Template Widget, Sebelum mengedit silahkan download dulu template anda untuk menjaga kalau – kalu dalam melakukan perubahan terjadi kesalahan (error)
5. Cari kode HTML ini <div class='post-footer'>
6. Copy code ini dan pastekan sebelum / diatas kode <div class='post-footer'> yang tadi
<!-- Kotak Admin mulai -->
<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> ~ Mansyur Syamsudin</h4>
<div class='kontainer'>
<img src='http://lh6.googleusercontent.com/-LxU5AKvZrKk/AAAAAAAAAAI/AAAAAAAAAB8/DzQCzqCFvL8/s512-c/photo.jpg'/>
Artikel <a expr:href='data:post.url'><data:post.title/></a> ini diposting oleh <data:post.author/> Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel <a expr:href='data:post.url'><data:post.title/></a> ini.Di Posting  <data:post.dateHeader/>.  Tak Lengkap Rasanya Jika Kunjungan Anda di Blog ini Tanpa Meninggalkan Komentar Untuk Itu Silahkan Berikan Kritik dan saran Anda Pada Kotak Komentar Di Bawah. Semoga Artikel <a expr:href='data:post.url'><data:post.title/></a> dapat Memberi manfaat untuk Anda ..Trima Kasih. :)
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Kotak Admin end -->
7. Silahkan ganti link URL gambar profil ('http://lh6.googleusercontent.com/-LxU5AKvZrKk/AAAAAAAAAAI/AAAAAAAAAB8/DzQCzqCFvL8/s512-c/photo.jpg') dengan link gambar profil sahabat. Ganti juga kata-katanya sesuai keinginan teman-teman.
8. Kemudian cari lagi kode ]]></b:skin>
9. Copy kode CSS dibawah ini dan paste tepat diatas kode ]]></b:skin>

.admin-tulisan{
display:block;
width:auto;
background:#CFE2E0;
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:#ffffff;
border:none;
border-bottom:1px solid #699019;
color:#000;
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:#FF0000;}
.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;
}

10. Simpan / save, semoga bermanfaat

Tidak ada komentar:

Posting Komentar

Silahkan berkomentar, tetapi harus tetap jaga kesopanan ya broo !
Admin sangat memelukan kritik dan saran untuk kebaikan blog ini.
Thanks