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.

5 Cara Membuat Blockquote Keren Pada 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 :
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 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. 

8 Responses to "5 Blockquote Simple Keren untuk Blogger dengan CSS"

  1. bagus hasilnya mas, dan tinggal dikreasikan sesuai keinginan maka hasilnya akan memuaskan. terima kasih sudah berbagi dan salam sahabat blogger.

    BalasHapus
  2. wahh keren keren gan blockquote nya :) saya jadi kpengen coba nih :)

    BalasHapus
  3. Cobain aja gan nggak suka ganti lagi yang lain hehe

    BalasHapus
  4. CSS simple mas.. bisa di edit-edit juga mas... :) keren dah...

    BalasHapus
  5. keren gan caranya, trimakasih infonya.


    http://cara-musnadi.blogspot.co.id/

    BalasHapus
  6. Thanks banget mas tutornya, bosen saya pake blockquote bawaan template kurang keren soalnya :D

    BalasHapus

Jangan cuma dibaca aja, tinggalin komentar juga ya...