Membuat Tampilan Blockquote Keren di Blog

14 4 minutes read

Blockquote adalah tulisan yang menjorok ke dalam dari batas tepi kiri dan tepi kanan area posting. Tujuannya adalah untuk mempertegas isi tulisan ataupun kata kunci yang menjadi sorotan paling penting dari sebuah postingan atau artikel yang berada di area blocquote.

Blockquote memiliki fungsi untuk memberitahu pada pengunjung bahwa teks yang kita tampilkan berbeda tersebut adalah sebuah pesan penting. Bentuknya bisa berupa sebuah paragraf singkat, bisa berupa sebaris kata, bisa sebuah kutipan. Yang jelas, ada penekanan khusus dibanding tampilan keseluruhan tulisan tersebut.

Tampilan blockquite ada bermacam macam bisa dengan pemberian tanda kutip, huruf besar, huruf tebal, huruf miring, dengan warna, dengan background, dengan kotak dan masih banyak lagi tergantung kreativitas sobat sendiri. Namun yang paling banyak digunakan para blogger lainnya ialah dengan membukus kutipan penting tersebut menggunakan kode script. Tentu hal ini dapat membuat pengunjung nyaman dan good looking terhadap konten kita.

Jika Blockquote Postingan di buat dengan tampilan yang menarik dan keren pastinya bagus untuk dilihat dan dibaca.Nah lalu bagaimana cara membuatnya dan memasangnya diblog? silahkan simak penjelasan saya dibawah ini.

1. Langkah pertama login ke akun blogger sobat.
2. Klik Tema » Edit HTML.
3. Cari kode ]]></b:skin> gunakan Ctrl+F untuk mempercepat pencarian.
4. Selanjutnya copy salah satu kode CSS dibawah ini yang sesuai dengan keinginan sobat lalu pastekan tepat diatas kode ]]></b:skin>.

● Style 1

