Cara Membuat Banyak Blockquote Keren Di Dalam Satu Postingan

Cara membuat banyak blockquote di blog - Blockquote merupakan pesan atau catatan penting yang ingin disampaikan penulis blog kepada para pembaca. Karena termasuk catatan penting, maka catatan itu di tulis dalam bentuk tampilan yang berbeda dari tulisan-tulisan lainnya.

Pada kesempatan sebelumnya saya telah berbagi postingan tentang beberapa tampilan blockquote keren beserta cara membuatnya. Pada postingan tersebut terdapat beberapa contoh blockquote yang cukup menarik dan layak untuk diterapkan pada blog sahabat. Dan bukan hanya itu saja, saya juga menyertakan bagaimana cara membuatnya lengkap beserta contohnya. Jadi bagi sahabat yang merasa sebagai blogger pemula, saya yakin sahabat pasti bisa mencobanya.

Artikel Terkait:
Kumpulan Blockquote Tampilan Keren Terbaru Dan Cara Membuatnya

Pada kesempatan kali ini saya akan berbagi cara membuat banyak blockquote keren di dalam satu postingan. Ini artinya di dalam satu postingan atau artikel, sahabat bisa memasanag blockquote lebih dari satu. Memangnya bisa? Ya, tentu saja bisa. Kalau tidak bisa saya tidak akan share artikel ini. Hehe

Oh iya, seperti biasa. Saya di sini hanya berbagi pengalaman saja, bukan bermaksud untuk mengajari apalagi menggurui. Jadi apabila ada kesalahan saya mohon maaf sebesar-besarnya. Dan bagi para blogger yang sudah ahli pemrograman, saya mohon kritik dan sarannya guna memperbaiki kesalahan yang ada pada artikel ini.

Secara deafult, penerapan blockquote pada postingan blog akan terlihat kode seperti ini <blockquote class="tr_bq">TULISAN</blockquote> . Sebab CSS blockquote pada template tertulis seperti ini .post-body blockquote{bla:blaa;} . Jadi jika kita menggunakan cara ini maka kita tidak bisa menerapkan banyak blockquote di dalam satu postingan. Lalu bagaimana caranya?

Untuk bisa memasang blockquote lebih dari satu maka kita harus menggunakan CSS sendiri khusus untuk blockquote-nya. Hal ini bertujuan untuk memisahkan antara CSS blockquote pertama, kedua, dan seterusnya supaya tidak berbenturan atau tawuran. hehehe

Jadi CSS blockquote pada template tertulis menjadi .blockquote{blaa:blabla:} . Kemudian untuk memanggil CSS tersebut, pada postingan dipanggil dengan kode <div class='blockquote'>TULISAN</div> . Untuk lebih jelasnya silahkan simak cara menambahkan CSS blockquote dan cara memanggil CSS tersebut di dalam postingan pada uraian di bawah ini.

Langkah Pemasangan CSS dan HTML Blockquote Di Blog

Silahkan sahabat masuk ke menu tema pada dasbor blogger kemudian pilih edit html. Lalu langkah selanjutnya yakni memasang kode-kode seperti yang ada di bawah. Untuk mempermudah pencarian kodenya, silahkan gunakan tombol Ctrl+F.

1. Tambahkan link CSS fontawesome sebelum kode </head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

Jika di dalam template sahabat belum terpasang link CSS fontawesome, maka silahkan tambahkan link CSS fontawesome tersebut di dalam template sahabat. Kalau memang sudah ada tidak perlu untuk menambahkannya lagi. Sebab link CSS fontawesome tersebutlah yang nantinya akan memperindah tampilan blockquote-nya.

2. Tambahkan CSS blockquote sebelum kode ]]></b:skin> atau </style>

