Teman-teman. Tumben banget kemarin sore saya ngulik HTML dari blog ini secara otodidak, tanpa tutorial. Lagipula, saya kangen masa-masa STM dan kuliah ekstensi IT dulu. Dulu saya memang basic dari bagian IT dan sekarang banting setir jadi jurnalis. Yah, saya memang hobi nulis dan nge-warta. Jadi, saya malah kuliah lagi di FISIP. Sebenarnya nggak nyambung, karena saya dari IPA ke IPS. Ya sudahlah, tak perlu dibahas. Hehe.
 |
| Contoh Blockquote Syam |
Nah, karena kemarin sore saya iseng-iseng baca buku tentang HTML dan script CSS. Ada yang mendorong saya untuk membuat suatu kode sendiri. Bermodalkan melihat-lihat ke blog teman, saya singgah di blognya Syam. Apa yang saya cari di sana? Selain mencari empunya blog, saya juga mencari apa yang bisa saya terapkan dalam hidup saya. Hehe. Nah, waktu lagi baca-baca, saya menemukan bentuk blockquote dari blog Syam yang mencuri hati saya. Alhasil, saya buka buku HTML dan membuat blockquote sendiri.
Jadilah blockquote seperti ini:
Nama saya Ayu. Saya lahir 23 September 1989 di Bandung. Saya anak pertama dari dua bersaudara. Bla… Bla… Bla… (example)
Mau tahu gimana cara buatnya? Ayo dibaca. 😀
Seperti yang sudah-sudah, tahu kan bagaimana cara untuk mengedit HTML blog kalian?
1. Pertama-tama, masuk ke Dashboard. Lalu masuk ke bagian design dari blog kalian.
2. Pilih halaman Edit HTML.
3. Nah, jangan lupa centang tanda “Expand Widget Templates”.
4. Setelah itu, cari kode di bawah ini. Kalau tidak ada, tambahkan sendiri sebelum kode /b:skin.
.post-body blockquote
5. Tambahkan CSS berikut, dimulai dari kata margin. Color untuk warna font blockquote dan border adalah untuk bingkai blockquote, bisa dashed (garis putus-putus), dotted (garis titik-titik), dan tipe garis lainnya.
.post-body blockquote { — kode yang tadi dicari
margin: 10px 10px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color: #1f6cb2;
background: #aed0f0;
border: 1px dashed;
}
6. Nah, untuk css di atas dengan nama background, bisa kalian tambahkan kode di bawah ini, jika ingin menggunakan gambar sebagai latar belakang blockquote. Kalau mau warna saja, silakan cari kode RGB-nya dari bagian editor blog di “Template Designer”.
background: url (masukkan link gambar); — ini jika ingin memakai gambar
atau
background: #aed0f0; — jika ingin memakai warna
7. Dimana mencari kode warna? Sudah klik menu di step ke-6 belum? Kalau sudah, cari bagian editor Advance dan pilih salah satu menu untuk warna.
8. Misal, pewarnaan header. Pilih warna yang diinginkan dan lihat di samping warna ada kode yang diawali dengan tanda #. Nah, tanda tersebut menunjukkan kode RGB heksadesimalnya. Contoh, #00ffce
9. Sudah? Klik save dan lihat hasil blockquote anda. ^_^
Mudah bukan? Ya jelas laaaah. Kode CSS dan HTML itu tak sesulit yang kalian bayangkan kok! Selamat mencoba! ^__^ Kalau ada pertanyaan, singgahkan saja di kotak komentar.
[Ayu]
Ayu Welirang 
Leave a comment