Cara Membuat Kutipan Blockquote Menarik Dengan HTML dan CSS di Blog

Setiap blog pasti sudah terdapat fasilitas blockquote yang default dari blogger gunanya pada saat menulis artikel kita perlu untuk mengutip suatu teks dari sumber atau memberikan kutipan kita sendiri agar artikel yang diberikan berkesan dan sekiranya penting.

Maka dari itu, HTML menyediakan element yang bernama blockquote yang dimana tag html ini sebagai berikut <blockquote> dan disini kita akan belajar mengenai Cara Membuat Blockquote Kutipan Menarik Dengan HTML dan CSS di Blog.

Cara Membuat Kutipan Blockquote Menarik Dengan HTML dan CSS di Blog

Blockquote ini dipergunakan dimana situasinya menggunakan kutipan yang panjang dan ada quote atau <q> untuk kutipan pendek. Blockquote disebut sebagai kutipan panjang karena tag ini merupakan tipe dari element block sehingga memisahkan dari teks yang ada menjadi pada baris yang baru.

(Baca Juga : Cara Membuat Blog Gratis di Blogger untuk Pemula Dengan Mudah Terbaru 2018)

Selain penggunaan blockquote untuk penulisan kutipan, penggunaan tag ini juga dapat bermanfaat untuk menuliskan testimoni atau pesan-pesan yang memang harus disampaikan. Bahwasanya tag ini sangat bermanfaat untuk agan yang menjual barang secara online.

Ada beberapa Cara Membuat Blockquote Kutipan Menarik Dengan HTML dan CSS di Blog ini, yang pertama ada cara manual dengan memasukan kode langsung pada tab postingan atau dapat juga memasukan kode css pada template sehingga kita tinggal memanggil saja.

Sebelum itu, banyak contoh blockquote yang dapat kamu jadikan sebagai bahan pertimbangan untuk dipasangkan ke website agan. Maka dari itu, ini adalah contoh default dari <blockquote>.

<!DOCTYPE html>
<html>
<head>
<title>Membuat Blockquote Kutipan KeyzeX</title>
</head>
<body>
<h2>Blockquote Kutipan Menarik Dengan HTML CSS</h2>
<p>Relakan ia pergi atau tinggal bersama walau menyakitkan.</p>
<p>Tinggal bersama atau relakan ia pergi? </p>
<blockquote>Kalau dengan melepasmu ia bisa kembali bahagia,
biarkanlah ia pergi.
Sebab, denganmu mungkin dia tak pernah benar-benar,
merasa dimiliki.</blockquote>
</body>
</html>
Cara Membuat Kutipan Blockquote Menarik Dengan HTML dan CSS di Blog

Contoh diatas adalah dimana blockquotes tanpa menggunakan CSS, tambahkan kode CSS dibawah ini untuk mempercantik tampilan kutipan HTML agan.

blockquote {
 max-width: 500px;
 margin: 0;
 width: 100%;
 padding: 40px 70px;
 background: #141414;
    color: #FFFFFF; 
 position: relative;
}
blockquote::before,
blockquote::after {
 font-size: 350%;
 font-family: arial;
 display:block;
 position: absolute;
}
blockquote::before {
 content: open-quote;
 left: 30px;
    line-height: 40px;
}
blockquote::after {
 content: close-quote;
 right: 30px;
    line-height: 30px;
}

Maka hasilnya akan seperti ini.

Cara Membuat Kutipan Blockquote Menarik Dengan HTML dan CSS di Blog

Adapun penggunaan Tag quote atau <q> untuk membuat kutipan pendek dalam HTML. Tag <q> ini merupakan versi inline dari tag <blockquote>, seperti yang sudah saya jelaskan di atas bahwa tag <q> ini digunakan untuk kutipan pendek yang dimana sifatnya menyatu karena termasuk dalam tipe inline.

Dalam HTML tag quote atau <q> yang dimana pada setiap teks yang ditampilkan berada didalam tag tersebut maka akan otomatis diberi tanda kutip.

Dibawah ini adalah sebagai contoh untuk mendemonstrasikan bagaimana penggunaan tag quote atau <q>.

<!DOCTYPE html>
<html>
<head>
<title>Membuat Kutipan KeyzeX</title>
</head>
<body>
<h2>Apa Itu Blog?</h2>
<p>KeyzeX, <q>Ayo Gunakan fitur di KeyzeX untuk menemukan apa itu blog.</q>
</body>
</html>

 

