Cara Mengganti Blockquote (Kutipan) di Blog dan 24 Contoh Tampilannya

Cara Mengganti Blockquote (Kutipan) di Blog dan 24 Contoh Tampilannya - Anda pasti bingung bagaimana Cara merubah Blockquote di blog? tenang saja saya disini akan membagikannya untuk anda beserta 24 tampilan blocquote keren hanya untuk anda.
Cara Mengganti Blockquote (Kutipan) di Blog dan 24 Contoh Tampilannya
Apa itu Blockquote?

Blockquote adalah sebuah kotak yang berbentuk kotak seperti bingkan dan terdapat tulisan tertentu yang menunjukkan kalau tulisan tersebut penting agar mendapatkan perhatian lebih dari pembaca.

Mengenai Blockquote, pasti anda merasa bosan dengan tampilan blockquote yang biasa-biasa saja. Apakah ada cara untuk merubah tampilan kutipan menjadi lebih keren? pastinya ada, dengan menggunakan blockquote yang menarik, maka dapat memperjelas pembaca dalam menemukan inti bacaan yang anda buat, tetapi juga bisa memberikan daya tarik bagi pembaca dan bisa membuatnya nyaman di blog anda.

Untuk merubah tampilan Blockquote, anda harus memasukkan beberapa kode HTML agar tampilannya lebih cantik dan menarik. Caranya sangat mudah sekali ikuti langkah-langkahnya dibawah ini.

Cara Merubah Blockquote di Blog


