Cara Membuat Blockquote Keren

Modjopahit - Cara membuat blockquote keren adalah sebuah langkah maju dalam usaha mempercantik tampilan blog dari segi tata cara penulisan. Perlu diketahui bahwa blockquote biasanya digunakan untuk menonjolkan sebuah kalimat penting dalam sebuah artikel atau tulisan.

Untuk membuat blockquote keren dapat dilakukan dengan dua cara yaitu memasukkan kode CSS kedalam kode HTML blog atau dilakukan secara manual ketika membuat sebuah tulisan dan mengetikkan kode CSS tersebut kedalam mode HTML.

Untuk cara yang pertama yaitu memasukkan kode CSS kedalam kode HTML blog akan membuat blockquote secara otomatis setiap kita membuat blockquote dengan melakukan klik pada ikon Quote ( " ). Sedangkan cara yang kedua dapat dikatakan sebagai cara manual mungkin lebih fleksibel karena kita dapat membuat bermacam-macam blockquote dalam sebuah artikel.

Untuk lebih jelasnya mungkin contoh kode membuat blockquote keren berikut bisa memperjelas penjelasan tersebut diatas.

Cara Membuat Blockquote Keren - Pertama

1. Masuk kedalam akun blog
2. Pilih menu Template
3. Klik Edit HTML
4. Masukkan kode CSS berikut dibawah kode <b:skin><![CDATA[

/*BlockQuote*/
.post blockquote {
margin-left: 15px;
padding: 5px 5px 5px 10px;
background: #FBE9A1;
border: #FEBD4D solid 1px;
font: normal 12px/14px Monaco, Monospace;
border-left: #FEBD4D solid 5px;
position: relative
overflow:auto;
}
.post blockquote[rel] {
padding-top: 25px;
}
.post blockquote[rel]::before {
content: attr(rel);
font: bold 12px/22px Arial, Sans-Serif;
color: white;
background-color: #b4a97e;
padding: 0 10px;
position: absolute;
top: 0;
right: 0;
left: 0;
text-transform: uppercase
}

Keterangan:

• background: #FBE9A1;  >> bisa diganti dengan background: #warna Anda;
• border: #FEBD4D solid 1px; >> bisa diganti dengan border: #warna Anda solid 1px;
• border-left: #FEBD4D solid 5px; >> bisa diganti dengan border-left: #warna Anda solid 5px;

Cara Membuat Blockquote Keren - Kedua

1. Masuk kedalam akun blog
2. Lakukan penulisan posting
3. Lakukan modifikasi blockquote pada mode HTML

<blockquote style="margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #F86401; background-color: #F6EBC1;">Tulisan yang akan ditampilkan </blockquote>

Anda bisa mengganti warna #F86401 dan #F6EBC1 dengan warna yang diinginkan, hasil akhir kode blockquote tersebut diatas akan terlihat seperti penulisan puisi berikut ini.

BIDADARI TANPA SAYAP
Puisi Siti Halimah

Kelembutan hatinya membuatku terpana. . .
Melihat kehindahan Rembulan,
Sama seperti melihat keindahan wajahnya.

Sungguh kuat dia menghadapi ini semua. . .
Menghadapi keaadaannya yg begitu nyata.
Merasakan penderitaannya sendirian.
Dan mengukur penderitaan diatas mimpi . . .

Walau dia hanya Bidadari tanpa sayap,
Tapi kelembutan hatinyalah yang membuatku merasa seperti
Berada di atas awan.

Copas From: 

http://www.lokerpuisi.web.id/2012/04/kumpulan-puisi-cinta-terbaru-2012.html

4. Simpan posting >> Selesai

Keuntungan ketika membuat blockquote dengan cara kedua adalah kita bisa memiliki beberapa penulisan blockquote dengan style yang berbeda, salah satu contoh adalah penulisan posting blog Cara Membuat Blockquote Keren yang ditunjukkan langkah ketiga pada cara kedua.

Sekian posting blog mengenai cara membuat blockquote yang dapat kami sampaikan akhir kata silahkan modifikasi sendiri kode-kode tersebut diatas menggunakan kode CSS untuk mendapatkan hasil yang optimal dan memuaskan. Happy blogging dan sampai ketemu dilain kesempatan.