
Assalaamu'alaikum Wr Wb!
Elemen HTML blockquote adalah suatu mekanisme untuk menandakan suatu blok teks yang dikutip, itu berupa kalimat khusus ataupun kalimat yang menjadi perhatian dalam suatu topik. Mungkin cuma beberapa baris saja, atau juga mungkin berisi beberapa unsur paragraf, anda juga bisa markah teks di dalam elemen ini menggunakan elemen ini.
Menurut sebuah rekomendasi dari W3C yang menyatakan bahwa penulis website atau blog tidak perlu mengetik tanda kutip di dalam teks disaat mereka menggunakan blockquote, anda dapat mengatur tampilan blockquote hana dengan CSS saja. Ini tergolong sangat mudah.
Secara umum atau standar, browser akan membuat suatu konten atau paragraf yang akan di-blockquote menjadi sedikit lebih maju kearah kanan. Fitur ini telah banyak disalahgunakan cuma untuk sekedar membuat indent teks yang merupakan sebagai cara untuk menarik suatu perhatian pada suatu paragraf ataupun bagian dari halaman, padahal sudah sangat jelas bahwa elemen ini hanya perlu digunakan sebagai tanda untuk sebuah teks yang berupa sumber.
Kalau hanya sekedar tampilan saja bisa diatur dengan CSS, intinya janganlah mengatur style dengan markah tetapi perlakukanlah markah hanya sebagai penanda saja. Contohnya bila anda ingin supaya tampilan paragraf sedikit lebih maju kearah kanan, anda dapat mengaturnya dengan memberikan sedikit properti CSS margin-left.
Secara contoh sederhana, penggunaan elemen blockquote dapat anda lihat pada skrip berikut ini ⇩
WordsAnda cukup menambahkan tag berikut kedalam tulisan anda baik dalam artikel atau halaman statik ⇩
<blockquote> Words </blockquote>
Catatan: Ganti tulisan "Words" yang berwarna hijau dengan kalimat anda.Gaya blocquote tersebut dibentuk dengan CSS berikut yang harus anda letakkan diatas / sebelum tag ]]></b:skin> dalam tema blog anda ⇩
************************************************************************
*/* CSS blockquote tags By Rahmat Arif (Admin BloggerAutodidact.com) */*
************************************************************************
input,button,select,textarea{font-size:100%;line-height:normal;vertical-align:baseline;}
textarea{display:block;box-sizing:border-box;}
pre,code{font-family:'Droid Sans';color:#444;}
pre{white-space:pre;word-wrap:normal;overflow:auto;}
blockquote{margin-left:0;padding:15px;background:lightyellow;border:1px solid #d8d8be;font-style:italic;font-family:Georgia;}
blockquote:before{content:'\f10d';display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-right:10px;color:#999985}
blockquote:after{content:'\f10e';display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-left:10px;color:#999985}
Sekian untuk pengertian dan tutorial dalam artikel edisi kali ini.
Alhamdulillaah, saya rasa cukup ini saja yang dapat saya sampaikan kepada anda dalam artikel kali ini.
Alhamdulillaah
Insyaa Allaah, semoga artikel saya dapat membantu rakan-rakan!
Wallaahu'alam
Wassalaamu'alaikum Wr Wb!
Silakan Anda Komen Dengan Budi Bahasa Yang Sopan Dan Arif! ConversionConversion EmoticonEmoticon