Blockquote merupakan salah satu tag HTML yang biasa digunakan untuk mendefinisikan bagian yang dikutip dari sumber lain oleh penulis blog.
Pengertian blockquote sendiri telah berubah dari HTML 4.01 dengan HTML5.
Pengertian tag blockquote didalam HTML 4.01 disebutkan blockquote digunakan untuk mendefinisikan sebuah kutipan panjang.
, berbanding terbalik dengan arti blockquote di HTML5 yang menyebutkan tag blockquote digunakan untuk kutipan dari sumber lain.
Just informastion, dalam HTML5 kutipan pendek menggunakan tag <q>. Dan sebagai referensi tag <q> jika digunakan akan menampilkan tanda kutip (""). Sedangkan blockquote tidak, tetapi attribut berupa cite="" dengan nilai URL sumber halaman yang dikutip.
Lalu kebanyakan browser akan membuat blockquote dengan default CSS sebagai berikut.
blockquote {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}
Terlalu sederhana bukan? Disinilah aku akan memberikan tampilan blockquote menjadi lebih bagus dan nyaman dilihat dengan CSS style blockquote unik.
CSS style untuk blockquote ini bisa kalian pasang di blogger. Diblogger sendiri sudah terdapat style CSS untuk blockquote secara default, ataupun jika kalian memasang template blogger custom yang didownload dari internet, biasanya telah disisipkan style blockquote oleh pembuat templatenya. Contohnya template viomagz dari mas sugeng.id.
5 Style CSS Blockquote blogger keren
Sebelum mencustom blockquote dengan CSS style, ada baiknya kalian perhatikan markup HTML blockquote yang akan dipakai sebagai dasarnya.
NOTE : Jadikan Markup HTML berikut ini sebagai dasar membuat blockquote dan biasakan menggunakan tag <p> </p> untuk membungkus semuanya baik link, span, italic, bold.
<blockquote>
<!-- MARKUP HTML BLOCKQUOTE KENSCRIPTS-->
<p>Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf Paragraf</p>
<p><i>Italic</i></p>
<p><span>SPAN</span></p>
<p><a href="#">Link</a></p>
<p><b>BOLD</b><br></p>
</blockquote>
Itulah markup html blockquote yang akan digunakan. Dan berikut ini adalah CSS style yang bisa kalian coba untuk menghias blockquote blogger.
1. Style CSS Blockquote mirip w3school.
Dibawah ini adalah CSS untuk tag blockquote yang menyerupai situs w3school.
<style>
/* CSS blockquote 01 Kenscripts */
blockquote{border-left: 5px solid #4CAF50;font-style: italic;padding: 8px 10px;text-align:justify;margin: 10px;box-shadow: 2px 5px 10px #f49e9e;}
blockquote p{color: #444141;}
blockquote:hover{opacity: 1;transition: cubic-bezier(1,0,0,1) all 0.9s;}
blockquote a{color: blue;}
blockquote b{color: red}
blockquote ol, ul li{margin-left:40px;text-decoration: underline;}
</style>
Untuk tampilan blockquote html menarik ini kenny berpendapat bahawa ini adalah style sederhana dan minimalis cocok digunakan untuk blog tutorial ataupun teknologi. Dengan border bernilai 5px solid #4CAF50;, sudah cukup memberikan hiasan yang menarik ditambah efek bayangan yang tidak teralu tebal cocok untuk blog dengan background berswarna putih.
2. CSS Blockquote dengan border kiri dan atas.
Nah untuk blockquote selanjutnya ini kenny memberikan sentuhan CSS border-left dan border-top dengan nilai yang sama 5px solid #444141;
<style>
/* CSS blockquote 02 Kenscripts */
blockquote{border-top: 5px solid #444141;border-left:5px solid #444141;font-style: italic;padding: 8px 10px;text-align:justify;margin: 10px;box-shadow: 2px 5px 10px #f49e9e;}
blockquote p{color: #444141;}
blockquote:hover{opacity: 1;transition: cubic-bezier(1,0,0,1) all 0.9s;}
blockquote a{color: blue;}
blockquote b{color: red}
blockquote ol, ul li{margin-left:40px;text-decoration: underline;}
</style>
Disini bordernya dibuat berwarna hitam pudar untuk memberikan kesan pembatas dan pembeda dari area sekitar.
3. Style Blockquote dengan background Gambar hover
CSS ke tiga dari style keren blockquote ini kenny memberikan sentuhan background berwarna hitam dengan tambahan gambar yang bisa kalian sesuaikan.
Baca : Membedakan komentar admin di blogger
<style>
/* CSS Background 03 Kenscripts */
blockquote{border-left: 5px solid #f49e9e;font-style: italic;padding: 8px 10px;text-align:justify;margin: 10px;background-color: #444141;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjflbGy7Rds5XbQu30pm249bnlkRfBtiAgJZ7d3i2gg-fpTL3vqshGoorPiNe3ocaQTPgn-oguno6f5FTroyj6l0U41M2q1wjapIYw4inmiyk8Q5xQIYPKAApMWiV7DOObAKciDRBvf6phd/s0/High_school_dxd_volume-2.jpg");background-position: right;background-size: contain;background-repeat: no-repeat;opacity: 0.5;}
blockquote p{color: #f1f1f1;}
blockquote:hover{opacity: 1;transition: cubic-bezier(1,0,0,1) all 0.9s;cursor: text;}
blockquote a{color: blue;}
blockquote b{color: red}
blockquote ol, ul li{margin-left:40px;text-decoration: underline;}
</style>
Tambahan juga aku buat efek CSS Pseudo-class hover pada blockquote dengan memberikan tambahan opacity: 0.5; saat keadaan diam dan opacity: 1; dalam keadaan hover dengan transisi perpindahan antara keadaan diam dan hover bernilai cubic-bezier(1,0,0,1) all 0.9s;.
4. Efek hover pada blockquote
Seperti judulnya, jika kalian tertarik membuat style blockquote dengan efek hover, kalian bisa menggunakan CSS dibawah ini.
<style>
/* CSS Background 04 Kenscripts */
blockquote{border-left: 5px solid #444141;font-style: italic;padding: 8px 10px;text-align:justify;margin: 10px;opacity: 0.5;box-shadow: 2px 5px 10px #444141;}
blockquote p{color: #444141;}
blockquote:hover{opacity: 1;transition: cubic-bezier(1,0,0,1) all 0.9s;cursor: text;}
blockquote a{color: blue;}
blockquote b{color: red}
blockquote ol, ul li{margin-left:40px;text-decoration: underline;}
</style>
Dengan CSS diatas blockquote menjadi lebih aktip, tampilannya aku buat sama dengan style blockquote pertama. Namun disini kenny menambahkan efek Pseudo-class hover seperti style ketiga.
5. Style Blockquote dengan background full gambar
Yang terkhir ini kenny buat untuk kalian yang menyukai sesuatu yang berlebihan
. Yap, berlebihan. Tampilan blockquote ini tidak kenny rekomedasikan dipasang karena tidak user friendly. Jadikan ini hanya sebagai pemuas diri.
<style>
/* CSS Background 05 Kenscripts */
blockquote{border-left: 5px solid #444141;font-style: italic;padding: 8px 10px;text-align:justify;margin: 10px;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjflbGy7Rds5XbQu30pm249bnlkRfBtiAgJZ7d3i2gg-fpTL3vqshGoorPiNe3ocaQTPgn-oguno6f5FTroyj6l0U41M2q1wjapIYw4inmiyk8Q5xQIYPKAApMWiV7DOObAKciDRBvf6phd/s0/High_school_dxd_volume-2.jpg");background-position: 40% 40%;background-size: cover;opacity: 0.5;}
blockquote p{color: #f1f1f1;}
blockquote:hover{opacity: 1;transition: cubic-bezier(1,0,0,1) all 0.9s;cursor: text;}
blockquote a{color: blue;}
blockquote b{color: red}
blockquote ol, ul li{margin-left:40px;text-decoration: underline;}
</style>
Di CSS blockquote ini aku menambahkan image sebagai latarnya, dengan efek hover dan opacity.
Itulah 5 style blockquote untuk blogger. Silahkan lihat demo untuk previewnya. Nah sampai sini kalian tlah membuat style blockquote menjadi lebih menarik untuk dilihat tidak terlihat polos.
Kenapa tidak ada tambahan ikon-ikon seperti ikon fontawesome? karena kenny ingin membuat tampilan blockquote sederhana tetapi elegan.
Untuk pemasangnya kalian bisa lihat dibawah ini.
Cara mengganti style default blockquote blogger
Disini aku akan memberikan tutorial mengganti blockquote default template blogger dengan CSS diatas. Silahkan simak.
Baca : 9 tips memilih template blogger
1. Menambahkan CSS style blockquote pada blogger.
- Masuk akun blogger kalian.
- Lihat menu disisi kiri dan klik tema/theme.
- Klik tombol sisi sesuaikan untuk menampilkan pilihan.
- Klik edit HTML.
- Copy salah satu CSS diatas.
- Cari tag </head> dengan bantuan CTRL + F.
- Pastekan CSS yang tadi dicopy tepat diatas tag </head>.
- Simpan.
Itulah dia cara memasang style CSS blockquote keren di blogger.
Sekian dari kenny.