Membuat Kotak Catatan di Postingan Blogspot

Posted by Beben;. 28 September 2010

Sebenarnya bingung mau memberi judul apa di artikel ini, tapi untuk lebih jelasnya silahkan disimak saja :p. "It's idea just come from newbie like me.."

Kemarin saya mempunyai ide untuk membuat agar catatan khusus di area postingan bisa lebih nampak. Akhirnya saya menggunakan tehnik CSS (Cascade Style Sheet). Nah kalau masih bingung juga dengan maksud saya, silahkan klik SEO Title Blogspot, atau Class Combobox PHP pada blog saya, atau juga dapat dilihat di postingan "Membuat Kotak Catatan di Postingan Blogspot" ini. Kalau sudah tau maksud saya apa dan ingin membuat yang seperti itu, silahkan duduk manis, tangan dimuka, sikap!! :p ...Try it!!!!
1. Login ke halaman admin area blogspot Anda.
2. Masuk ke tab menu Layout.
3. Pilih tab menu Edit HTML.
4. Kasih "tik" pada Expand Widget Template :p*)
5. Kita masuk kebagian paling "sangar" dari trik ini, be carefull rek...!!! (*padahal trik cupu.... :p*)
6. Masukkan kode dibawah ini pada bagian kode CSS, kalau belum tahu kode CSS terletak di bagian antara /* Variabel turun teruuuussss...kebawah...sampe bagian sebelum
7. Nah agar kode template HTML kita tetap rapi sebaiknya letakkan di bawah CSS "POST", cari aja tulisan "post" dibagian CSS. Ini untuk menandakan bahwa kode yang kita buat untuk bagian postingan.
8. Sekarang Copas kode dibawah ini :

.postbergaya {
font-family: "courier new", verdana, lucida;
padding: 0px 10px 10px 20px;
background-color: #e6e6e6;
}

9. Kalau sudah, jangan lupa simpan dengan menge-"thik" Save Template.
10. Script sudah selesai dan siap disajikan. Bagaimana caranya? Tarik scrol kebawah lagi... :p
11. Pada saat memposting postingan (kok jadi berulang-ulang gini...), masuk ke mode Edit Html jangan Compose.
12. Nah jika ingin membuat catatan yang ditampilkan bergaya seperti script yang kita buat, jangan lupa letakkan kode :

tempat catatan...

jadi catatannya diletakkan di tulisan "tempat catatan..." diatas.

Beberapa catatan:
a. "bergaya" adalah nama script yang kita buat (nama class CSS).
b. font-family adalah nama font yang kita gunakan, jika nama font terdiri dari 2 kata maka kurung dengan tanda petik(")
c. padding adalah jarak antara teks dengan border terluar, dengan format atas, kanan, bawah, kiri.
d. background-color tentu saja warna latar dari catatan kita.
e. Berikut beberapa setingan yang bisa ditambahkan:

- color: #nilaiwarna ---> untuk warna font
- border: 1px solid #nilaiwarna ---> untuk memberi border, nilai 1px adalah ketebalan, solid: padat(bisa diganti dotted: titik2)

Sebenarnya masih banyak lagi trik untuk mempermanis tampilannya, silahkan cari referensi CSS atau kalau masih bingung bisa ditanyakan.

* Catatan terakhir: Contoh tampilan yang saya gunakan diatas menggunakan script sama dengan .postbergaya(baca class postbergaya) yang saya contohkan.

Sekian, semoga bermanfaat