Wednesday, April 4, 2012

Tutorial Border Blockquote

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. :D

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]

45 comments:

  1. Xixixi... tumben ayu bikin tutorial hehehe...

    btw thanks sharenya, pengen cobain tapi kayaknya masih malas buka2 expand Widget :). izin save dulu aja ya sob.

    ReplyDelete
  2. blockquote mu di taruh dimana yu?

    ReplyDelete
  3. @Anak Rantaulagi pengen aja Bud. :)) Mumpung gampang. XD

    ReplyDelete
  4. wow :D manis...!! aku juga pake tapi bukan style yang ini ^^

    ReplyDelete
  5. gue puyeng mba utak atik HTML sampe2 kaga berani utak atik begonoan :D

    ReplyDelete
  6. @Nurmayanti Zain^^ Btw, kok blog Mbak gak bisa dikomen yaa? :(

    ReplyDelete
  7. hayooooo! cari apa di blog saya siang-siang,...
    hmmm, ini yang mencuri hati kamu blockquyotenya atau sayanya yah^^

    btw, ayu memang printer deh! kl saya mah bawaan template sajah...

    ReplyDelete
  8. @s y a m:uhuk: ada yang punya :uhuk: XD

    haloooo *rolling eyes*

    ReplyDelete
  9. @Ayu Welirang siapa yang punya siapa emang :p

    ReplyDelete
  10. Aku paling males otak-atik html... Untunglah masih bisa nyuruh2 suami masalah html :D

    ReplyDelete
  11. @s y a mada yang punya blognya Rumah Matahari. Hehe. :D

    ReplyDelete
  12. @Haya Nufusberhubung saya gak punya suami, jadi musti cari sendiri Kak. T_T

    ReplyDelete
  13. @NFhmm. maksutnya gimana yaa. @[email protected] aku bingung

    ReplyDelete
  14. weitt ... ngoprak ngoprek nih rupanya, okey ...siiippp :D

    ReplyDelete
  15. @Stupid monkeyiya Oooom.. aku kangen jaman stm. XD

    ReplyDelete
  16. Kereeennn :) Save yah .. makasih sharingnya ...

    Tanggal lahir Ayu berdekatan dengan Athifah, Athifah 24 September.

    Tahun lahirnya .... waduh, saya sudah SMA waktu itu :D (tua amat yak hehehe).

    ReplyDelete
  17. @Mugniarwaaaaaah. tetanggaan sama Athifah yaaa Mama. ^^

    ReplyDelete
  18. View mobile template kok efek blockquote-nya gk nampak, Yu?

    ReplyDelete
  19. waah, mungkin saya nya yang tulul, dulu pernah ngutak-atik html, tapi malah templatenya jadi acak-acakan.
    XD

    alhasil, sampai sekarang saya masih "trauma" buat ngoprek2 yang namanya html.

    ijin save dah, siapa tahu, kelak trauma saya ilang. ;P

    eh, btw, Kak Ayu lahir tahun 89 ya??
    XD

    aduh, aduh...
    tapi mau gimana ya,, kuganti jadi panggil Sist Ayu aja deh ya...
    :D

    ReplyDelete
  20. aduh gak berani utak-atik, pasrah aja..hehe...^^

    ReplyDelete
  21. Kyaaa, komen ane tadi masuk spam, ya mbak?

    ReplyDelete
  22. pengen nyobaaa...bQ punyaku polos banget soalnya

    ReplyDelete
  23. @Ayu Welirang yalah, yang punya kan sayaaaa :)

    ReplyDelete
  24. sepertinya aku tertarik,ntar dicoba deh..

    makasih ya yu,infonya^^

    ReplyDelete
  25. mau nyoba tapi gak sekarang masih pusing nt gak mudeng2 buka edit html :P

    ReplyDelete
  26. @eksakbuat mobile template musti tambah css lagi coy :(

    ReplyDelete
  27. @enhaoke kakaaaak. pasti kakak lebih tua yaaa ^^

    ReplyDelete
  28. @iwanlohhh apa itu bahasanya pasrah... XD

    ReplyDelete
  29. wah pinter ya edit2 kode HTML, dari warna putih aja saya udah lupa kodenya kaya gimana? Belajar dimana? :D

    ReplyDelete
  30. hmmm....sifat yang Bagus masih mau belajar..... Haha....

    ReplyDelete
  31. nice info :D sangat membantu :)

    ReplyDelete
  32. tetap aja bingung, bantuin donggggg

    ReplyDelete
  33. tetap aja bingung, bantuin dong

    ReplyDelete
  34. Gak begitu ngerti juga, tapi kalau di WP nggak pakai ginian...

    ReplyDelete
  35. @Falzart PlainIya di WP kan kalo gak beli custom domain gak bisa edit HTML. :P

    ReplyDelete