Monday, April 9, 2012

Modifikasi Kotak Blockquote



Assalamu 'alaikum, Sobat Apa yang elo tahu tentang tanggal 9 april? Selain tampilan Google Doodle yang dicatet ama , ternyata 9 April adalah peringatan HUT TNI AU Republik Indonesia! Biasanya di markas TNI AU diadain akrobat manuver pesawat dan atraksi terjun payung. Di mana para pilot terlatih dengan pesawatnya bakal jungkir balik dan bermanuver ria di udara.

Well now! Gue bakal bermanuver dengan -moz-border-radius- pada kotak blockquote yang biasa kita paké buat ngasih tag buat tulisan yang dianggep penting. Udah tau kan cara masang blockquote? Kalo belom, cek cara pasangnya di mari:

1. Go to Rancangan --> Edit HTML
  • Cari kode:
    .post blockquote {
    margin:1em 20px;
    }
  • Kalo gak ada, cari kode ini aja:
    ]]></b:skin>


2. Dah Ketemu?
Ganti kode pertama atau tarok di atas kode kedua,

.post blockquote {
background: #FFF380 ;
-moz-border-radius-topleft: 10px;
-moz-border-radius-
bottomright: 10px;
padding: 6px;
Border: 1px solid #000000 ;
margin:1em 20px;
}




3. Tambah Gambar
Nah! Buat nambahin gambar pada background, elo pake deh kode ini:

.post blockquote {
background: url ( URL gambar elo ) repeat;
-moz-border-radius-topleft: 10px;
-moz-border-radius-
bottomright: 10px;
padding: 6px;
Border: 1px solid #000000 ;
margin:1em 20px;
}




4. Simpan & Selesai.

So, udah ngerti kan gimana penerapannya? Tarok tulisan elo di antara kode <blockquote>bla...bla...bla...</blockquote> pada edit HTML entri baru!

MODIFIKASI
1. background
:#FFF380, warna belakang kotak blockquote elo.

2. -moz-border-radius-
Bentuk kotak blockquote. Elo bisa ngubah top, bottom, left dan right-nya sesuka hati elo. Misal:


  • -moz-border-radius-
    bottomright: 50px;
    border-bottom-right-radius: 50px;
    }

  • -moz-border-radius-
    bottomright: 50px 25px;
    border-bottom-right-radius: 50px 25px;
    }

  • -moz-border-radius-
    bottomright: 25px 50px;
    border-bottom-right-radius: 25px 50px;
    }

  • -moz-border-radius: 1em 4em 1em 4em; border-radius: 1em 4em 1em 4em;
    }

  • -moz-border-radius: 25px 10px / 10px 25px;
    border-radius: 25px 10px / 10px 25px;
    }

  • -moz-border-radius: 35px; border-radius: 35px;
    }

3. border : 1px
Tebal border kotak blockquote. Atur-atur aj, deh!
4. solid.
Bentuk garis border. Bisa solid, dotted, dashed, dll.
5. #000000
Warna border kotak blockquote.

Well, itu aja sob yang bisa gue share kali ini! Elo bisa gonta-ganti nilai px sesuka elo. Bikin sebeda mungkin ama yang biasa ada! Moga mangpaat dan mangdadang, ea...

Happy Blogging 'n Keep On Fire!
Wassalaam...



51 comments:

  1. brow, gambarnya kegedean ye ?? :D

    ReplyDelete
  2. Kalo yang kayak punyamu biru itu piye mas
    Kalo tetep kotak ga ubah sudut. *mumet*

    ReplyDelete
    Replies
    1. Udah dibahas semalem! Bhahaha

      Delete
  3. thank infonya kawan. sangat bermanfaat!
    lewat blog sobat, gue mo sekalian langsung ngucap'in "SELAMAT HUT TNI AU", semoga Indonesia semakin jaya di udara!

    ReplyDelete
    Replies
    1. Sama-sama, bung! Semoga bermanfaat .... B-)

      Delete
  4. Commentnya:
    1. Thx impormasinya ke KArimunjawa ya?
    2. baca 3x baru ngeh cara penggunaannya, tiap kali posting tibae nulis blocquote'nya #dasar gaptek

    ReplyDelete
    Replies
    1. 1. Sama2 mbak! ;-)
      2. Hehehe

      Delete
  5. ooo begituuu *manggut2 hehe

    ReplyDelete
    Replies
    1. Yoyoi, mbak! *geleng2

      Delete
    2. kalo yang pake tanda kutip gimana? sepertinya lebih simple, tapi tanda kutipnya warna pink :D

      Delete
    3. Cari ikon blockquote yang warna pink! Bisa jpg, png, dll. Trus pasang deh URL-nya di tmpt Url gambar! Hehehe

      Delete
  6. wah ada jamunya tarnyata ya mas... ijin di cicipin dulu ya...

    ReplyDelete
    Replies
    1. Yupz! Silahkan diicip-icip, Mas! Mumpung masih anget... Hehehe

      Delete
  7. wah utuk lebih menekan kan ya gan? mantap nie... ane ud utak atik, ente ternyata lebih mahir.

    ReplyDelete
    Replies
    1. Ya gak donk, sob! Bisa aja ente lebih mahir? Yg penting berkreasi... ;-)

      Delete
    2. heheh, ane juga modal nyoba nyoba doang gan. kali aja mujur bisa nemuin rumus. hehe.

      Delete
    3. Itulah modal kita, sob! Eh, modal ane! Hehehe

      Delete
  8. keren sob Blockquotenya
    izin simpan ya

    ReplyDelete
  9. owh gt ya maksudnya blockquote, baru tau :D

    ReplyDelete
    Replies
    1. Hehehe, iya jeng! Kmn aje baru methungul? :-P

      Delete
  10. Biar bentuknya lope-lope (love), modif radius en px nya gimana, Kang ? o_O

    ReplyDelete
    Replies
    1. Belom pernah nyoba, kang! Coba diutak utek sendiri! Hehehe

      Delete
  11. Save disik lewat pdf aaaahhhh :D

    ReplyDelete
    Replies
    1. Monggo, kang! Dipunkersa'aken... :-P

      Delete
  12. wah ini pelajaran baru buat sy sob,, sy suka yang kaya ginian.. tengkyu sob mau praktek dlu

    ReplyDelete
    Replies
    1. Silahkan, Andi praktekkin! Smoga berhasil, ya... ;-)

      Delete
  13. woi woiiii woiiiiiiiiii mamperrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr

    ReplyDelete
    Replies
    1. ganti baju ya bro ??? lbh asik ni, ga sakit mata liatnya hehehe

      Delete
    2. Woiii! Dah sehat ya, Mi? Makanya treak2... Selamat menikmati! :-D

      Delete
  14. Wiw.. Makasih tutorialnyaaaa. :D

    ReplyDelete
  15. keren sob.., catet...! *smile

    ReplyDelete
  16. Mantappppp aku udah ada style sendiri kalau untuk blockquote :D

    ReplyDelete
    Replies
    1. Style sendiri itu yg mantap, sob! Lanjutt... ;-)

      Delete
  17. Oke, oke, pengen nyoba tapi aku masih setia sama tampilan blockquote-ku yang sekarang, walaupun agak nyeter warnanya, hehehe

    ReplyDelete
    Replies
    1. Nyeter kayak yg punya blog! Hehehe

      Delete
  18. nice :)
    saya senang mengikuti postingan anda
    postingan yang menarik .

    salam kenal yya dan sempatkan mampir ke
    website kami.

    ReplyDelete
    Replies
    1. Makasih, sob! Oke, tunggu ane di tempat ente, ya! ;-)

      Delete