Cara Membuat Kutipan Blockquote Menarik Dengan HTML dan CSS di Blog

Browser akan otomatis menambahkan tanda petik atau kutip didalam tag <q> walau kita tidak menuliskannya pada teks.

Sedikit penjelasan mengenai kedua fitur kutipan dalam HTML. Sebagaimana yang dituliskan didalam judul bahwa saya akan memberikan desain kutipan yang menarik dengan menggunakan CSS. Penggunaan icon font dalam blockquote sudah menjadi hal yang lumrah karena penggunaan icon lebih populer dibanding gambar. Yang menyebabkan icon lebih populer adalah dimana icon lebih fleksibel dan dapat diberi style atau gaya layaknya format font pada umumnya.

Cara Membuat Kutipan Blockquote Menarik Dengan HTML dan CSS di Blog

1. Blockquote Sederhana Dengan HTML dan CSS

HTML :

<blockqoute>
 KeyzeX Media Informasi Seputar Blog dan Bahasa Pemrograman
</blockqoute>

CSS :

blockquote {
 max-width: 500px;
 margin: 0;
 width: 100%;
 padding: 40px 70px;
 background: #141414;
    color: #FFFFFF; 
 position: relative;
}
blockquote::before,
blockquote::after {
 font-size: 350%;
 font-family: arial;
 display:block;
 position: absolute;
}
blockquote::before {
 content: open-quote;
 left: 30px;
    line-height: 40px;
}
blockquote::after {
 content: close-quote;
 right: 30px;
    line-height: 30px;
}

2. Blockquote Sederhana Banget Dengan HTML dan CSS

HTML + CSS :

<blockquote style="background-color: lightslategrey; border-left: 5px solid #000000; margin: 0; margin: 1em 3em; padding: .5em 1em;">
 Masukan Kutipan agan Disini</blockquote>

3. Blockquote Menarik Dengan HTML dan CSS

HTML :

<blockquote class="bubble-blockquote">
 Hidup tak semanis drama korea.
 <div class="bubble-source">keyzex.blogspot.com</div>
</blockquote>

CSS :

.bubble-blockquote {
 background: #FFD6D6;
 border: 1px solid #FFAEAE;
    border-radius: 10px;
    color: #131313;
 max-width: 500px;
    width: 100%;
    padding: 40px 30px 30px;
    margin: 0;
    position: relative;
    text-align: justify;
 box-shadow: 5px -5px 8px -1px rgba(199, 199, 199, 0.6);
}

.bubble-blockquote:before {
 font-family: 'icomoon';
    content: "e900";
    color: #FF4242;
    left: 20px;
    line-height: 40px;
    top: -20px;
    text-shadow: 7px 5px 10px rgba(0, 0, 0, 0.26);
}
.bubble-blockquote:after {
 content: "";
    width: 0;
    height: 0;
    position: absolute;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #FF6C6C;
    bottom: -20px;
 
}
.bubble-source {
 position: absolute;
 bottom: -50px;
 right: 0;
 text-align: right;
 color: #868686;
 font-style: italic;
    font-size: 95%;
 margin-top: 15px;
}

4. Blockquote Lumayanlah

CSS :

blockquote {background:#dfe3ee;position:relative;margin:15px 0;border-left:8px solid #3b5998;font-weight:400;padding:12px 15px;color:#33332e;box-shadow:3px 3px rgba(0,0,0,0.1);}

Cara Pemasangan Kutipan Blockquote Menarik Dengan HTML dan CSS

 

  1. Pastikan agan sudah login ke akun Blogger agan.
  2. Pada Bagian Dashboard silahkan cari menu tema dan klik edit html.
  3. Silahkan cari kode </head> lalu copy dan pastekan kode CSS tepat di atas kode </head> tadi.
  4. Simpan Template.
  5. Kemudian pergi ke menu artikel, klik edit postingan atau buat artikel baru.
  6. Terdapat 2 jenis penulisan pada Artikel, klik metode HTML dan tulisan <blockquote></blockquote>.
  7. Dan lihat hasilnya.

(Baca Juga : Penggunaan Fungsi Tag Style pada HTML)


PENUTUP

Semoga artikel dengan artikel Cara Membuat Kutipan Blockquote Menarik Dengan HTML dan CSS di Blog dapat berguna untuk agan. Jika mengalami kesulitan dalam proses pemasangan silahkan gunakan kolom komentar dengan bijak.

Leave a Reply

Your email address will not be published. Required fields are marked *