Cara Membuat Kotak Pesan Di Bawah Posting Blog

Cara Membuat Kotak Pesan Di Posting Blog - Banyak trik untuk membuat tampilan blog lebih menarik dan sempurna. Salah satunya Memasang Kotak Pesan Di Akhir Posting yang berisi pesan dari Admin/ Penulis Blog. Cara Membuat Kotak Pesan Admin Di Posting Blog. Silahkan di kreasikan masing-masing. Sahabat blogger juga mengisi Kotak Pesan dengan kata-kata unik dan lucu. Untuk Link nama admin/ penulis blog, judul posting, dan tanggal diterbitkannya saya sudah sertakan dalam script Kotak Pesan Admin ini. Sehingga sahabat blogger tidak perlu mengisi link secara manual. Sahabat blogger langsung saja melihat contoh Kotak Pesan Di Akhir Posting Blog yang telah saya lakukan.

Cara Membuat Kotak Pesan Di Akhir Posting :

1. Login ke dashbord sahabat blogger.

2. Pilih Rancangan, Lalu pilih Edit HTML. Centang Expand Template Widget.

3. Cari Kode <div class='post-footer'> pada template sahabat blogger.

4. Copy Scrit Kotak Pesan dibawah ini dan pastekan tepat diatas kode <div class='post-footer'> tadi.

<!-- 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> DESKRIPSI BLOG ANDA </h4>
<div class='kontainer'>
<img src=' ALAMAT URL FOTO ANDA '/>
Artikel <a expr:href='data:post.url'><data:post.title/></a> ini diposting oleh <data:post.author/> pada hari <data:post.dateHeader/>. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar.
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://no-doong.blogspot.com/2012/06/cara-membuat-kotak-pesan-di-posting.html' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Kotak Admin -->

5. Selanjutnya cari kode ]]></b:skin> pada template sahabat blogger.

6. Copy kode CSS berikut ini dan paste kan tepat diatas kode ]]></b:skin>. Jika gagal sobat dapat juga meletakkan kode CSS tadi tepat dibawah kode <data:post.body/>.

.admin-tulisan h4{
background:#999999;
border:none;
border-bottom:1px solid #FFFFFF;
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;
}

7. Silahkan Ganti Alamat Url Gambar dengan Alamat Url Gambar Sahabat Blogger

8. Jenis Font, Warna Background, dan Border silahkan diedit sesuka sahabat blogger

9. Preview Dulu, Jika cocok dan bagus, Silahkan Di Save