Cara Membuat Kotak Pesan Informasi Artikel Pada Area Postingan

Bookmark and Share
Assalamu'alaikum Wr. Wb.

Alhamdulliah, segala puji kepada Allah SWT. Atas rahmat dan karunianya, saya masih bisa diberikan kesempatan untuk ngeblog. Hehe.. Berhubungan pada postingan yang lalu, mengenai Cara Memasang Iklan PPC di Area Postingan. Ada komentar yang mengajukan bagaimana cara membuat kotak dibawah widget sharing this sexy ? atau yang biasa dibawah/diakhir artikel pada blog ini loh.. yang isinya mengenai pesan informasi artikel. Nah, komentar tersebut diajukan dari sahabat blogger juga. Lalu seperti apa sih bentuknya ? mari kita preview terlebih dahulu..

Berikut screen shotsnya..

Cara Membuat Kotak Pesan Informasi Artikel Pada Area Postingan

Nah, kotak tersebut saya berinama sama dengan untuk title post artikel ini, yaitu Kotak Pesan Informasi Artikel. Lalu, bagaimana Cara Membuat Kotak Pesan Informasi Artikel Pada Area Postingan ?

Berikut langkah-langkahnya..

1. Login ke blogger dengan akun anda yang pastinya.
2. Setelah sampai dihalaman dasbor. Lalu pilih dan klik "Rancangan".
3. Pada tab "Rancangan", pilih dan klik "Edit HTML". Pada halaman ini, silahkan sobat beri centang pada pilihan "Expand Template Widget".

Berikut kode yang membentuk sebuah kotak tersebut.

#kotak-pesan {
margin:0 0 5px;
padding:4px;
background:#f5f5f5;
border:1px solid #ccc;
}
#kotak-pesan .informasi {
line-height:16px;
margin:0;
padding:2px;
height:80px;
}
#kotak-pesan .informasi a {
text-decoration:none !important;
}

Catatan : Pada kode yang berwarna merah, sesuaikan dengan warna yang sobat sukai. Dan, untuk kode warna sendiri sobat, dapat melihat sourcenya di http://camex.wen.ru/Sampel/Warna.html. Dan pada kode yang berwarna biru, sesuaikan dengan template sobat. Karena kode tersebut adalah kode tinggi pada kotak tersebut.

4. Kode tersebut sobat letakkan diatas kode ]]></b:skin>.
5. Lalu setelah itu, lihat pada format dibawah ini.

<div id='kotak-pesan'>
<div class='kotak-pesan'>

<--- ISI DENGAN PESAN INFORMASI ARTIKEL SOBAT --->

</div>
</div>

6. Jika sudah, silahkan cari kode <data:post.body/>. Jika pada kode <data:post.body/> sobat menemukan 2 kode <data:post.body/>. Pilih kode <data:post.body/> yang kedua jika sobat ingin menampilkan kotak pesan informasi artikel tersebut dibawah postingan. Jika sobat ingin menampilkannya diatas postingan, sobat tinggal meletakkannya diatas kode <data:post.body/> yang kedua.

Semoga sobat bisa mencerna, hehe.. maaf kalo buat ribet membacanya pada point terakhir ini.. semoga sobat dapat mengerti. Terimakasih kepada sobat Daris Firzan, karena permintaan postingannya saya bisa posting artikel ini. Hehe..

Semoga berguna dan bermanfaat.
Akhir kata...

Wassalamu'alaikum Wr. Wb.