Cara Membuat Pesan Dibawa Posting Blog

Assalamu Alaikum Wr. Wb. Semoga para Sahabat selalu dalam lindungan Allah SWT dan sukses selalu serta tetap semangat. Amiinnnn….

Baiklah dalam artikel kali ini saya akan  share cara membuat kotak pesan di bawah postingan blog yang saya kutip dari CatatanGoogle. TutorialBlog.

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

Terima Kasih Kepada http://catatan-google.blogspot.com (Sumber artikel)