/* CSS blockquote */ 
.post blockquote {position: relative;font-family: monospace;margin: 30px auto;padding: 30px 20px 17px 50px;line-height: 30px;color: #6a5f49;text-shadow: 0 1px 1px white;background-color: #f2f6c1;background-image: -webkit-radial-gradient(center, cover, rgba(245, 126, 137, 0.6) 0%, rgba(255, 255, 255, 0.1) 90%), -webkit-repeating-linear-gradient(top, transparent 0%, transparent 29px, rgba(239, 207, 173, 0.7) 29px, rgba(239, 207, 173, 0.7) 30px);border: 1px solid #c3baaa;border-color: rgba(195, 186, 170, 0.9);box-sizing: border-box;box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 5px #d8e071, 0 0 1px rgba(0, 0, 0, 0.1), 0 2px rgba(0, 0, 0, 0.02);} 
.blockquote:before, .blockquote3:after {content: ”;position: absolute;top: 0;bottom: 0;} 
.blockquote:before {left: 28px;width: 5px;border: solid #efcfad;border-color: rgba(239, 207, 173, 0.9);border-width: 0 2px;} 
.blockquote:after {z-index: -1;left: 0;right: 0;background: rgba(242, 246, 193, 0.9);border: 1px solid rgba(170, 157, 134, 0.7);-webkit-transform: rotate(2deg);-moz-transform: rotate(2deg);-ms-transform: rotate(2deg);-o-transform: rotate(2deg);transform: rotate(2deg);} 
.quote-by {display: block;padding-right: 10px;text-align: right;font-size: 13px;font-style: italic;color: #84775c;} 
 .post blockquote { background: #F3F3F1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgr3b5gEAmkmBRWjubW0aRCqUgdC97w_giWcotE5dPK7-HWuCAwDZjLKNYA1KX-8nYZOLWz7UrhGdOfxt-a9B-nTCFNwKkARr5TdhOuJtPo-qII-dry500OBqcH6gqBvj-bMQeBQIVTBpI/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; } 
 /* CSS blockquote */ 
.post blockquote{position: relative;font-family: monospace;display:block;font-size: 15px;line-height: 1.2;color: #666;border: solid 1px #98A81B; background: #F5F6E8;padding: 28px 60px;} 
.blockquote::before{content: “201C”; background-color: #FFF;border-radius: 50%;width: 75px;height:75px;font-size: 60px;font-weight: bold;color: #98A81B;text-align: center;line-height: 93px;position: absolute;left: -30px;top: -30px;} 
.blockquote::after{content: “”;} 
/*Blockquote Catatan*/ 
.post-body blockquote { 
 text-align: left; 
 background: #2F4F4F; 
 position: relative; 
 display: block; 
 padding: 55px 20px 20px; 
 color: #fff; 
 margin: 10px 0; 
 border-radius: 3px; 
} 
.post-body blockquote:before { 
 position: absolute; 
 content: ‘Catatan’; 
 background: rgba(26, 128, 127,1); 
 right: 3px; 
 left: 3px; 
 top: 3px; 
 padding: 5px 20px; 
 display: block; 
 font-weight: 700; 
 border-radius: 3px 3px 0 0; 
 color: #F8F8FF;
} 
.post-body blockquote:after { 
 position: absolute; 
 content: ‘f027’; 
 right: 10px; 
 bottom: 10px; 
 font-family: FontAwesome; 
 font-style: normal; 
 font-weight: normal; 
 font-size: 110%; 
 color: rgba(255, 255, 255, 6); 
}

● Style 2

blockquote{ 
 display:block; 
 background: #fff; 
 padding: 15px 20px 15px 45px; 
 margin: 0 0 20px; 
 position: relative;
 /*Font*/ 
 font-family: Georgia, serif; 
 font-size: 16px; 
 line-height: 1.2; 
 color: #666; 
 text-align: justify;
 /*Borders – (Optional)*/ 
 border-left: 15px solid #c76c0c; 
 border-right: 2px solid #c76c0c;
 /*Box Shadow – (Optional)*/ 
 -moz-box-shadow: 2px 2px 15px #ccc; 
 -webkit-box-shadow: 2px 2px 15px #ccc; 
 box-shadow: 2px 2px 15px #ccc; 
}
blockquote::before{ 
 content: “201C”; /*Unicode for Left Double Quote*/
 /*Font*/ 
 font-family: Georgia, serif; 
 font-size: 60px; 
 font-weight: bold; 
 color: #FFFFFF;
 /*Positioning*/ 
 position: absolute; 
 left: 10px; 
 top:5px; 
}
blockquote::after{ 
 /*Reset to make sure*/ 
 content: “”; 
}
blockquote a{ 
 text-decoration: none; 
 background: #eee; 
 cursor: pointer; 
 padding: 0 3px; 
 color: #B8860B; 
}
blockquote a:hover{ 
 color: #666; 
}
blockquote em{ 
 font-style: italic; 
}

● Style 3

● Style 4

● Style 5

● Style 6

● Style 7

blockquote{ 
 display:block; 
 background: #fbedfc; 
 padding: 15px 20px 15px 45px; 
 margin: 0 0 20px; 
 position: relative;
 /*Font*/ 
 font-family: Georgia, serif; 
 font-size: 16px; 
 line-height: 1.2; 
 color: #666; 
 text-align: justify;
 /*Borders – (Optional)*/ 
 border-left: 15px solid #d26c9e; 
 border-right: 2px solid #d26c9e;
 /*Box Shadow – (Optional)*/ 
 -moz-box-shadow: 2px 2px 15px #ccc; 
 -webkit-box-shadow: 2px 2px 15px #ccc; 
 box-shadow: 2px 2px 15px #ccc; 
} 
blockquote::before{ 
 content: “201C”; /*Unicode for Left Double Quote*/
 /*Font*/ 
 font-family: Georgia, serif; 
 font-size: 60px; 
 font-weight: bold; 
 color: #fbedfc;
 /*Positioning*/ 
 position: absolute; 
 left: 10px; 
 top:5px; 
} 
blockquote::after{ 
 /*Reset to make sure*/ 
 content: “”; 
} 
blockquote a{ 
 text-decoration: none; 
 background: #eee; 
 cursor: pointer; 
 padding: 0 3px; 
 color: #c76c0c; 
} 
blockquote a:hover{ 
 color: #fbedfc; 
} 
blockquote em{ 
 font-style: italic; 
}

● Style 8

● Style 9

● Style 10

Untuk cara membuat blockquote pada postingan sobat blok tulisan yang ingin dibuat blockquote selanjutnya klik tanda icon kutip di sebelah kanan atas,lihat contoh gambar gif dibawah.

Demikian sobat penjelasan saya mengenai cara membuat tampilan blockquote keren di blog dan cara membuat blockquote, jika ada yang ingin sobat tanyakan atau yang tidak sobat pahami silahkan mengajukan pertanyaan melalui kolom komentar dibawah ini terima kasih dan selamat mencoba.

admin

Related Articles

Cara Mengurangi Kebisingan Background pada Panggilan Discord

Chat di Whatsapp Masih Aman?

Apa itu Permeansi (Permeance)?

Perbedaan Antara Tingkat Pengembalian Internal dan Tingkat Pengembalian Internal yang Dimodifikasi

Adblock Detected