Thursday, December 23, 2010

Tutorial: Memasang blockquote di blogspot

 

coding_image

Ini adalah tutorial pertama yang aku bakal buat. Tutorial ni dibuat berdasarkan beberapa rujukan tutorial yang aku pakai semasa aku sendiri nak pasang blockquote dekat dalam entri aku dulu..tapi tak pernah aku pakai..hahaha..sebab nak tengok effect blockqoute aku ni masih jadi ke tak.. aku pun cubalah membuat tutorial bagi menampakkan kegunaan blockqoute.

First Step – step ini adalah untuk backup template lama anda sekiranya ada sebarang masalah di hadapi kemudian nanti.

blogger account ----> dashboard ---->design ----> edit HTML ----> download full template.

Second Step – setelah selesai save template anda, pergi ke tempat yang sama dan tick pada kotak expand widget di sudut kanan code template anda.

dashboard ---->design ----> edit HTML ----> tick pada kotak expand widget templates.

Third Steplangkap ini adalah untuk memudahkan anda mecari coding semasa proses mengedit atau mengubahsuai template anda.

Tekan keyboard korang Ctrl-f  dan cari code ini .post blockquote {  dan kemudian select atau boldkan semua coding di bawah ini :

.post blockquote {
margin:1em 20px;
}

Seterusnya gantikan semua code di atas dengan coding ini:

.post blockquote {
background: #FFFFFF;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;

padding: 6px;
Border: 2px solid #990033;
margin:1em 20px;

Sudahkah?

Ok kalau sudah,sekarang mari kita ke langkah seterusnya,

Fourth Step – langkah ke-empat adalah untuk meng-edit code agar menepati cita rasa anda. dekat sini kalau faham coding memang kacang lah nak edit, petik jari je.. tapi tak paham takpa, kita slow-slow belajar k… jangan putus as ;p

Kalau tadi kita dah gantikan coding asal itu, pasti kita nak tahu apa yang kita gantikan itu dan kenapa kita gantikan coding itu bukan.. ok sekarang , aku akan explain sikit pasal coding ni, so that nanti korang semua boleh edit mengikut citarasa korang k..

kalau korang lihat dekat coding last yang aku bagi tu, ade yang aku bold certain perkataan kan? Perkara yang aku bold ni lah yang korang boleh main dengan codingnya untuk dapatkan blockqoute citarasa korang sendiri ok.

background- #FFFFFF ; merupakan coding yang aku pakai iaitu warna putih. Korang ubahlah ikut warna yang korang nak. Oh ya, kalau korang nak background yang bergambar, korang boleh juga letakkan tetapi codingnya berbeza sedikit. Itu mungkin aku terangkan dalam tutorial akan datang. Untuk tutorial kali ini biar aku bagi basic steps untuk buat blockqoute yang simple dahulu ya.

seterusnya…

-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;

ini adalah coding untuk membuatkan border anda menjadi berbucu bulat seperti ini:

bucubulat TETAPI sedikit peringatan disini, jika anda menggunakan browser google chrome ataupun IE effect bucu bulat ini tidak akan dapat anda lihat.. tetapi jika anda menggunakan firefox anda akan nampak effect bucu bulat seperti gambar diatas.. gambar itu merupakan view salah satu sidebar aku menggunakan firefox  dan bukan google chrome. Kalau anda pakai google chrome akan jadi bucu tajam ya. Coding 10px itu adalah untuk berapa bulat anda nak bucu anda.

Border: 2px solid #990033;

2px itu boleh anda edit untuk menebalkan line border anda atau menipiskannya, no kecil mewakili kenipisan border itu.

Manakala perkatan solid itu adalah untuk menunjukkan jenis line border untuk blockqoute anda, jika anda mahu garisan:

………….. => gantikan solid dengan ---> dotted
- - - - - - - => gantikan solid dengan ----> dashed

Manakala seperti background tadi, anda boleh ubah warna border anda, code yang saya pakai adalah warna maroon.

Macam mana? sudah puas edit?

ok sila save template anda sekarang..

Selepas sudah save template anda, cuba buat satu entri dan taipkan beberapa patah ayat dan kemudian select semua dan tekan butang ini:

kalau anda menggunakan windows live writerWLW_BQ

Jika anda menggunakan blogspot editor qoute_blogspot

 Jika anda menggunakan windows live writer jangan lupa untuk update theme anda ya!

Ok try publish or preview? amacam jadi tak? hehehhe..

Selamat mencuba!

p/s: jika ada silap atau apa-apa jangan segan-segan tegur ;p

2 comments:

zuar said...

macam susah je ni nak ikut..hehe

elyana yazmin said...

hah? yeke susah ke? ade ape2 masalah ke?

ke ade care lebih sng nak buat cara blockqoute yang lebih menarik?
;p

Related Posts Plugin for WordPress, Blogger...