Cara Membuat Blockquote Keren

Okeeee, kali ini gue mau nge upload ulang post gue tentang cara membuat blockquote. Kenapa gue upload ulang? karena post yang dulu pas gue buka error nggak karuan text nya. Begitulah asal kejadiannya haha, yaudah langsung aja ya...

Setiap blog sudah tersedia fasilitas blockquote default blogger untuk membuat teks box yang berguna untuk memisahkan teks agar terlihat berbeda tampilan karena biasanya merupakan bagian isi konten yang penting. Blockquote juga berfungsi untuk code - code seperti HTML, CSS, jQuery, dll. Disini gue akan memberikan 2 cara yaitu secara manual dan otomatis.

A. Manual

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. Pastekan kode di bawah ini

B. Otomatis

1. Login ke akun blogger

2. Klik Template > Edit HTML

3. Cari kode blockquote gunakan CTRL+F untuk mempermudah pencarian.

(ditempat saya)

blockquote { background: url(http://4.bp.blogspot.com/-cUyudnT3cCU/UPvGo1mKeSI/AAAAAAAAMD0/oR67FU2ys1w/s1600/quote.png) no-repeat; margin: 20px; color: #666; border-bottom: 1px solid #e8e8e8; background-color: #f9f9f9; padding: 20px 0px 9px 30px; color: #000; margin-left: 10px; margin-top: -9px; width: 520px; -webkit-border-radius: 6px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; line-height: 30px; padding-right: 20px;

4. Ganti kode yang di atas sesuai yang dinginkan. contoh :
a.

Kode nya :

<blockquote {
background:#f9f9f9;
border-left:10px solid #ccc;
margin:1.5em 10px;
padding:.5em 10px;
quotes:"\201C""\201D""\2018""\2019";
}
blockquote:before {
color:#ccc;
content:open-quote;
font-size:4em;
line-height:.1em;
margin-right:.25em;
vertical-align:-.4em;
}
blockquote p {
display:inline;
}

Kode nya :

<blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }

Kode nya :

<blockquote { background: #484B52 url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb5J3xbxyI/AAAAAAAACPk/gxR76OhXXaw/s1600/green-black-side.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 20px 50px; color:#C7CACF; font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman"; } .post blockquote p { margin: 0; padding-top: 10px; }

Kode nya :

<blockquote { background-position:-10px -7px; border: 1px dashed #FFC600; margin: 20px 10; padding: 0 20px 0 50px; background: url("http://3.bp.blogspot.com/_jM8-wHc3NKY/TR3MwDiXB1I/AAAAAAAAAQo/Fi8TGwkSRNQ/s1600/quote.png") 5% no-repeat #FFF8DD; }

Kode nya :

<blockquote { margin : 0 20px; padding: 70px 20px 30px 20px; background : #E7E5DC url(http://3.bp.blogspot.com/_7wsQzULWIwo/SwhrY8vdJeI/AAAAAAAACRc/8Ed9vrlWWGo/s400/block3331.gif) no-repeat top; font: bold .9em Helvetica, "comic sans ms",Courier,"Times New Roman", Times, serif; color : #343434; border-left : 7px solid #FF7802; border-right : 7px solid #FF7802; border-bottom : 7px solid #FF7802; } .post blockquote p { margin: 0; padding-top:10px; }

f.(Kalo ini memakai kode CSS jadi langsung di copy aja di post nya)

#kutip1 {

width:85%;

margin-left:30px;

padding:5px 5px 5px 10px;

background:#eaf6ed url(http://i44.tinypic.com/2076aet.jpg) no-repeat right bottom;

border:#04fc38 solid 1px;

border-left:#04fc38 solid 10px;

*Langsung paste aja di bagian yang "compose" bukan yang "HTML"

Okeeeey, sekian postingan dari gue, selamat mencoba ᕕ( ᐛ )ᕗ
Kalo ada yang masih bingung langsung comment aja ya, see you in the next post!