Tutorial Blockquote zoom!

10:13 AM

~Assalamualaikum~
Sentiasa mendoakan kalian dari kejauhan
Tutorial?? huhu kalau takda 'Request' saya takkan buat punya (sebab tak reti buat tutorial) hik2 tapi, oleh kerana Akh ShahJiehan kita minta, so ilmu yang ada kita share.ok dia nak minta tunjukkan cara nak buat 'blockquote yang boleh zoom' tengok contoh kat bawah(kotak biru) dan halakan cursor anda dikotak itu. nampakkan? ok? r u ready, kita mula!

{Maaf,telah tiada,tapi anda boleh cuba..kot2 dapatkan^^ }:)

Langkah 1:
Design > Edit HTML > Expand Tick Widget


Langkah2:
Dengan menggunakan CTRL+F cari kod Dibawah ini :


]]></b:skin>

Langkah3:
Copy dan pastekan kod dibawah ini diatas ]]></b:skin>
('CTRL' + 'C' untuk Copy)


blockquote {
         padding: 10px; height: auto;
         margin: 10px 0 10px 20px;
         background-image: url(http://i640.photobucket.com/albums/uu127/mariah_anak_amin/biru.jpg);  
         border: 2px dashed #A9F5F2 ;
         border-radius: 20px 10px 20px 10px;
        -moz-border-radius: 20px 10px 20px 10px;
        -webkit-border-radius: 20px 10px 20px 10px;
        -o-transition: all 1.2s ease-in;
        -moz-transition: all 1.2s ease-in;
        -webkit-transition: all 1.2s ease-in;
}
blockquote:hover {
         color: #848484;
        -o-transform: rotate(0deg) scale(1.06) translate(-10px, 0);
        -moz-transform: rotate(0deg) scale(1.06) translate(-10px, 0);
        -webkit-transform: rotate(0deg) scale(1.06) translate(-10px, 0);}
blockquote span.bbuka, blockquote span.btutup {
         float: left;
         margin-right: 5px;
         height: 17px;
         width: 22px;
         background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-L.png) left top no-repeat;
        -o-transition: all 1.2s ease-in;
        -moz-transition: all 1.2s ease-in;
        -webkit-transition: all 1.2s ease-in;
}
blockquote span.bbtutup {
         float: right;
         margin-left: 5px;
         margin-right: 0;
         background: url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Blockquote-R.png) right top no-repeat;
}
blockquote:hover span.bbuka, blockquote:hover span.btutup {
        -o-transform: rotate(1090deg) scale(1.1);
        -moz-transform: rotate(1090deg) scale(1.1);
        -webkit-transform: rotate(1090deg) scale(1.1);




Langkah4:
Preview, jika tak ada masalah Save jangan kac lama hehe and den taip post mcm biasa, Highlight semua benda yang nak dimasukkan dalam kotak, dan klik button quote(tau jugakan huhu). Kalau jadi lafazkan Alhamdulillah, kalau tak jadi jangan mengeluh, tanya saya ^^,,apa boleh ditolong saya tolong..insyaAllah

Nota kepala:
Kod yang berwarna purple tu, akh boleh tukar mengikut kesukaan, 

Link saya bagi sedia:
Background blockquote nanti boleh cari Sini atau Sini

kod warna boleh cari Sini
Bentuk border boleh cari Sini

-(blockquote:hover {color: #848484;)=ini adalah warna font bila terzoom nanti, cari kat link kod warna yang saya bagi tu juga ya ^^,

Tags:

You Might Also Like

6 comments

  1. shahjiehanJune 4, 2011 at 10:44 PM

    salam... x boleh la.. kenapa eh...

    ReplyDelete
  2. Nazihah@JihaJune 4, 2011 at 10:53 PM

    @shahjiehan= Waalaikumsalam, tak ble? urmm akh try lg...sy cuba buat balik ikut kod yg sy beri, boleh pula..hehe

    ReplyDelete
  3. Nazihah@JihaJune 4, 2011 at 10:58 PM

    @shahjiehan=yang ini rasanya untuk template designer,akh guna apa?

    ReplyDelete
  4. shahjiehanJune 6, 2011 at 1:23 AM

    hmmm


    design blog saya nk tukar ni..tp xde org nk tlg tukarkan bgi agak kemas dan comel... akak tlg bleh x? heeee

    ReplyDelete
  5. Nazihah@JihaJune 6, 2011 at 9:05 AM

    @shahjiehan=err..agak pening disitu..hihi alhamdulillah,bersyukur sbnrny sbb ada jg org yg nak mnta tlg dgn kita,maknny org tu percaya kpd kita *alamak!berperasaan hihi*

    urm,design blog ni sy byk bljr drpd tutorial yg blogger lain bt jg..:)

    kalau nak design @ikhwan@ pny blog sy tak reti r..kalau @akhwat@ punya,insyaAllah coz cita rasa hampir sama.. hehe kan?

    kalau akh nak sy ble bagi link mrk yg bt tutorial tu..hampir sama ja semua tutorial yg mrk bt..akh bt perlahan2 insyaAllah akan mndpt result yg memuaskan hati akh sendiri ok:)

    atau akh bt tempahan design (tp,ianya berbayar) akh ble pergi sini alwanpelangi.com

    apap2pun blog akh dah mmg mantap! :)

    jgn jd mcm sy,selalu tukar design huhu..itu namanya budak yg terlebih rajin hehe...

    ReplyDelete
  6. ღ Atikah Ramlan ღJune 6, 2011 at 2:37 PM

    huhu.. ske love warna warni kt ats tue.. :D

    ReplyDelete