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.

SHARE:

blog tutorial