Friday, September 30, 2011

Tutorial 116 : Rotate Blockquote.

Assalamualaikum dan selamat hari Jumaat yang berbahagia ini.
Dah berkurun rasanya tak tulis tutorial. Kesian korang asyik lihat tutorial yang sama je kan. Tak apa mari aku ajar tutorial baru yang nampak anggun dan best!

Try sentuh cursor kat kotak blockquote blog hamaster aku ni?

Dia macam ada function rotate atau senget sikit. Aku tahu mesti korang teruja nak try this tutorialkan?

Tapi sebelum itu, adalah lebih baik kepada sesiapa yang tak tahu buat basic blockquote mencuba tutorial kotak blockquote terlebih dahulu, kang terus buat tutorial ini terus tak jadi pula kan..

CARA 1

Dah buat?

1.Login ke Blogspot, clik design/ layout > Edit HTML

2. Lepas itu, sila cari code di bawah.. gunakan Ctrl F untuk memudahkan pencarian

.post blockquote:hover {
3. Letakkan code ini, dibawah code yang dicari tadi.

     background: #E562AA;
    -webkit-border-radius: 36px 12px;
    -moz-border-radius: 36px / 12px;
    -moz-transform: rotate(-2deg);
    -webkit-transform: rotate(-2deg);
4. Kalau nak letak background bergambar, korang tukar je code background: #E562AA; dengan code ini.

     background: url(URL BACKGROUND);

5. Ubah URL BACKGROUND dengan gambar kesukaan korang. Boleh ambil di sini.

6. Preview, kalau menjadi SAVE jer.
 
Tapi ada sesetengah blog tak ada code .post blockquote:hover {

Jom ikuti tutorial di bawah.




CARA 2


1.Login ke Blogspot, clik design/ layout > Edit HTML

2. Lepas itu, sila cari code di bawah.. gunakan Ctrl F untuk memudahkan pencarian

.post blockquote {
3. Korang akan jumpa code macam ini :

    .post blockquote {
    background: #F430C0;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomright: 10px;
    padding: 6px;
    Border: 1px solid #020202;
    margin:1em 20px;
    }

* Kalau tak sama, seakan-akan macam itulah. Lain template, lain coding ye. Jangan risau.

4. Letak je, code di bawah, dibawah code di atas. Seperti ini :

  .post blockquote {
    background: #E562AA;;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomright: 10px;
    padding: 6px;
    Border: 1px solid #020202;
    margin:1em 20px;
    }
  .post blockquote:hover{
    background: #E562AA;
    -webkit-border-radius: 36px 12px;
    -moz-border-radius: 36px / 12px;
    -moz-transform: rotate(-2deg);
    -webkit-transform: rotate(-2deg);
     } 
 seperti gambar di bawah kalau masih blur lagi:


 Kalau nak background gambar ubah je code ini dengan background: #E562AA; dengan :

 background: url(URL BACKGROUND);
 Kalau nak kotak blockquote korang berwarna ubah je code ini #E562AA . Code warna ambik kat sini.


Preview dan SAVE je kalau menjadi.


P/s : Agak kelam kabut buat tutorial ni sebab dah lama tak buat tutorial tapi lantaklah asalkan korang faham. Kalau tak jadi tu tanda tutorial ni tak sesuai dengan korang. Why? aku pun tak tahu. Selamat mencuba.


7 comments:

  1. thanks kak farahhh :D dah jadi dah :D

    ReplyDelete
  2. kalau x dpt find gak coding cara 1 & 2 mcm mn ye?waaa

    ReplyDelete
  3. apsal my blog takde menatang -> .post blockquote:hover {
    tu ahh? sdeh nye :'(

    ReplyDelete
  4. kak farahh..yg rotate blocquote tu mcm "bila kita sentuh sesuau link..nnti cursor tu dye b'tukr cursur yg lainn ke ??" kalau bkn , sye nak buad mcm tu..ade tak tutorial mcm tu? kalau btul, akk bleh x bgi code yg diats sbb sya tkan enter tpi xkeluar..jadi nnti akk bgi ye code dyee =) terima kasih

    ReplyDelete

-Assalamualaikum, sila tinggalkan komen anda.
-Kalau suka tekan LIKE.
-Insyaallah komen anda akan dilayan :)

Terima kasih lepak sini, nanti datang lagi yer..
Sayang Korang...





Related Posts Plugin for WordPress, Blogger...
 
Copyright © 2016 Blog Cik Nurfarah. All Rights Reserved. Designed by Blog Cik Nurfarah.