27++ Styles Blockquote Keren dan Responsive untuk Blogger

27 ++ Styles Blockquote Keren dan Responsive untuk Blogger

27++ Styles Blockquote Keren dan Responsive untuk Blogger - Blockquote, biasanya kita pakai untuk mendeskripsikan pesan atau catatan yang penting di dalam sebuah artikel.

Oleh karena itu, agar catatan tersebut mudah dikenali oleh pengunjung, kita harus membuat tampilannya semenarik mungkin.

Kali ini, Saya akan membagikan kepada kalian beberapa kode CSS blockquote yang tentunya menarik dan keren untuk blogger kalian. Simak saja pembahasannya berikut ini. 
Jika kalian ingin mencobanya, pastikan kalian telah menghapus kode CSS blockquote yang lama dan pastikan sudah mem-BACKUP template blog tersebut  Untuk DEMO semua blockquote ini, klik tulisan DEMO dibawah ini.

Daftar kode CSS Blockqoute Keren dan Responsive untuk Blogger


Kode CSS blockquote #1

blockquote {position: relative;color: #333;border: 5px solid #0ABCB1;border-radius: 100px;padding: 30px 60px;margin: 2em 60px 60px;text-align: center;font: 16px Cambria,Georgia,sans-serif;font-weight: 600;}
blockquote:before {display: block;border: 10px solid #21B028;position: absolute;background: none repeat scroll 0 0 #FFFFFF;content: "";height: 50px;width: 50px;right: 100px;bottom: -40px;border-radius: 50px;z-index: 10;}
blockquote:after {position: absolute;background: none repeat scroll 0 0 #FFFFFF;display: block;content: "";height: 25px;border: 10px solid #5A8F00;bottom: -60px;right: 50px;width: 25px;border-radius: 25px;z-index: 10;}
@media only screen and (max-width: 500px) {
blockquote {padding: 30px 20px;margin: 1em 30px 30px;font-size:12px;}}

Kode CSS blockquote #2

blockquote {font-style: italic;color:#fafafa;text-align:left;background: #22B7AD;
background: -moz-linear-gradient(top, #22B7AD 0%, #0e0e0e 100%);background: -webkit-linear-gradient(top, #22B7AD 0%,#0e0e0e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#22B7AD), color-stop(100%,#0e0e0e));
background: -o-linear-gradient(top, #22B7AD 0%,#0e0e0e 100%);border: 1px solid #ccc;border-radius: 6px;
background: linear-gradient(to bottom, #22B7AD 0%,#0e0e0e 100%);background: -ms-linear-gradient(top, #22B7AD 0%,#0e0e0e 100%);
box-shadow: 1px 1px 1px #ccc;padding:20px 30px;}

Kode CSS blockquote #3

blockquote {font-family: Georgia, serif;border-left:5px solid #FF7F01;line-height: 1.45;margin: 0.25em 2em;font-size: 14px;
font-style: italic;padding: 1.25em 40px;position: relative;background:#4b8baf;color: #ffffff;}

Kode CSS blockquote #4

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote{background: #fbfbfb; border-left:5px solid #22B7AD; margin-left:0; padding:10px 15px; font-size:14px; color:#555; font-family: georgia; line-height:22px; font-style: italic;}
blockquote:before, blockquote:after{font-family:FontAwesome;display:inline-block; font-style:normal; font-weight:500; 
line-height:1;-moz-osx-font-smoothing:grayscale; -webkit-font-smoothing:antialiased; color:#777;}
blockquote:before{content:'\f10d'; margin-right:7px;}blockquote:after{margin-left:10px;content:'\f10e';}

Kode CSS blockquote #5

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote{margin:0 auto;background:#f9f9f9;padding:30px 40px;margin-top:1em;margin-bottom:30px;color:#888;position:relative;}
blockquote:after{position:absolute;font-family:"FontAwesome";content:"\f10e";font-size:16px;right:30px;
bottom:20px;font-style:normal;color:#aaa;font-weight:normal}

Kode CSS blockquote #6

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote{background:#FF6052;margin-left:2em;padding:1em 1em;margin-right:2em;color:#fff;
border:3px solid #c94033;font-size:100%;box-shadow:5px 5px 0 rgba(0,0,0,0.1);}
blockquote:before {font-family:FontAwesome;content:"\f10d";font-style:normal;padding-right:4px;
text-decoration:inherit;color:#fff;font-weight:normal;}

Kode CSS blockquote #7

blockquote{border-left:5px solid #E7C297;background:#FFD4A1;
text-align:left;
margin:20px 30px;padding:20px;}

Kode CSS blockquote #8

blockquote {position: relative;
display: block;border-left: 5px solid #21610B;
padding: 1.5em 1.5em 1.5em 3.5em;border-right: 2px dashed #21610B;margin: 0 0 1.5em;}
blockquote::before {position: absolute;font-size: 62px;font-weight: bold;
content: "\201C";line-height: 1;top: 10px;left: 10px;}

Kode CSS blockquote #9

blockquote{padding:20px 30px;text-align:left;
background: #999 no-repeat right;
color: #fff;font-size: 16px;line-height: 1.4;
border: 0;border-radius: 10px;margin: 0 30px 10px;display: block;
box-shadow: 11px 10px 0px #555;}

Kode CSS blockquote #10

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote{margin-left:0;font-style:italic;font-weight:500;font-size:14px;padding:0px;
padding-left:60px;margin:40px 0px;position:relative;}
blockquote:before {content:"\f10d";font-family:FontAwesome;text-align:left;font-size:19px;
line-height:20px;position:absolute;color:#fff;background:#eee;padding:10px;
left:0;top:0;}blockquote:hover:before {color: blue;}

Kode CSS blockquote #11

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote{position: relative;color: #888;line-height: 1.4;border-left: 0;padding: 60px 30px 45px;font-size: 16px!important;font-family: 'Droid Serif',serif;margin: 0;z-index: 1;}
blockquote:after, blockquote:before {color: #f3f3f3;line-height: 1;font-family: FontAwesome;position: absolute;font-size: 50px;transition: .2s ease-in;z-index: 0;}
blockquote:before {content: "\f10d";top: 0px;left: 0;}
blockquote:after {content: "\f10e";bottom: 0px;right: 0;}
blockquote:hover:after {color: #F5BB00;}blockquote:hover:before {color: #F5BB00;}

Kode CSS blockquote #12

blockquote {background: #fafafa;font-style: italic;margin: 1em 1em 1.5em 1em;
font-size: 16px;padding: 2.1em 1.5em;
border-radius: 5px;border-left: 15px solid #1ABC9C;box-shadow: 11px 10px 0px #eee;}

Kode CSS blockquote #13

blockquote{text-align:left;position:relative;display:block;background-color:#FCE5AE;color:#555555;
border-radius:4px;padding:10px 15px;margin:.75em 0;}blockquote a{color:#34495e;}
blockquote:before{height:0;content:"";width:0;position:absolute;left:15px;bottom:100%;
border:7px solid transparent;border-color:transparent transparent #FCE5AE}

Kode CSS blockquote #14

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote { margin: 20px 0; color: #666; border: 1px solid #e1e1e1; padding: 20px; background: #f6f6f6; }
blockquote:before {text-align:left;margin-right: 3px; font-family: fontawesome; content: "\f10d"; color: #FF5353; }
blockquote:after { content: "\f10e"; font-family: fontawesome; margin-left: 5px; color: #FF5353; }

Kode CSS blockquote #15

blockquote {
font-family: Georgia, serif;font-style: italic;background-color:#f5f5f5;
background: url(https://4.bp.blogspot.com/-apuX-9ARUao/WYTQg7l4jVI/AAAAAAAAAHg/soRgkjsn0XEm_EKv3Phqepp4k-w8ppIFACLcBGAs/s1600/quote-icon.png) 0 0 no-repeat;
padding-left:40px;padding-top:10px;margin:1em 0;}

Kode CSS blockquote #16

blockquote{quotes:none;margin:1.5em 0;text-align:left;font-size:16px;}
blockquote a{color:#34495f;}
blockquote{display:block;border-left:6px solid rgba(2,2,2,0.4);border-radius:3px;position:relative;
color:#5c5544;background-color:#f2dca8;padding:20px 15px 20px 25px;margin:.75em 0;}

Kode CSS blockquote #17

blockquote {
border-left:2px dashed #FACC2E;color:#FACC2E;font-size:14px;
line-height:18px;font-style:italic;
text-align:justify;margin:15px 30px;padding-left:20px;
font-family:Georgia,"Times New Roman",Times,serif;}

Kode CSS blockquote #18

blockquote{margin:0 auto;position:relative;line-height:24px;padding:24px 20px 24px 45px;text-shadow:0 1px 1px white;
border:1px solid rgba(0,0,0,0.05);background-color:#F2F2F2;
background-image:
-webkit-radial-gradient(center,cover,rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 90%),
-webkit-repeating-linear-gradient(top,transparent 0%,
transparent 24px,rgba(139,207,173,0.7) 24px,
rgba(139,207,173,0.7) 25px);}
blockquote:before{content:'';position:absolute;top:0;bottom:0;left:20px;border:4px solid rgba(139,207,173,0.7)}
blockquote:after{background:rgba(242,246,193,0.9);z-index:-1;left:0;right:0;transform:rotate(2deg);border:1px solid rgba(170,157,134,0.7);}

Kode CSS blockquote #19

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote{background:#f7f7f7;padding:25px;border:1px solid #eee;text-align:justify;position:relative;
font-weight:500;clear:both;font-style:italic;}
blockquote:before{color:#6f6a6a;position:absolute;line-height:1;font-size:25px;z-index:0;
transition:.2s ease-in;font-family:FontAwesome;left:-18px;top:-21px;font-style:normal;padding:7px;content:"\f10d";border:1px solid #ddd}
blockquote:after{content:"\f10e";border:1px solid #ddd;position:absolute;font-size:25px;color:#6f6a6a;z-index:0;
font-family:FontAwesome;line-height:1;bottom:-21px;right:-18px;font-style:normal;transition:.2s ease-in;padding:7px;}

Kode CSS blockquote #20

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote{ font-size: 16px; text-align:left; height: auto; margin: 0px; font-family: 'Roboto Slab', serif;
padding: 20px; font-style:italic; background: #F8F8F8; overflow: hidden;}
blockquote:before {content: "\f10d"; color: #00bf8f; margin-right: 6px; font-family: fontawesome;}
blockquote:after {font-family: fontawesome; content: "\f10e"; margin-left: 6px; color: #00bf8f;}

Kode CSS blockquote #21

blockquote {
color: #8ABA9C;text-align:left;border-left:5px solid #8ABA9C;
padding: 21px;line-height: 20px;
margin: 30px 40px;float: left;}

Kode CSS blockquote #22

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css";
blockquote{padding:15px;margin-left:0;border:1px solid #d8d8be;
background:lightyellow;font-style:italic;text-align:left;font-family:Georgia;}
blockquote:after{font-family:FontAwesome;content:'\f10e';display:inline-block;font-weight:500;
font-style:normal;line-height:1;-moz-osx-font-smoothing:grayscale;
-webkit-font-smoothing:antialiased;color:#999985;margin-left:10px;}
blockquote:before{content:'\f10d';font-style:normal;display:inline-block;font-family:FontAwesome;
line-height:1;-webkit-font-smoothing:antialiased;margin-right:10px;font-weight:500;
color:#999985;-moz-osx-font-smoothing:grayscale;}

Kode CSS blockquote #23

blockquote {font-family: "Merriweather", Georgia, serif;font-style: italic;
padding-left: 35px;padding: 17px 58px 20px 55px;font-size: 16px;text-align:left;font-weight: 300;color: #333;background: #F2E4A0;margin: 21px 30px;}
blockquote:before {content: "\201C";margin-left: -35px;line-height: 1.33;float: left;font-weight: 700;font-style: normal;font-size: 25px;color: #111;}

Kode CSS blockquote #24

ssblockquote {
background: #f9f9f9;margin: 10px 20px;text-align:left;font-size:16px;
border: 1px solid #d2d2d2;
color: #555;padding: 24px;font-style: italic;}

Kode CSS blockquote #25

blockquote:before, blockquote:after{content: "";}
blockquote{margin: 0 2em;font-size:16px;line-height:22px;text-align:left;quotes: "" "";border-left:3px solid #737e7e;padding-left:10px;}

Kode CSS blockquote #26

blockquote{text-align:left;
border:1px solid #ededed;
padding:35px;font-size:15px;margin:10px 0;
font-family:'Cookie',cursive;color:#676767;}

Kode CSS blockquote #27

blockquote:before,blockquote:after{background:transparent;}
blockquote{line-height:normal;font-size:16px;color:#666;padding:12px 0 0 44px;text-align:left;font-style:italic;margin:10px 30px 20px;position:relative}
blockquote:before{color:#ccc;content:"\201C";line-height:1;font-size:85px;left:-5px;position:absolute;top:-5px;font-family:Georgia,serif;}

Kode CSS blockquote #28

blockquote{border-left: 15px solid #c76c0c;font-family: Georgia, serif;font-size:15px;text-align: justify;background: #fff;line-height: 1.2;
display:block;margin: 0 0 20px;padding: 15px 20px 15px 45px;position: relative; font-size: 16px;color: #666;
border-right: 2px solid #c76c0c;box-shadow: 2px 2px 15px #ccc;-webkit-box-shadow: 2px 2px 15px #ccc;-moz-box-shadow: 2px 2px 15px #ccc;}
blockquote::before{font-size: 50px;position: absolute;color: #999;left: 10px;top:5px;font-weight: bold;content: "\201C";}
blockquote a{cursor: pointer;color: #c76c0c;text-decoration: none;background: #eee;padding: 0 3px;}
blockquote a:hover{color: #555;}

Kode CSS blockquote #29

blockquote {
background:url(https://4.bp.blogspot.com/-ZUe4vndy1Og/WYQF-1CpfFI/AAAAAAAAAHQ/RDg_SfSN7twv7wbrKT-zjnBsh1tZwlEYQCLcBGAs/s1600/bo-blockquote.png) no-repeat;
font-size:15px;text-align:left;color: #555;
border: dashed 1px #eee;margin: 25px 35px;padding: 20px 30px 30px 40px;}

Kode CSS blockquote #30

blockquote {font: 16px/24px Arial, sans-serif;text-align:left;color: #666;margin: 15px 10px;padding: 15px 10px;}
blockquote:before {background: #ddd;text-align: center;height: 25px;content: open-quote;float: left;line-height: 42px;border-radius: 25px;font-size: 24pt;color: #fff;vertical-align: -0.5em;position: relative;margin-right: 0.5em;display: block;width: 25px;}
blockquote:after {display: block;text-align: center;color: #fff;float: right;border-radius: 25px;vertical-align: -0.5em;content: close-quote;font-size: 24pt;line-height: 42px;background: #ddd;position: relative;margin-right: 1em;width: 25px;height: 25px;}
blockquote:hover:after, blockquote:hover:before {transition: all 350ms;background-color: #555;-moz-transition: all 350ms;-o-transition: all 350ms;-webkit-transition: all 350ms;}

Cara Menambahkan kode CSS Blockquote ke template Blogger

  • Kalian login dahulu ke akun blogger, kemudian kalian pilih opsi Theme atau template => Edit HTML => pastekan salah satu kode CSS diatas sebelum kode ini ]]></b:skin>
  • Simpan perubahan.

Penutup ...


Demikian artikel tentang daftar styles blockquote keren dan responsive untuk blogger. Semoga salah satu kode css blockqoute diatas, ada yang cocok dengan keinginan kalian. Jika kalian tidak keberatan, mohon share artikel ini ke berbagai sosmed kalian. Terimakasih telah berkunjung.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel