Tutorial: Cara Buat Kotak Blockquote



Pagi2 ni try edit blockquote di theme baru…sebab yg asal tk cantik…kosong aje…tp sebabkan dh lama tk bermain ngn kod…lupa camne nk buat..terpaksa la godek pakcik google cari tutorial…

Jadi utk rujukan masa hadapan…sya buat entri tutorial cara buat kotak blockquote…nanti senang nk rujuk bila tiba masa…dan boleh juga share ngn kawan2…

Sya suka blockquote bentuk cam dibawah ni…

blockquote

caranya senang shj…tekan CTRL + F di editor(blogspot) atau style.css file (utk wordpress), taip ‘blockquote’

dah jumpa…highlight semua kod yg ada, gantikan dengan kod dibawah…penting!!! jgn lupa backup dahulu template atau file asal yea….takut ada masalah blh guna semula nanti…

blockquote {
margin: 5px 5px;
padding: .5em 1em;
font-style: italic;
border-left: 5px solid #6E1319;
border-right: 1px dashed #6E1319;
border-top: 1px dashed #6E1319;
border-bottom: 1px dashed #6E1319;
background-color: #FFF2F2; }
blockquote p {
margin: 0; }

penerangan ringkas mengenai kod

blockquote {
margin: 5px 5px; – ini adalah jarak bhgn tepi kiri dan kanan kedudukan blockquote dalam post
    padding: .5em 1em; – jarak text yg ada dlm blockquote dengan border di kiri dan kanan
    font-style: italic; – style font yg nk digunakan
    border-left: 5px solid #6E1319; – border tebal di bhgn kiri dan warna pilihan (warna blh pilih di SINI)
    border-right: 1px dashed #6E1319; – border di bhgn kanan (kalau tk suka…kod ini blh delete)
    border-top: 1px dashed #6E1319; – border di bhgn atas (kalau tk suka…kod ini blh delete)
    border-bottom: 1px dashed #6E1319; – border di bhgn bawah (kalau tk suka…kod ini blh delete)
    background-color: #FFF2F2; } – background colour dlm blockquote, blh tukar ikut citarasa (kod utk colour blh rujuk di SINI yea…)

jenis border yg anda boleh guna utk blockquote – blh rujuk di SINI

 

12 thoughts on “Tutorial: Cara Buat Kotak Blockquote

  1. Budak Lanun February 16, 2012 at 4:39 pm

    Assalam, nice tuto… nak buat jugalah… lagipun aku tak da blockquote nie… hehehe… Terima kasih…
    Budak Lanun recently posted..Hukum Memakai Cincin, Gelang Tangan dan Rantai Leher Bagi Lelaki IslamMy Profile

  2. zie fauzi December 1, 2011 at 2:12 am

    skodeng tutorial ni jap.. tp zie x jumpa style.css file kat theme blog… camana nak buat?
    zie fauzi recently posted..Gadget Impian | Anda Penentu Impian Ibu AlyaMy Profile

  3. puanbee November 1, 2011 at 9:43 pm

    cantik2 nanti nak try wat ..
    puanbee recently posted..Giveaway Herba Maharani Puanbee & AyujamalMy Profile

    • SyamilaMohd November 2, 2011 at 8:25 pm

      buat la bee..senang je…

  4. sw33tdarling November 1, 2011 at 1:46 pm

    ahhhhh cerewetnya untuk wordpress

    • SyamilaMohd November 1, 2011 at 2:02 pm

      tak de la…wp la best…lagipun setting tu sekali je….

  5. nuriz October 31, 2011 at 9:00 pm

    wah sis, template dah berubah wajah..lama tak jenguk sini
    nuriz recently posted..Majlis Pertunangan Erni Dekritawati Secara TertutupMy Profile

    • SyamilaMohd October 31, 2011 at 11:38 pm

      a’ah..dh berubah wajah…

  6. kakyong October 31, 2011 at 1:55 pm

    sesuai blockquote sya dgn tema baru blog..
    kakyong recently posted..Tahniah Boboiboy dan Animansto StudiosMy Profile

    • SyamilaMohd October 31, 2011 at 11:37 pm

      cantik kan…hik3

Leave a Reply

Name *
Email *
Website

CommentLuv badge