Saturday, December 03, 2011

Tutorial : Blockquote Takde Side



Heyo.
Hari ni nak ajar buat blockquote macam dalam gambar ni.


Haa, tak tahu nak namakan jenis apa, saya bagi nama 'Blockquote takde side'. Sebab memang dia takde side. Okay ready? Jom start .
Tapi saya tak tahu kalau template designer boleh atau tak, tapi korang boleh try :)

  • Dashboard > Template > Edit HTML
  • Tekan ctrl + f dan search kod : blockquote {
  • Copy kod di bawah dan paste di BAWAH kod blockquote { tadi. But, make sure korang delete dulu lah kod blockquote yang lama.
blockquote {
background:url(URL BACKGROUND);
padding-left:12px;
padding-right:12px;
color:#FFFFFF;
margin-right:4px;
border-bottom: 1px solid #5B5B5B;
border-top: 1px solid #5B5B5B;
padding:8px;
-webkit-transition:1s;
}
blockquote:hover {
background:#F3BFFF;
color:#CF1FFF;
-webkit-transition:1s;
padding:8px;
border-top: 1px solid #B700FF;
border-bottom: 1px solid #B700FF;
}

Info warna:
Merah : untuk background korang sebelum hover. boleh tukar dengan kod warna.
Pink : warna tulisan sebelum hover.
Kuning : warna border atas bawah sebelum hover.
Biru : warna background selepas hover
Purple : warna tulisan selepas hover
Hijau : warna border atas bawah selepas hover.
Kod warna boleh cari di sini.

Paham kann? Untuk template designer lebih kurang sama jer. 
Tapi rasanya template designer boleh kot guna tuto ni. Cubalah.
Tapi untuk blogskins, mesti wajib jadi! HAHA :D
Kbai.

No comments: