Cara Membuat Blockquote pada Blog

Blockquote merupakan elemen yang cukup penting untuk membuat postingan blog lebih rapi. misalnya kita ingin memposting suatu artikel yang mengandung source code / kode dari bahasa pemrograman. Dengan penggunaan blockquote pada postingan yang mengandung source code, postingan  akan terlihat lebih rapi. untuk contohnya, silahkan lihat postingan saya dalam tips blog. blockquote juga dapat digunakan untuk memberikan area yang penting untuk di baca, jadi tidak hanya untuk postingan source code saja.

Disini, andryemos akan berbagi ilmu cara membuat blockquote secara manual dan otomatis. yang pertama.

Cara membuat blockquote secara Manual

Pada pembuatan blockquote manual ini, kita harus menyisipkan kode blockquote secara lengkap di setiap postingan.

1. Buat atau edit postingan yang ingin di beri blockquote
2. Pilih HTML pada tab postingan
3. Pilih salah satu code di bawah ini, sesuai selera anda

<blockquote style="background-color: lightslategrey; border-left: 5px solid #FF0000; margin: 0; margin: 1em 3em; padding: .5em 1em;">Letakkan source kode atau tulisan disini</blockquote>

Hasil

Ketika kau marah dan cemburu
Kau kelihatan begitu cantik
Walau kadang mengesalkan
Kau selalu bertanya dan penuh curiga
Ku tahu kau takut kehilanganku

<blockquote style="blockquote { background-color: lightslategrey; margin: 1em 2em; border-left: 2px dashed #FF0000; padding-left: 3em; } blockquote p:first-letter { float: left; margin: .2em .3em .1em 0; font-family: "Monotype Corsiva", "Apple Chancery", fantasy; font-size: 220%; font-weight: bold; } blockquote p:first-line { font-variant: small-caps; }">Letakkan source kode atau tilisan disini</blockquote>

Hasil

Begitupun aku, maafkan yang
Selalu kasar marah padamu
Meski tak lagi ada kata
Cinta terucap, sekedar basa-basi
Tapi hatiku masih milikmu, milikmu

Untuk kode lainnya, silahkan di modif sendiri sesuai selera anda.

4. Publikasikan postingan


Cara Membuat Blockquote Otomatis
Pada pembuatan blockquote ke dua ini, merupakan pembuatan blockquote secara otomatis

1. Masuk ke halaman dashbord blog
2. Masuk ke template > edit html
3. cari kode .post blockquote, apabila ketemu. ganti kodenya sesuai yang dinginkan. misalnya

post blockquote { overflow:auto;
max-height:300px; background: #F3F3F1
url(http://i1089.photobucket.com/albums/i346/andryemos/comma-side-orange1.gif) ;
background-position:; background-repeat:repeat-y;   
margin: 0 0px; padding: 0px 5px 5px 30px;
font-size: 0.9em; font: italic 1em Georgia, "Times New Roman", Times, serif; }

4. jika kode .post blockquote tidak ketemu, silahkan tambah kan kode di atas, tepat di atas kode </b:skin>.
5. Simpan template

Catatan : untuk penambahan kode blockquote, klik tombol quote saat pembuatan posting.  

FacebookGoogle+