Cara Membuat Text Blockquote Keren di Blog

Cara Membuat Text Blockquote di Blog – Text Blockquote adalah text yang ditulis didalam kolom kusus didalam Postingan. Blockquaote biasanya saya gunakan untuk menandai kode/Script didalam postingan tutorial blog.

Nah mungkin anda sedang mencari tutorial cara meletakan kode script didalam kotak warna, bila ingin mencoba text blockquoate silahkan simak Tutorial membuat text blockquote di blog,

1. Masuk ke Entry baru, atau membuat postingan baru
2. Kemudian klik HTML, ada disamping menu Compose
3. Copy dan paste kode ini di postingan HTML

<blockquote style=”background-color: #808080; border-left: 5px solid #fce27c; margin: 0; margin: 1em 3em; padding: .5em 1em;”>
Masukkan Code atau Tulisan anda disini </blockquote>

4. Untuk warna merah adalah backgroundnya
5. Untuk Warna orange adalah ukuran garis kiri (yang berwarna kuning)
6. Untuk warna biru adalah warna garis kirinya
7. Untuk warna hijau adalah Tulisan yang ingin anda letakan di kolom tersebut

Bagaimana?, gampang kan?, Semoga tutorial ini bisa bermanfaat bagi anda. Selamat Mencoba

Tambahan : CSS Blockquote Styles List untuk Blogger

---

CSS Blockquote Style: 1

blockquote{font-family:"Merriweather",Georgia,serif;font-style:italic;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

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

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

@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

@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

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

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