Thursday, January 1, 2015

Tutorial Nak Buat Kotak Dalam Post

Atas permintaan ramai hari ni saya nak ajar tutorial cara-cara nak buat kotak berwarna dalam post entry seperti contoh dibawah ini;

Macam mana nak buat kotak dalam entry?  - Blogger
Dah macam cikgu plak sekarang. Saya ni tak de la pandai sangat nak mengajar tutorial bagai ni kan, cuma ada sedikit pengetahuan yang saya belajar daripada otai-otai blogger jadi, saya nak forward kan kepada para blogger yang lain especially yang masih baru dalam dunia blog dan memang tak berapa nak pandai bermain koding HTML. Saya dulu ada la belajar as a programmer masa kat kolej  ni dan biasa la bermain dengan koding HTML ni. Jadi, serba sedikit basic tu memang dah ada so mudah la nak bemain dengan koding, tapi memang kalau jenis tak biasa main dengan koding sudah tentu pening kepala kan. Tak pe tak pe...yang penting kita nak belajar. Ok murid-murid, first step nak buat kotak dalam entry korang pergi dekat;

  • dashboard pegi ke pegi ke layout ==> Edit HTML ==> tick Expand Widget Templates
     
  • then ctrl + f , cari word .post blockquote { highlite semua word bawah ini }

.post blockquote {
margin:1em 20px;
}
  • And then, copy and paste kan dengan code di bawah ini;

.post blockquote {
background: #FFCC99;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
padding: 6px;
Border: 1px solid #ff0d62;
margin:1em 20px;
So, sekarang mari kita belajar sama-sama =D

.post blockquote {

background: #FFCC99; ( bold : ini background belakang warna oren) korang boleh ubah dekat sini contoh nak tukar color hitam tukar lah kepada #000000)

-moz-border-radius-topleft: 10px; -moz-border-radius-bottomright: 10px; ( bold : ini border dia. kalau nak ubah, just ubah top atau bottom. Sukahati korang nak buat macam mana pon)

padding: 6px; ( tak perlu ubah )

Border: 1px solid #ff0d62; ( ini border color merah. kalau nak tukar line dia tebal, tambah lagi 1 kepada 5 atau 10px.

solid adalah garisan lurus. contoh ___________
dotted adalah garisan titik² contoh .........................
dashed adalah garisan putus² contoh _ _ _ _ _ _ _

margin:1em 20px; ( tak perlu ubah )
}
  • Lepas dah puas hati bagai kan baru la klik SAVE.

Setelah itu, korang pergi la buat NEW POST and then taiplah ikut sukahati korang, lepas tu HIGHLITE kan word yang korang nak letakkan dalam kotak and then klik butang QUOTE yang bertanda koma macam ini;


*Klik gambarajah


KALAU anda tak jumpa code blockquote, anda boleh terus copy code yang di beri dan paste kan sebelum;
]]></b:skin>
Ok, SELAMAT MENCUBA!

12 comments:

ardinihumaira said...

whoaaaaaaaaaaaaaaa mekasih dear!
nak cuba pas2ni.. bookmark entry ni :D yeah!

@juera said...

ardinihumaira--> ok slmt mencuba..=D

Redbloodsnow said...

eee....sgttt berguna! thanx yang. nnti free aku nk try. lame dah aku nak cari tutorial gnie² taw. its for my gossip blog..hee hee ^_^

@juera said...

Redbloodsnow--> bo bleh la cuba bt..if x phm ker..nnti contact me k!daaa..=D

ardinihumaira said...

sedih tau tak leh nak copy nak buat block quote ni. huhu... tak dapat buat jugalah dni nampak gayanya :'(

@juera said...

ardinihumaira--> dni kasi email..nti jura email kn kod tu..peace~

Siti NuruL Ain said...

thanks for this tutorial..sangat membantu.. I'm searching yang paling mudah, anad jumpa blog you.. thanks.. follow you darla..;)

@juera said...

siti nurul ain : ur welcome dear ^__^ tq follow me..salam perkenalan =)

MAYA_mustwany said...

salam.nak tanya,kalau nak wat 1page web tuh macam mana ye?macam kak juera wat web ym tuh.

@juera said...

MAYA_mustwany : erm x paham la dik..mcm ne tu?

inasazali said...

dh jadi dh..time kasih..sgt2 mmbantu :)

@juera said...

inasazali: ur welcome :)