Assalamualaikum


Yoo . Hari ni apis nak share satu lagi tutorial blockquote . Simple sahaja . Apis pernah pakai before this kalau korang perasan lah . Kalau nak guna sila komen dahulu . Kredit terpulang . Jadi tak jadi pon sila komen juga ya ^^ TQ

LIVE PREVIEW HERE

Code ;

<style>
blockquote{
font:11px dotum;
letter-spacing:1px;
padding:10px;
color:white;
border:7px double #fff;
background:#eee;
-webkit-transition: all 0.8s ease;
-moz-transition: all 0.8s ease;
-o-transition: all 0.8s ease;
-ms-transition: all 0.8s ease;
transition: all 0.8s ease;
}
blockquote:hover{
background:#555;
}
</style>

p/s : Mana mana apis bold kan tu , boleh ubah mengikut cita rasa korang ^^

Tutorial : Blockquote 7

Assalamulaikum

Hai , lama tak bagi tutorial blockquote kan ? sedar tak sedar dah versi ke 7 kot . hehe . versi yang ni agak serabut . haha . tapi apis tetap suka . tidak tahu mengapa . mungkin sebab apis yang buat kot . sebab tu apis suka . okay . tipu . meh jenguk sikit ;

LIVE PREVIEW

Amacam , mau buat itu macam ? nah amek code bawah ni .


- untuk Template designer , paste dekat atas ]]></b:skin> .

- untuk Classic template , paste dekat atas </style>.

blockquote{
font-family:tahoma;
font-size:12px;
text-align:center;
letter-spacing:1px;
padding:10px;
color:black;
text-shadow: 0.5em 0.7em 0.0em black,-0.5em 0.7em 0.0em black,0.5em -0.7em 0.0em black;
background:url(http://i.imgur.com/ROFs4.png);
border:1px solid #aaa;
border-radius:5px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
blockquote:hover{
text-shadow: -1px 0 white, 0 1px white,1px 0 white, 0 -1px white;
}

save and siap . nak pakai wajib bagitau . kredit ? terserah . TQ :)

Tutorial : Blockquote Hover Versi 6

assalamualaikum

rasenye , dah lame apis tak update tutorial . taktau nak update tutor ape dah . ni pon update tutor blockquote hover . tengok tuh , dah versi ke-6 ~ HAHA . tadi tengah buat skin baru . main main code die kejap . akhirnya terjumpe satu hover baru yang agak buruk ! LOL ~ hover ni tak lawa , tapi apis suke ^^v . macam mana hover die ?  meh VIEW dekat sini . tu dia live preview dia . amacam nak ? . oke nahh , ni code die ;

blockquote{
padding:10px;
overflow-x:auto;
border-top:10px groove #eee;
border-left:0px groove #eee;
color:#444;
border-right:0px groove #969696;
border-bottom:10px groove #969696
;-webkit-transition:.4s;
}
blockquote:hover{
color:black;
padding:10px;
overflow-x:auto;
border-top:0px groove #eee;
border-left:10px groove #eee;
border-right:10px groove #969696;
border-bottom:0px groove #969696;
-webkit-transition:.4s;
}

oke , copy and paste la code tuh . code ni untuk blogskin . untuk simple template apis tak pasti boleh pakai or takk . if korang nak try jugakk . korang boleh paste code ni dekat ATAS code nie ]]></b:skin> . oke . tu jehh . selamat mencube ! adios ~

Tutorial : Blockquote Hover Versi 5

.Assalamualaikum.

apis nak buat hover untuk blockquote lagi , sebab tutor ni paling senang . haha . oke , hover kali ni simple je . tapi dah ramai yang pakai . apis je kuno sebab baru nak buat tutor . haha . jomm mula ~

LIVE PREVIEW

1) Dashboard > Design > Edit HTML .

