5 Blockquote Simple Keren untuk Blogger dengan CSS

5 Cara Membuat Blockquote Keren Pada Blog - Apasih kegunaan utama dari blockquote dan untuk apa sebuah blog memasangnya? nah dari kutipan pertanyaan diatas harus ada jawaban yang tepat untuk menyimpulkan semua pertanyaan mengenai pentingnya blockquot untuk sebuah blog.

Blockquote adalah sebuah kutipan tertulis yang digunakan untuk membedakan tulisan satu dengan yang lainnya, biasanya ini digunakan untuk menulis sebuah peringatan penting, inti sari artikel dan juga sering kali kita temui untuk memasang tutorial blog yaitu kode script.

Oke, disini saya mempunyai 5 koleksi lengkap dan terbaru untuk blockquote blogger yang anda perlu hanya sedikit memodifikasi bagian CSS (Cascading Style Sheet) nya. nah bagi anda yang tertarik untuk mempercantik bagian blockquote silahkan dicoba-coba.

Berikut Koleksi Blockquote Lengkap Blogger :

1. Blockquote Terkeren Ala Mas Sugeng

Blockquote Code:

blockquote{background:#f0f0f0;margin-left:2em;margin-right:2em;padding:1em 1em;font-style:italic;}

Hasilnya :

2. Blockquote Paling Joss Gandos

Blockquote Code:

blockquote{background:#edf4ff;margin-left:2em;margin-right:2em;border:1px solid #cfe9ff;border-left:4px solid #cfe9ff;padding:1em 1em;font-style:italic;}

Hasilnya :

3. Blockquote Super Markotop Top

Blockquote Code: 

/*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
} 

Hasilnya :

4. Blockquote Ala Blog Mahrus Paling Mantop

Blockquote Code:

.post blockquote {
background:transparent;
border-left:1px solid #080;
border-top:1px solid #222;
border-bottom:1px solid #222;
border-right:1px solid #222;
margin:0 20px;
padding:15px 20px;
font-size:.9em;
font:normal .9em Rockwell;
width:405px;
overflow:auto;
max-height:300px
}
.post blockquote:before {
content:"code";
color:#fff;
position:absolute;
margin-left:-45px;
line-height:15px;
padding:5px;
background:#080;
transform:none
}

Hasilnya :

5. Blockquote Sangar 

Blockquote Code:

blockquote{background: #f5f5f5;border-left:5px solid #4C6C81;margin: 10px;padding:10px;font-size: 13px;color: #575757;;text-align:left}

Hasilnya :

Cara Memasang Blockquote CSS pada Blog :

• Silahkan anda login ke akun Blogger anda.
• Masuk ke Template >> Edit HTML
• Lalu Cari kode dibawah ini dengan menekan CTRL+F
• Kemudian ketikkan kode blockquote dan silahkan anda ganti dengan salah satu kode diatas.
• Save dan lihat lah hasilnya.

Mungkin sekian sudah cukup untuk membantu anda membuat blockquote for blogger ini semoga dapat bermanfaat dan membantu anda jika anda kurang puas silahkan komentarnya diisi.