15+ Tema Blockquote : Kumpulan Tema Blockquote Keren Untuk Blogger Lengkap dengan Tutorial

15+ Tema Blockquote : Kumpulan Tema Blockquote Keren Untuk Blogger Lengkap dengan Tutorial
15+ Style Blockquote : Kumpulan Style Blockquote Keren Untuk Blogger Lengkap dengan Tutorial - Kali ini saya akan memberikan beberapa Tema Blockquote yang menakjubkan dan keren. Desain ini didasarkan pada CSS murni. Pada dasarnya, block quote style adalah elemen tipografi berdasarkan tag HTML "<blockquote>".Sebenarnya, Agan bisa langsung mengambil kode dari sini dan menempelkannya di blog Agan. Agan bisa memilih tema quote quote yang Agan inginkan dari daftar di bawah ini dan ikuti instruksi untuk menambahkannya ke blog blogger Agan. Juga, saya akan memberikan panduan langkah demi langkah untuk  prosesnya.Oke gan 🙌🙌

Cara Menerapkan Gaya Blockquote di Blogger?

Sebenarnya semua template Blogger pihak ketiga terbaru hadir dengan desain blockquote default. Jika Agan tidak menyukainya, daftar ini akan memberi Agan beberapa Tema blockquote CSS yang keren. Dengan menggunakan salah satu tema ini, kita dapat memperbaiki tampilan tema blockquote blog kita. Jadi mari kita pelajari cara mengkustomisasi blockquote di blogger.
Langkah 1:  Pertama, cadangkan template Agan dan masuk ke akun Blogger Agan dan buka bagian " Tema ". Klik tombol " Edit HTML ".
Langkah 2: Temukan kode akhir " ]]> </ b: skin> ".
Langkah 3: Pilih gaya blockquote yang Agan inginkan dari daftar di bawah ini dan tempelkan tepat di atas "]]> </ b: skin>" seperti yang ditunjukkan pada gambar berikut.
Langkah 4: Terakhir, klik tombol " Simpan tema " dan Agan cek Tema Blockquotenya
Mengatasi masalah: Jika Agan melihat tema blockquote blogger yang tidak berubah atau masih seperti default,mungkin bertentangan dengan code yang lama,kalau masih bingung lihat cara mengatasinya
1. Login ke akun blogger Agan dan masuk ke Theme> Edit HTML dan temukan style blockquote CSS default dari template.
2. Agan harus memberi komentar (Disable) seluruh blok blockquote default dengan menggunakan 
/ * .... Kode ... * / 
seperti yang ditunjukkan di atas. Terakhir, klik tombol " Simpan tema " dan Agan selesai.
Kunjungi blog Agan lagi> Hapus riwayat browser dan cache> muat ulang blog Agan dan Agan akan melihat Tema blockquote yang baru diterapkan
Advertisement

CSS Blockquote Styles List untuk Blogger:

Agan bisa menggunakan kode CSS berikut untuk menyesuaikan gaya blockquote default blog blogger Agan. Sebenarnya, tema ini juga akan bekerja untuk halaman CMS atau HTML lainnya juga. Jadi, pilih gaya yang Agan inginkan dan jadikan blog Agan terlihat lebih profesional dan keren

CSS Blockquote Style: 1

CSS Blockquote Style 8

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;} 

CSS Blockquote Style: 2

CSS Blockquote Style 3
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;}

CSS Blockquote Style: 3

CSS Blockquote Style 10


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

CSS Blockquote Style: 4

CSS Blockquote Style 11
@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;}

CSS Blockquote Style: 5

CSS Blockquote Style 12
@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;}

CSS Blockquote Style: 6

CSS Blockquote Style 13
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);}

CSS Blockquote Style: 7

CSS Blockquote Style 14
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;}


CSS Blockquote Style: 8

CSS Blockquote Style 15
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;}


CSS Blockquote Style: 9

CSS Blockquote Style 17
@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; }

CSS Blockquote Style: 10

CSS Blockquote Style 30
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;}}

CSS Blockquote Style: 11

CSS Blockquote Style 29
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;}

CSS Blockquote Style: 12

CSS Blockquote Style 28
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;}


CSS Blockquote Style: 13
CSS Blockquote Style 27
@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';}


CSS Blockquote Style: 14

CSS Blockquote Style 25
@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;}


CSS Blockquote Style: 15

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


CSS Blockquote Style: 16

CSS Blockquote Style 23
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;}


CSS Blockquote Style: 17

CSS Blockquote Style 22
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;}


CSS Blockquote Style: 18

CSS Blockquote Style 19
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;}


CSS Blockquote Style: 19
CSS Blockquote Style 18
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}


Itulah 15+ Tema Blockquote : Kumpulan Tema Blockquote Untuk Blogger Lengkap dengan Tutorial,Bila Berkenan Berikan komentar Agan di kolom komentar 
Advertisement