2) Ctrl + F code ni : blockquote {


3) Copy and Paste code bawah ni BAWAH code blockquote { yang korang carik tadi .

text-align:center;
border-left:20px solid #000000;
border-right:0px solid #000000;
background: #FFFFFF;
color:black;
padding:5px;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 1s;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 1s;
}
blockquote:hover{
text-align:center;
border-left:0px solid #000000;
border-right:20px solid #000000;
background: #736F6E;
color:white;
}

4) Preview and save .

p/s : mane-mane code yang apis bold , korang boleh tuka ikot suke korang  oke .

siap . hee , simple and nice kan ? so takde lah serabot sangat korang punye hover . apis suke yang simple - simple . tak suke serabot - serabot . haha . oke , tu je . k baii .

AJA-AJA HWAITING !!

Tutorial : Blockquote Hover Versi 4

.Assalamualaikum.

selamat pagi ! before apis pegi kelas , sempat lagi mengodek code . nak buat tutor baru . haha ! sebab arini jadual kelas pack , so takde mase nak update blog , so update awal pagi . oke , kali ni apis nak share satu lagi hover blockquote . hurm , camne effect die ? mai sini apis tunjuk sikit .

sebelum

 selepas

oke , nak buat macam tu ? meh sini apis tunjukkan macam mana .

1) Dashboard > Design > Edit HTML 

2) Ctrl + F code bawah ni 

.post blockquote {

3) Copy code bawah ni , PASTE dekat BAWAH code .post blockquote { yang korang carik tadi .

text-align:center;
}
.post blockquote:hover{
text-align:center;
background:url(URL BACKGROUND);
padding-top:10px;
border-top:3px solid #FF0000;
border-bottom:3px solid #FF0000;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
-webkit-transition-duration: 1s;
}

4) Preview and Save .

p/s: mane-mane yang apis bold kan tu , ubah ikot suka korang oke ! :D

siap . mudahkan ? haha . harap bile korang cube menjadi . hehe , ok lah . out dulu , kelas dah memanggil ! baii :D kalo tak jadi or something tak kena , tanye k !

selamat men-TRY !

AJA-AJA HWAITING !!

Tutorial : Cara Guna Blockquote

Assalamualaikum & Salam Sejahtera

arini cuti . tak tau nak buat apa . so nak update tutorial . ok , tutorial ni special for newbie dalam dunia blogging. ok , blockquote tu ape benda ? korang nak tau blockquote tu ape die . tengok bawah ni 

ni namanya blockquote.

oke , nak tau macam mana nak buat macam tu ? follow step dekat gambar bawah ni ;

klik untuk tumbesaran

pastuh publish post . then tengok jadi ke tak . tapi , make sure la blog korang dah ade blockquote . kalau tak memang tak jadi . camne nak pasang blockquote ? klik SINI . oke , kalo ade ape-ape yang korang tak paham . tanye la ye . :D

Tutorial : Pasang Blockquote

Assalamualaikum & Salam Sejahtera
Okay , for those yang still takde blockquote , meh sini nak ajar camne nak pasang blockquote . ade certain template , takde blockquote. pakai simple template je . So , tutorial ni untuk simple template je yupp . jom mule !


1) Dashboard > Template > Edit HTML


2) Ctrl + F code dekat bawah ni .

]]></b:skin>

3) Then Copy code bawah ni . Paste dekat ATAS code ]]></b:skin> yang korang carik tadi .

.post blockquote {
background:url(URL IMAGE KORANG);
border: 2px solid #000000;
}
.post blockquote:hover{
background:url(URL IMAGE KORANG);
border:2px dashed #FF0000;
border-radius: 10px;
}

4) Preview and Save .

macam biasa , mane yang aku bold-kan tu , korang edit ikut korang suka . URL image tu , korang boleh carik dekat mane-mane web yang korang suke . oke . cukup sampai sini je . if korang tak tau macam mana nak gune blockquote ni , korang boleh klik sini . daa :D

Tutorial : Blockquote Hover Versi 3

.Assalamualaikum.

malam ni nak tido lambat sikit . huu . tadi apis dok godek-godek code blockquote hover . godek punye godek dapat buat hover baru ! yeepa ~ walaupon rase macam da familiar je hover ni , tapi apis buat sendiri tau yang ini ! camne hovernye ?

LIVE PREVIEW

oke , nak buat macam tu tak ? jomm mulee


1) Dashboard > Design > Edit HTML

2) Ctrl + F code bawah ni

.post blockquote {

3) Copy code bawah ni , PASTE dekat bawah code .post blockquote { ni .

-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 1s;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 1s;
color:grey;
font:11px verdana;
padding:5px;
border:1px dashed #000000;
border-left:10px #000000 double;
text-align:center;
}
blockquote:hover{
text-align:center;
color:black;
border:1px solid #FF0000;
border-right:10px #FF0000 double;
} 

4) Preview and Save

mane-mane yang apis BOLD kan tu , korang tukar ikut kesesuaian blog korang oke ? mesti jadikan ? haha . takpe , insyaallah lepas ni try create hover baru lagi . ! :D

Tutorial : Blockquote Hover Versi 1

.Assalamualaikum.

apis dah lame tak update tutorial . salah satu sebab apis tak tau nak update tutorial pasal ape . out of idea . haha . kali ni terupdate nye tutorial sebab ade orang request ! wahh . thanks kepada si request . kalo tak sebab die , berhabuk la apis punye blog ni haa . oke . name blogger yang request ni Haziq Yusuf . thanks kat haziq sebab sudi request tutorial dari apis :) oke , lets begin !

LIVE PREVIEW

1) Dashboard > Design > Edit HTML 

2) Ctrl + F code bawah ni .

.post blockquote {

3) Dah jumpe code atas ni , Copy code bawah ni PASTE dekat BAWAH code yang korang carik tadi .

-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 1s;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 1s;
color:#000000;
font:12px trebuchet;
padding:5px;
border-left:10px #000000 double;
text-align:center;
opacity:1;
}
.post blockquote:hover{
text-align:center;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 1s;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 1s;
color:black;
border-right:10px black double;
border-left:0px black double;
} 

4) Preview and Save . insyaallah menjadi . hehe .

sebenarnye apis tak pasti code ni menjadi pade template biase or tak , sebab apis pakai blogskin . tapi , apis cube dekat another blog apis yang pakai simple template , benda ni jadi . so , pade sape yang tak jadi tu , jangan malu nak tanya oke . insyaallah , mane yang boleh apis bantu , apis bantu . oke tu je ntok slot kali ni . 

Tutorial : Blockquote Hover Versi 2

.Assalamualaikum.

heyy korang semua ! oke , nak bagitau dekat semua ! tutorial akan apis pindah dekat blog ni . sebab malas da nak pakai blog banyak-banyak . serabut . so apis akan pindahkan satu-satu ke blog ni . so tak lama lagi blog lagi satu nak delete daa ~ hee ~ oke . kali ni apis nak share dekat korang blockquote versi kedua . hehe . oke , lets begin !

LIVE PREVIEW

1) Design > Edit HTML

2) Ctrl + F code dekat bawah ni

.post blockquote {

3) Dah jumpe ? Copy code dekat bawah ni PASTE dekat BAWAH code yang korang carik tadi .

background:url(URL BACKGROUND);
border:1px solid #736F6E;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
margin:1em 20px;
padding: 7px;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 1s;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 1s;
}
.post blockquote:hover {
background:url(URL BACKGROUND);
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
border-left: 10px groove #736F6E;
}

4) Preview and Save . Siap and korang boleh tengok hasilnya !

p/s : yang kaler merah tu korang boleh carik url background yang korang suke .
yang apis BOLD kan tu , korang boleh ganti ikut citarasa korang . code warna boleh carik dekat SINI.