1. Masuk ke Blogger.com
2. Pilih Tema
3. klik Edit HTML
4. Cari dan hapus kode Blockquote dibawah ini, caranya klik pada tampilan kode html lalu klik tombol ctrl + f pada keyboard agar mempermudah dalam mencari.
.post-body blockquote {
5. Jika sudah, anda bisa ganti dengan memasukkan kode HTML blockquote yang anda inginkan.
6. Klik Simpan Template

24 Contoh Tampilan Cantik Blockquote (Kutipan) di Blog


Tampilan Blockquote 1

blockquote { margin: 1em 3em; color: #999; border-left: 2px solid #999; padding-left: 1em; }
Hasil tampilannya

Tampilan Blockquote 2

blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }
 Hasil tampilannya

Tampilan Blockquote 3

blockquote { margin: 1em 2em; border-left: 1px dashed #999; padding-left: 1em; } blockquote p:first-letter { float: left; margin: .2em .3em .1em 0; font-family: "Monotype Corsiva", "Apple Chancery", fantasy; font-size: 220%; font-weight: bold; } blockquote p:first-line { font-variant: small-caps; }
Hasil tampilannya

Tampilan Blockquote 4

 blockquote { margin : 0 20px; padding: 60px 30px 40px 20px; background : #F1F8FE url(http://3.bp.blogspot.com/_7wsQzULWIwo/SwhrZYtvrRI/AAAAAAAACRs/Q0k6eaIjnys/s400/owl.png) no-repeat 350px 5px; font: normal .9em "comic sans ms", Courier,"Times New Roman", Times, serif; color : #000; border-left: 8px dotted #DAB547; } blockquote p { margin: 0; padding-top:10px; }
Hasil tampilannya

Tampilan Blockquote 5

blockquote { background-color: #666; color:#fff; padding: 15px; margin: 1em 40px; -moz-border-radius-topleft: 15px; -webkit-border-top-left-radius: 15px; -moz-border-radius-topright: 15px; -webkit-border-top-right-radius: 8px; -moz-border-radius-bottomleft: 15px; -webkit-border-bottom-left-radius: 15px; }
Hasil tampilannya

Tampilan Blockquote 6

.post blockquote { margin : 0 20px; padding: 10px 20px 25px 20px; background : #9FCFFF url(http://1.bp.blogspot.com/_7wsQzULWIwo/SwhrYyb3PiI/AAAAAAAACRU/DyY1rOVnl_k/s400/block22.gif) no-repeat right bottom; font: bold .9em "comic sans ms", arial, Helvetica,verdana, Georgia; color : #484848; border: 5px dashed #fff; } .post blockquote p { margin: 0; padding-top:10px; }
Hasil tampilannya

Tampilan Blockquote 7

.post blockquote { margin : 0 20px; padding: 70px 20px 20px 40px; background : #E4EAFE url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb4cWgxCUI/AAAAAAAACN8/k2V4tUcGx14/s400/angular-purple.gif) no-repeat top left; font: bold 1em Helvetica, verdana, Georgia, "Times New Roman", Times, serif; color : #000; border-bottom : 5px solid #435388; } .post blockquote p { margin: 0; padding-top:10px; }
Hasil tampilannya

Tampilan Blockquote 8

blockquote { background: #484B52 url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb5J3xbxyI/AAAAAAAACPk/gxR76OhXXaw/s1600/green-black-side.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 20px 50px; color:#C7CACF; font: normal 0.9em Helvetica, verdana, serif, Georgia, "Times New Roman"; } .post blockquote p { margin: 0; padding-top: 10px; }
Hasil tampilannya

Tampilan Blockquote 9

 .post blockquote { background: #F3F3F1 url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb5Jv9YD4I/AAAAAAAACPc/BJ-zgoLMJXw/s1600/comma-side-orange1.gif) ; background-position:; background-repeat:repeat-y; margin: 0 20px; padding: 20px 20px 10px 45px; font-size: 0.9em; font: italic 1.2em Georgia, "Times New Roman", Times, serif; } .post blockquote p { margin: 0; padding-top: 10px; }
Hasil tampilannya

Tampilan Blockquote 10

.post blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(http://1.bp.blogspot.com/_7wsQzULWIwo/Swb5JEtgobI/AAAAAAAACPM/tqEq7sOrdnQ/s400/comma-left.gif) no-repeat top left; text-indent: 65px; } .post blockquote div { display: block; background: url(http://3.bp.blogspot.com/_7wsQzULWIwo/Swb5JRi1ZbI/AAAAAAAACPU/vWtG9Rvfj9U/s400/comma-right.gif) no-repeat bottom right; padding-bottom:10px; } .post blockquote p { margin: 0; padding-top:10px; }
Hasil tampilannya

Tampilan Blockquote 11

.post blockquote { margin : 0 20px; padding: 20px 60px 80px 20px; background : #FEE4E3 url(http://1.bp.blogspot.com/_7wsQzULWIwo/Swb4ckuuUwI/AAAAAAAACOE/lJfkdjco3aw/s400/angular-right.gif) no-repeat bottom right; font: bold italic 1em Georgia, verdana, Helvetica, "Times New Roman", Times, serif; color : #000; border: 1px solid #DDD; } .post blockquote p { margin: 0; padding-top:10px; }
Hasil tampilannya

Tampilan Blockquote 12

 .post blockquote { margin : 0 20px; padding: 70px 20px 20px 20px; background : #E7E5DC url(http://2.bp.blogspot.com/_7wsQzULWIwo/SwhrZPcjY4I/AAAAAAAACRk/qOMm-cht3rw/s1600/block333.gif) no-repeat top; font: normal 1em "comic sans ms",Helvetica, Courier,"Times New Roman", Times, serif; color : #000000; border-bottom : 7px solid #FF0000; } .post blockquote p { margin: 0; padding-top:10px; }
Hasil tampilannya


Tampilan Blockquote 13

 .post blockquote { font: 18px normal Tahoma, sans-serif; padding-top: 10px; margin: 5px; background: url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4uY5amaI/AAAAAAAACOs/wZtmW2g1jC0/s400/comma1-left.gif) no-repeat top left; text-indent: 65px; } .post blockquote div { display: block; background: url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4ut_xfBI/AAAAAAAACO0/rQVkmrMYnd8/s400/comma1-right.gif) no-repeat bottom right; padding-bottom:10px; } .post blockquote p { margin: 0; padding-top:10px; }
Hasil tampilannya

 Tampilan Blockquote 14

.post blockquote{ margin : 0 35px; padding: 80px 0px 0px 0px; background : #E6F1FA url(http://1.bp.blogspot.com/_7wsQzULWIwo/Swb5J-uBKiI/AAAAAAAACPs/81Ja4qFVyGc/s400/head2.gif) no-repeat top; font: normal 1em "comic sans ms", Helvetica, verdana; color : #666; } .post blockquote div{ background : #E6F1FA url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb5j3ME4gI/AAAAAAAACP0/1sQjocgjdK0/s400/head-bottom3.gif) no-repeat bottom; padding-bottom: 50px; } .post blockquote p { margin: 0; padding: 20px; }
Hasil tampilannya


Tampilan Blockquote 15

 .post blockquote{ margin : 0 20px; padding: 50px 30px 50px 30px; background : #FFF url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4c7RglzI/AAAAAAAACOU/bwGBdTO2lq4/s1600/BLOCK1-TOP.gif) no-repeat top; font: bold italic 1em Helvetica, verdana; color : #000; } .post blockquote div{ background : #FFF url(http://4.bp.blogspot.com/_7wsQzULWIwo/Swb4c0v4knI/AAAAAAAACOM/S-iKAwSXT-I/s1600/BLOCK1-BOTTOM.gif) no-repeat bottom; padding-bottom: 50px; } .post blockquote p { margin: 0; padding-top:10px; }
Hasil tampilannya

Tampilan Blockquote 16

blockquote{ background-color: transparent; border-top: 3px double #DC143C; border-bottom: 3px double #DC143C; padding: 5px; font-style: oblique; font-size: 1em; margin-left: 5%; margin-right: 5%; }
Hasil tampilannya

Tampilan Blockquote 17

 blockquote { background-position:-10px -7px; border: 1px dashed #FFC600; margin: 20px 10; padding: 0 20px 0 50px; background: url("http://3.bp.blogspot.com/_jM8-wHc3NKY/TR3MwDiXB1I/AAAAAAAAAQo/Fi8TGwkSRNQ/s1600/quote.png") 5% no-repeat #FFF8DD; }
Hasil tampilannya


Tampilan Blockquote 18

blockquote {-moz-border-radius-bottomright: 30px; -moz-border-radius-topright: 30px; background-color: #f5f6ce; border: 5px solid rgb(185, 227, 95); padding: 10px;}
Hasil tampilannya

Tampilan Blockquote 19

 blockquote { background-color: #666; color: #fff; font-weight: bold; padding: 10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
Hasil tampilannya

Tampilan Blockquote 20

blockquote {-moz-border-radius: 5px 5px 5px 5px; background-color: #f5d0a9; border: 5px ridge rgb(230, 141, 58); padding: 10px;}
Hasil tampilannya

Tampilan Blockquote 21

blockquote {-moz-border-radius-bottomright: 30px; -moz-border-radius-topleft: 30px; background-color: #f5f6ce; border: 5px solid rgb(56, 97, 11); padding: 10px;}
 Hasil tampilannya

Tampilan Blockquote 22

blockquote {-moz-border-radius: 5px 5px 5px 5px; background-color: #d8d8d8; border: 5px double rgb(206, 212, 36); padding: 10px;}
Hasil tampilannya


Tampilan Blockquote 23

blockquote {-moz-border-radius: 5px 5px 5px 5px; background-color: #E0ECF8; border: 5px groove rgb(248, 250, 187); padding: 10px;}
Hasil  tampilannya

Tampilan Blockquote 24

blockquote {-moz-border-radius: 5px 5px 5px 5px; background-color: #d8d8d8; border: 5px ridge rgb(224, 213, 130); padding: 10px;}
Hasil tampilannya

Itulah cara membuat blockquote di blog dengan mudah dengan beberapa langkah yang singkat sudah membuat blog anda menjadi cantik dan menarik pembaca untuk melihat blockquote yang anda buat nantinya.
Saya selaku admin, sangat berterima kasih sekali kepada anda pembaca setia, apabila artikel ini bermanfaat silahkan share ke media sosial dibawah ini. Salam masirawan.com

0 Response to "Cara Mengganti Blockquote (Kutipan) di Blog dan 24 Contoh Tampilannya"

Posting Komentar

Peraturan dalam berkomentar

1. Dilarang menggunakan kata kotor
2. Gunakan bahasa yang sopan
3. Dilarang menyebarkan SARA
4. Dilarang berkomentar dengan memberikan link

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel