5 Blockquote Simple Keren untuk Blogger dengan CSS

27 views

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 balasan yang sempurna untuk menyimpulkan semua pertanyaan mengenai pentingnya blockquot untuk sebuah blog.

5 Cara Membuat Blockquote Keren Pada Blog

Blockquote adalah sebuah kutipan tertulis yang digunakan untuk membedakan goresan pena 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 isyarat script.

Oke, disini saya mempunyai 5 koleksi lengkap dan terbaru untuk blockquote blogger yang anda perlu hanya sedikit memodifikasi bab CSS (Cascading Style Sheet) nya. nah bagi anda yang tertarik untuk mempercantik bab 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 :

blockquote simple for blogger

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 :

Blockquote Simple Keren

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 :
Blockquote Simple Keren joss
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 :

Blockquote Simple Keren joss markotop

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 :

Blockquote Simple Keren joss banget blogger

Cara Memasang Blockquote CSS pada Blog :

  • Silahkan anda login ke akun Blogger anda.
  • Masuk ke Template >> Edit HTML
  • Lalu Cari isyarat dibawah ini dengan menekan CTRL+F
  • Kemudian ketikkan isyarat blockquote dan silahkan anda ganti dengan salah satu isyarat diatas.
  • Save dan lihat lah hasilnya.
Mungkin sekian sudah cukup untuk membantu anda membuat blockquote for blogger ini supaya dapat bermanfaat dan membantu anda kalau anda kurang puas silahkan komentarnya diisi. 

Tags: #Tutorial Blogger