MODERN BLOCKQUOTE STYLE

HiHiHiHi...ketemu agih nich ma akyu..khu khu khu. Apa tuh yang dimaksud dengan blockquote!!! Tulisan yang sedikit menjorok dari paragraph utama dari sebuah postingan/artikel. Nah Blockquote ini sendiri bisa diberikan sedikit gaya dengan bantuan sedikit sentuhan edit-edit CSS. Contoh blockquote yang ada di BeBeN seperti ini :

Aenean tincidunt, justo sodales tempus venenatis, diam neque cursus dolor, vel pretium nisi eros eu eros. Curabitur porttitor hendrerit ullamcorper. Beben mesum sum item tem.

Tuh kan menjorok sedikit ke dalam dan ada stylishnya kan??? Yaaa untuk menekankan sebuah kalimat mutiara, pesan, tanda atau kata-kata yang dianggap oleh sobat bermanfaat. Lumayan nih ada 8 buah gayanya hasil karya Fun with blogger.

#blockquote1 {
background: #f5f5f5;
border-left: 0.8em solid #ccc;
border-right: 0.8em solid #ccc;
font: italic 105% Georgia, "Times New Roman", Times, serif;
padding: 0.75em;
}

Hasilnya :

#blockquote3 {
font: 12px/18px normal "Courier New", sans-serif;
padding-left: 60px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #000;
color: white;
border-top: 1px solid #ccc;
margin: 1px;
background-image: url(http://i48.tinypic.com/2hnxcmo.jpg);
background-position: middle left;
background-repeat: no-repeat;
line-height: 1.5em;
}

Hasil :

#blockquote2 {
font: 14px/22px normal helvetica, sans-serif;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 30px;
padding-left: 15px;
border-left: 3px solid #ccc;
}

Hasil :

#blockquote4 {
width: 30em;
background: url(http://i49.tinypic.com/23tmpmh.jpg) top left no-repeat;
color: #030;
font-size: 1.1em;
line-height: 0.9;
font-style: italic;
padding: 0.5em;
margin: 0;
}

Hasil :

#blockquote5 {
background: #ffffcc;
border: 5px double gold;
border-width: 5px 0;
color: #CC6600;
font: bold 105% Arial, Helvetica, sans-serif;
padding: 0.5em 0.75em;
text-align: left;
}

Hasil :

#blockquote6 {
display:block;
font-family:Courier New,arial,tahoma;
font-size:9pt;
overflow:auto;
margin:5px 10px;
padding: 2px 15px 2px 25px;
background:url(http://i50.tinypic.com/raomxl.jpg) left top;
background-repeat:repeat-y;
}

Hasil :

blockquote {
margin : 0 20px;
padding: 10px 10px 10px 20px;
background : #9FCFFF;
font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia;
color : #484848;
border: 5px dashed #fff;
}

Hasil :

blockquote {
background: rgb(0, 0, 0) none repeat scroll 0% 0%;
color: lightgreen;
padding: 5px 10px;
}

Hasilnya ah :Mungkin dengan sedikit sentuhan kreatifitas sobat bisa lebih memperindah blockquotenya ^,^. Nah hal yang perlu diperhatikan disini bagaimana caranya menggunakan trik ini di dalam sewaktu memosting.

Perhatikan kode-kode #blockquote1, #blockquote2, #blockquote3, #blockquote4, #blockquote5, #blockquote6 didepannya terdapat tanda "#". Apabila ketika memostingnya menggunakan perintah...

<div id="blockquoteX">KETIKKAN KATA-KATANYA DISINI</div>

Kalau memakai trik ini tidak akan mengganggu blockquote yang memang sudah ada, kalau sobat sudah ada trik blockquote. (Paling jadi ada 2 gaya...xixixi) Kalau kode yang blockquote saja, penulisannya dalam memosting seperti berikut :

<blockquote>KETIKKAN KATA-KATANYA DISINI</blockquote>

Kalau sobat sudah ada trik ini, harap diganti kodenya seperti yang diatas entuh ^.^. Kalau tidak, bisa bentrok deh...kekekekekkk.

Adios amigos permios...see you next time. Good luck yaw!!!