Tutorial Edit Blockquote dan Hover Blockquote

ANNYEONG HASEYO..

Hari ni saya nak ajar cara edit blockquote & hover blockquote.

Senang sangat. Apa yang anda perlu cuma sedikit ilmu mengenai CSS. Ada banyak code CSS yang anda boleh pelajari sebagai contoh di W3schools atau Codecademy. Hover blockquote ni berfungsi apabila anda menghalakan cursor anda ke blockquote anda.

1. Pergi ke Dashboard > Template > Customise

2. Klik Advanced > Add CSS (Bawah sekali)

3. Copy code di bawah ini

Untuk Edit Blockquote

blockquote{
background: #ebf3f6;
padding: 6px 20px;
font-family: 'Calibri', 'sax mono';
font-size: 14px;
margin-right: 40px;
text-shadow: 0px 0px 1px #999;
}

Untuk Edit Hover Blockquote

blockquote:hover {
background: #fff;
border-left: 10px solid #ebf3f6;
text-shadow: 0px 0px 0px;
}

          ** Pastikan anda edit diruang yang berwarna merah sahaja..

4. Kemudian paste ke dalam kotak Add custom CSS

5. Klik Apply to Blog

Biar saya terangkan sedikit sebanyak ya :)

background: #ebf3f6; <-- Tukar warna background. Nak background gambar tukar dengan url("url-di-sini");

padding: 6px 20px; <-- Tukar jarak antara tulisan dan blockquote kiri kanan (6px) dan atas bawah (20px)

font-family: 'Calibri', 'sax mono'; <-- Tukar tulisan.

font-size: 14px; <-- Tukar saiz tulisan

margin-right: 40px; <-- Tukar jarak antara blockquote dengan ruang entri anda sebelah kanan.

text-shadow: 0px 0px 1px #999; <-- Bayang-bayang tulisan (atas bawah - kiri kanan - saiz - warna)


*Untuk tukar warna, boleh pilih warna disini atau disini.


Contoh blockquote bersama code:

Copy code dibawah ini jika inginkan blockquote anda seperti ini

blockquote{
background: #ffc5bd;
border-radius: 30px 0px 30px 0px;
border-bottom: 5px dotted #bd9dad;
padding: 10px 20px;
margin-right: 100px;
}

Copy code dibawah ini jika inginkan blockquote anda seperti ini

blockquote{
background: #acf0f7;
border: 3px dashed #985b3c;
padding: 10px 20px;
}

Copy code dibawah ini jika inginkan blockquote anda seperti ini

blockquote{
background-image: url('http://media.tumblr.com/a00053bd291f520cdd64961428e6db7b/tumblr_inline_mkfot29QK61roozkr.gif');
background-size: 45px;
background-repeat: no-repeat;
padding-left: 55px;
}

Copy code dibawah ini jika inginkan blockquote anda seperti ini

blockquote{
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHWpAzV3ekjQrm3ZJ5aQkbu-2sT1yUthYmrY2nML40kOjN6C60Y7a-f3XQn92FCYzACMfpXT6xJL1vLHQQ7-rPao0G6q8w5HTMNgrLcbCvAJzAGqLHHRaUI7T9Adfhyd0-BAnjrok46DQ/s1600/divider3.gif');
background-repeat: no-repeat;
padding-top: 55px;
}

Selamat mencuba!