Cara Menciptakan Banyak Blockquote Keren Di Dalam Satu Postingan

Cara menciptakan 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 aku telah membuatkan postingan wacana beberapa tampilan blockquote keren beserta cara membuatnya. Pada postingan tersebut terdapat beberapa pola blockquote yang cukup menarik dan layak untuk diterapkan pada blog sahabat. Dan bukan hanya itu saja, aku juga menyertakan bagaimana cara membuatnya lengkap beserta contohnya. Makara bagi sobat yang merasa sebagai blogger pemula, aku yakin sobat niscaya sanggup mencobanya.

Artikel Terkait:
Kumpulan Blockquote Tampilan Keren Terbaru Dan Cara Membuatnya

Pada kesempatan kali ini aku akan membuatkan cara menciptakan banyak blockquote keren di dalam satu postingan. Ini artinya di dalam satu postingan atau artikel, sobat sanggup memasanag blockquote lebih dari satu. Memangnya bisa? Ya, tentu saja bisa. Kalau tidak sanggup aku tidak akan share artikel ini. Hehe

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

Secara deafult, penerapan blockquote pada postingan blog akan terlihat arahan menyerupai ini <blockquote class="tr_bq">TULISAN</blockquote> . Sebab CSS blockquote pada template tertulis menyerupai ini .post-body blockquote{bla:blaa;} . Makara bila kita memakai cara ini maka kita tidak sanggup menerapkan banyak blockquote di dalam satu postingan. Lalu bagaimana caranya?

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

Makara CSS blockquote pada template tertulis menjadi .blockquote{blaa:blabla:} . Kemudian untuk memanggil CSS tersebut, pada postingan dipanggil dengan arahan <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 sobat masuk ke sajian tema pada dasbor blogger lalu pilih edit html. Lalu langkah selanjutnya adalah memasang kode-kode menyerupai yang ada di bawah. Untuk mempermudah pencarian kodenya, silahkan gunakan tombol Ctrl+F.

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

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

Jika di dalam template sobat 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 aku buat sendiri dari contoh-contoh blockquote yang pernah aku temui. Jika sobat mempunyai CSS blockquote yang lebih indah, keren, dan menarik silahkan ganti sendiri menyerupai pola 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 pola arahan HTML untuk memanggil CSS blockquote yang sudah kita tempatkan di dalam template. Penulisan HTML harus diadaptasi 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 menciptakan banyak blockquote dalam satu postingan. Semoga uraian penjelasannya sanggup dipahami dengan mudah, sehingga tidak mempersulit bagi para sobat pemula untuk mencobanya.

Sekali lagi bagi para mastah mohon untuk memberi jawaban dan masukan mengenai uraian di atas. Sehingga kami para newbie sanggup lebih gampang berguru mempercantik blog bersama-sama.