Mencantikan blockquote

Penulis percaya semua templat sudah ada blockquote, tapi sudah cukup cantikah blockquote anda? Disini penulis ada beberapa contoh blockquote dan anda boleh gunakan mengikut kehendak anda. Jika anda kreatif, tunjukkan kepada penulis untuk berkongsi ilmu.

Muatturun gambar blockquote

1. Pada halaman {Template}, sila pilih {Edit Html}. Jangan lupa tanda pada kotak (Expand Widget Template}.

2. Cari kod dibawah ini :

]]></b:skin>

Tambahkan kod ini diatasnya (pilih mana berkenan):

Classy Quoteblockquote.style1 {
font: 14px/20px italic Times, serif;
padding: 8px;
background-color: #faebbc;
border-top: 1px solid #e1cc89;
border-bottom: 1px solid #e1cc89;
margin: 5px;
background-image: url(images/openquote1.gif);
background-position: top left;
background-repeat: no-repeat;
text-indent: 23px;
}
blockquote.style1 span {
display: block;
background-image: url(images/closequote1.gif);
background-repeat: no-repeat;
background-position: bottom right;
}

Modern Quoteblockquote.style2 {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
padding-left: 15px;
border-left: 3px solid #ccc;
}

Fun Quoteblockquote.style3 {
font: 18px/30px normal Tahoma, sans-serif;
padding-top: 22px;
margin: 5px;
background-image: url(images/openquote3.gif);
background-position: top left;
background-repeat: no-repeat;
text-indent: 65px;
}
blockquote.style3 span {
display: block;
background-image: url(images/closequote3.gif);
background-repeat: no-repeat;
background-position: bottom right;
}

Fancy Quoteblockquote.style4 {
font: 14px/20px italic Times, serif;
padding-left: 70px;
padding-top: 18px;
padding-bottom: 18px;
padding-right: 10px;
background-color: #dadada;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 5px;
background-image: url(images/openquote4.gif);
background-position: middle left;
background-repeat: no-repeat;
text-indent: 23px;
}

Code Quote
blockquote.style5 {
font: 12px/18px normal "Courier New", sans-serif;
padding-left: 70px;
padding-top: 2px;
padding-bottom: 2px;
background-color: #000;
color: white;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin: 5px;
background-image: url(images/openquote5.gif);
background-position: middle left;
background-repeat: no-repeat;
text-indent: 23px;
}
blockquote.style5 div {
padding-right: 50px;
display: block;
background-image: url(images/closequote5.gif);
background-repeat: no-repeat;
background-position: bottom right;
} Simpan perubahan.

4. Pilih {Save Template} dan lihat hasilnya. Untuk mencuba apakah tutorial ini berfungsi, pilih {New Post}.

<blockquote class="style1"><span>Penulisan bermula disini</span></blockquote>


Style bergantung kepada css yang anda pilih diatas, jika anda pilih Fancy quote, stylenya adalah style4.

Related Posts

• Menambah Latarbelakang pada templat Minima