Tutorial :- Flash Blockquote

Flash blockquote ni means blockquote akan

bertukar bila cursor dihalakan..

jadi ada 2 background blockquote yg berbeza.. =)

Credit Tutorial:

Amalina

1) Dashboard> Design > Edit Html

2) Tekan Cltr + F serentak dan cari kod:-

.post blockquote {

3) Paste code di bawah SELEPAS kod di step (2)

background: url(http://dl3.glitter-graphics.net/pub/264/264393ps0ft3rzze.gif);
border:2px solid  #fbd5dd;
-moz-border-radius: 25px 10px / 10px 25px; 
border-radius: 25px 10px / 10px 25px;
colour:#FFFFFF}
blockquote:hover {
background: url(http://dl5.glitter-graphics.net/pub/590/590935ankbyj1xx4.gif) repeat right bottom ;
border:2px dotted  #fbd5dd;
-moz-border-radius: 40px 10px;
border-radius: 40px 10px;
}

4) Preview & Save!


okes, siap!!!
selamat Mencuba

Tutorial Blockquote Senget bila cursor dialihkan..

Ekceli tatau nak letak tajuk seswai ngan tutorial,

tp arap u ols paham la ape yg sy mau sampaikan itew.. ;-p

kalo tak phm, korang leh tgk post sblm ni

psl testing blockquote hover tu..

acu cuba try test letak cursor kat blockquote tu

& cuba alihkan..

bergerak bukan.. ?...=)

sy tlh cuba tutorial Mama Aqish
yeyeyey.. berjaya, tq mama!!!

1) Dashboard>Design>Edit HTML>
2) Tekan Ctrl F serentak dan cari kod

]]></b:skin>

3) Pastekan semua kod di bawah ini sebelum atau di atas kod di dalam step no (2)

.post blockquote {
-webkit-transition-duration: 1.0s;
background-image: url('BACKGROUND IMEJ ANDA SEBELUM DIHALAKAN CURSOR');
border:2px dashed #000000;
padding: 8px;
color: #888888;
max-width: 400px;
-moz-opacity:0.75;
filter:alpha(opacity=75);
-khtml-opacity: 0.75;
opacity: 0.75;
-moz-border-radius: 35px;
border-radius: 35px;
}
blockquote:hover{
background-color: #FFCCFF;
background-image:url(URL IMEJ BERGERAK YANG ANDA SUKA);
background-repeat:no-repeat;
background-position:bottom right;
-moz-opacity:1.0;
filter:alpha(opacity=100);
-khtml-opacity: 1.0;
opacity: 1.0;
-webkit-border-radius: 36px 12px;
    -moz-border-radius: 36px 12px;
    -webkit-transform: skew(2.deg,1.5deg);
    -moz-transform: rotate(4deg);
    -webkit-transform: rotate(4deg); }
    border:2px dashed #000000;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomright: 10px;
}
.post blockquote p {
margin: .75em 0;
}

okes, siap!!!


try n error la yer.. =)

Blockquote hover testing.. =)

testing testing

Blockquote kalerful

Salam sejahtera

1st of all, 

TQVM tuk Liyaana yg sudi share tutorial beliau

meh saya ajar balik ape yg beliau share...
tutorial arini psl nk buat benda alah ni..

*
*
*

salam satu mesia

1) Log-in blog cam biasa 

2) Dashboard > Layout > Edit HTML

3) Tick Expand Widget templates 

4) Cari code  .post blockquote {  ** guna ctrl + f

 

5) copy dan pastekan semua itu dengan code ini di bawah code .. (4).. 

background: #FFCC99;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
padding: 6px;
Border: 1px solid #ff0d62;

** Note**

background: #FFCC99; ( kaler bulih tuko SINI )
-moz-border-radius-topleft: 10px; -moz-border-radius-bottomright: 10px; (  ini border dia. kalau nak ubah, just ubah top atau bottom)
padding: 6px; ( tak perlu usik )
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 usik )

 

6) Save n siap