Tutorial Buat Kotak Blockquote

Setelah sekian lama tak edit blog dan juga buat tutorial, kali ni ina nak ajar korang  buat kotak Blockquote. Pada yang tak tahu apa Blockquote, korang boleh tengok contoh dibawah..


Untuk mengunakan Blockquote korang mesti tekan “ untuk mendapat kan hasil nya

1.       Design > Edit Html > Template Design > Advance > Add css
2.       Copy dan paste code dibawah
.post blockquote {
 background:  #FFF380  ;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
padding: 6px;
Border: 1px solid #000000;
margin:1em 20px;
}
Purple: warna untuk background..korang boleh tukar warna mengikut citarasa korang, code warna korang boleh tengok kat sini

Merah: garisan untuk border

solid : (___________)
dotted : (................)
dashed : _ _ _ _ _ _ _ )

hijau: warna kotak kotak blockquote

Kalau nak gantikan dengan gambar sila replace code background: #FFF380; dengan code ini
background-image:url(URL GAMBAR BACKGROUND BLOCKQOUTE); contoh seperti dibawah:-

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

http://25.media.tumblr.com/tumblr_l8n4cjiqwU1qcdtsho1_250.gif

 
http://www.sadmuffin.net/cherrybam/myspacelayouts/polkadots/29.gif
 
http://30.media.tumblr.com/tumblr_l8lvn7YIsb1qcdtsho1_400.jpg 
http://content.mycutegraphics.com/backgrounds/color/colorbg25.gif 
 http://content.mycutegraphics.com/backgrounds/color/colorbg25.gif
Tiny Colorful Dots Background
http://content.mycutegraphics.com/backgrounds/color/colorbg23.gif


#korang boleh guna background yang ina bagi 



3 comments:

Dila azie said...

Salam , hi . Thanks for sharing ! (:

r0sLiNa said...

Dila azie :thank

♥ Lia Abdillah ♥ said...

thanks sys . da menjadi pon . da byk tutorial yg Lia buat xjadi pon . Ni punya jadi . So, alhamdulillah . btw, thanks for da tuto :)

Copyright Reserved by Roslina