/* CSS blockquote 1 */
.blockquote1{background:#459d3f;position:relative;padding:45px 20px 20px 20px;color:#fff;margin:10px 0;font-family:cursive;border-radius:3px}
.blockquote1:before{position:absolute;content:'NOTE ~';background:rgba(255,255,255,1);right:3px;left:3px;top:3px;padding:5px 20px;display:block;font-weight:700;border-radius:5px 5px 5px 5px;color:#fd2f01}
.blockquote1:after{position:absolute;content:'\f0a1';right:10px;bottom:5px;font-family:FontAwesome;font-style:normal;font-weight:normal;font-size:160%;color:rgb(255, 255, 255)}
/* CSS blockquote 2 */
.blockquote2 {position: relative;display: block;padding: 10px 12px 12px 68px;color: #f5f6e8;background: #415471;line-height: 1.4;}
.blockquote2::before {content: "\201C";background-color: #83a2d1;border-radius: 50%;width: 40px;height: 40px;font-size: 60px;font-family: FontAwesome;color: #415471;text-align: center;line-height: 68px;position: absolute;left: 16px;top: 10px;}
.quote2 {position: relative;padding: 5px 0;border-bottom: 2px solid #ddd;}
.quote2:before {content: '';position: absolute;bottom: -2px;left: 0;right: 0;background: #30cc91;width: 75px;height: 3px;}
/* CSS blockquote 3 */
.blockquote3 {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);}
.blockquote3:before, .blockquote3:after {content: '';position: absolute;top: 0;bottom: 0;}
.blockquote3:before {left: 28px;width: 5px;border: solid #efcfad;border-color: rgba(239, 207, 173, 0.9);border-width: 0 2px;}
.blockquote3: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;}
/* CSS blockquote 4 */
.blockquote4{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;}
.blockquote4::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;}
.blockquote4::after{content: "";}
/* CSS blockquote 5 */
.blockquote5 {text-align: center;background: #fff;font-size: 20px;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;position: relative;quotes: "\201C""\201D""\2018""\2019";}
.blockquote5:after {color: #ccc;font-family: Source Sans Pro;content: open-quote;font-size: 80px;position: absolute;left: 50%;bottom: calc(100% - 20px);background: #fff;height: 55px;width: 55px;line-height: normal;text-align: center;transform: translateX(-50%);}
.blockquote5 p {padding: 20px;}

Kode CSS blockquote di atas merupakan CSS yang saya buat sendiri dari contoh-contoh blockquote yang pernah saya temui. Jika sahabat memiliki CSS blockquote yang lebih indah, keren, dan menarik silahkan ganti sendiri seperti contoh di atas.

3. Gunakan HTML pemanggil CSS blockquote di dalam postingan

<div class='blockquote1'>KALIMAT YANG DI BLOCKQUOTE</div>

<div class="blockquote2">
<div class='quote2'>Catatan :</div>
<br />
KALIMAT YANG DI BLOCKQUOTE</div>

<div class="blockquote3">
TULISAN YANG DI BLOCKQUOTE
<div class="quote-by">— Nur Ameliya</div>
</div>

<div class='blockquote4'>KALIMAT YANG DI BLOCKQUOTE</div>

<div class='blockquote5'><p>KALIMAT YANG DI BLOCKQUOTE</p></div>

Di atas merupakan contoh kode HTML untuk memanggil CSS blockquote yang sudah kita tempatkan di dalam template. Penulisan HTML harus disesuaikan dengan CSS blockquote yang kita inginkan.

Contoh Blockquote Lebih Dari Satu Dalam Satu Postingan

See the Pen Belajar Membuat Blockquote by Amel Liya (@risalahliya) on CodePen.

Demikian cara membuat banyak blockquote dalam satu postingan. Semoga uraian penjelasannya dapat dipahami dengan mudah, sehingga tidak mempersulit bagi para sahabat pemula untuk mencobanya.

Sekali lagi bagi para mastah mohon untuk memberi tanggapan dan masukan mengenai uraian di atas. Sehingga kami para newbie bisa lebih mudah belajar mempercantik blog bersama-sama.