Sabtu, 29 April 2017

Cara Membuat Banyak Blockquote Keren Di Dalam Satu Postingan

Tags

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.

Blockquote Keren

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.

hal yang membuat tersenyum adalah kebahagian orang lain oleh diriku

20 komentar

Nice tutorial! Saya jarang buat quote sih di blog. Tapi kalau sewaktu-waktu pengen buat, boleh nih dipasang yang warna-warni kaya gini.

Salam kenal mbak Amel :)

Blogcquote yang terakhir itu, sungguh tampak indah sekali. Cocok buat blog yang bersifat tentang cerita hati atau perjalanan hidupnya.

karena blockquote adalah hal yang dianggap penting oleh penulis, maka ketika ingin menyampaikan dengan beberapa blockuote jadi bagus kalau pake trik diatas itu tuh...
pinteran ih neng admin teh geuningan mah nyak

Nyimak jeee.. Gak pake blogger soalnya hehe

Hehe., iya mas semoga bermanfaat.,
Salam kenal juga.. :)

Iya mas, terlebih buat nulis pusi sangat cocok banget..

Makasih oh Mang Lembu., hehe
Belajar koding dikit2, ternyata asyik juga..

sangat mengasikkan cuman waktunya bikin satu postingan jadi lebih panjang, cuman jika kemudian banyak yang pake kepuasannya nggak bisa dinominalkan...mirkisip lah pokoknya mah

Wihh... Pasti keren nih. Bisa membuat blockqoute bermacam-macam dalam satu postingan.

Sebenarnya saya tertarik dg salah satu blockqoute yg dishare sebelumnya. Tapi belum sempat pasang. Hehe

Jadi enak kalau blockquotenya bisa banyak,,, jadi bisa memilih mau paki yang mana,,, tidak menonoton, dan ndak membosankan,,, kalau tampilan bloqoutenya cuman gitu - gitu aja, mungkin bosan,,dengan banyaknya pilihan blocqoute maka akan ada user experience nya lebih dapaet.... :D

Keren nih, save ahh. Baca, praktekan. Thank ya.
Salam kenal :)

Hadeuuh pusing juga lihat kode kodeannya... keren deh mba admin!!~

Keren banget mbak, tapi saya malas, malas karena nggak bisa,, hehe.

Tapi tutorial ini bisa saya coba.

Cara ini mungkin lebih efektif khusus di template mbak arlina neng, Karna biasanya setiap template sudah disediakan css bawaan dari si pembuatnya, Karna yg saya lihat disini ada juga penambahan css nya, kalau ditimpa di css yg sudah ada akhirnya menjadi bentrok, hasil Blockquote nya jadi belang belang ini pernah saya alami neng

Nah cara yg lebih tepat kurang lebihnya begini, untuk menghasilkan Blockquote yg seperti dicontohkan diatas, hapus terlebih dahulu kode css yg lama... Gitu ya neng kira kira

Saya rasa tidak juga mas,
Cara di atas menggunakan kode pemanggil <div class='blabla'>
Asalkan CSS 'blabla' tersebut berbeda dan tidak sama dengan CSS blockquote bawaan template, saya rasa tidak akan bentrok.,
Pada intinya CSS blockquote bawaan tidak boleh sama dengan CSS blockquote tambahan, sebagaimana yang saya jelaskan di atas.,

Keren ya jadinya.. tapi aku masih nggak ngudeng dengan bahasa CSS ini. #Pusing

mb maaf mau tanya ,agak keluar dari topik artikel ini ,saya coba tes laoding blog mbnya lumayan bagus di versi mobile 89/100 dan desktop 83/100,mau tanya cara membuat fast loading blognya gmn ya mb ,saya pemula

Ketika cek di pagespeed insight kan dijelaskan juga untuk mempercepat loading blog, mulai dari pengoptimalan gambar hingga css.,
Kurangi penggunaan widget juga., itu saja sih kiranya cara untuk mempercepat loading blog

Wow.. mantap mba.. izin coba di blogku..

ETIKA BERKOMENTAR
1. Pastikan membaca dari awal sampai akhir supaya tidak salah paham
2. Silahkan berkomentar dengan bijaksana
EmoticonEmoticon