بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
BLOCKQUOTE istilah Blockquote adalah sebuah elemen HTML yang terdapat pada halaman artikel blogspot sebagai media kutipan penting. Biasanya dalam sebuah artikel terdapat kata atau kalimat penting dan mengharuskan visitor untuk membacanya. Nah itulah yang disebut Blockquote.
Biasanya bila para blogger yang menulis artikel di postingan ingin menampilkan kutipan atau sebuah kode HTML untuk segera dibaca oleh visitor, maka mereka akan membuat blockquote dalam artikel tersebut. Tujuannya agar si pembaca akan segera mengetahui dan segera membaca yang ada di kutipan itu. Karena begitu pentingnya sebuah blockquote, maka dibuatlah variasi yang berbeda dari artikel utamanya.
Bentuk dari blockquote ini banyak dan bisa beraneka ragam. Ada yang blockquote hanya dengan tampilan warna background berwarna, untuk warna kalian bisa mampir ke artikel Daftar Kode Warna Lengkap pada HTML. Di situ kalian bisa mengganti warna yang disuka untuk mengganti elemen background pada blockquote. Selain itu juga bentuk oval dan bentuk lainnya.
Baca Juga :
Contoh kebanyakan dari blockquote adalah dengan sudut tumpul. Walaupun ada juga yang menampilkan blockquote sudut lancip. Tergantung selera masing-masing kalau yang ini. Silakan kalian nanti berkreasi sendiri ya. Untuk panduannya sudut melengkung adalah dengan memberikan property Border Radius. Semakin besar angka Border Radiusnya maka sudutnya semakin tumpul. Untuk selengkapnya silakan baca artikel Cara Membuat Sudut Melengkung dengan Property Border Radius dan Variasinya. Disini kalian bisa mempraktekkan satu persatunya.
Setelah membuat dengan property sudut melengkung. Bisa juga kalian mengkreasikan bentuk Blockquote dengan background animasi. Istilahnya disini adalah animasi dengan warna yang bergantian, gambar yang ditampikan bisa disesuaikan ya. Bisa ambil dari mana saja, tapi untuk yang pro, kalian bisa mendesain sendiri dengan software Coreldraw. Seperti punya website ini, saya menggunakan tools Coreldraw untuk mendesain keperluan website ini. Selain sesuai selera, juga terkesan lebih pro karena gambar kita tidak akan sama bila dibandingkan kita comot sana-sini di pencarian Google.
Sekarang saya akan memberikan tutorial tentang cara membuat Blockquote yang didesain dengan animasi. Variasi blockquote yang sangat menarik, karena nanti backgroundnya akan silih berganti warna warni. Silakan dilanjut membaca sampai bawah supaya jelas.
Membuat Desain Kutipan Blockquote Animasi Keren
1. Masuk ke Dashboard Blogger
2. Klik Tema
3. Pilih Sesuaikan : Edit HTML
4. Tempelkan CSS dibawah ini diatas kode ]]></b:skin>
.post-body blockquote{background:url(https://blogger.googleusercontent.com/img/a/AVvXsEhhWr9mylzWYbrfAKG4QKbWtS7vCkvFmpCrgHgPDwyW_QLl9TdBafBYj1GADDAIJHxR8RXb_POOIIjANy7TZgSYVRNqolwcVglW4FwrnaZ8fCcwyWAnQ51wnQuDDxmopNrvUWeT3rvRGdE0mgiytI0-Jpxa8-5x3xCpUhBUP04SVZBXAFdIlMaVc6LZ);padding-left:15px;padding-right:15px;padding-top:15px;padding-bottom:15px;font-family:Pompiere;margin:1em 5px;background-position:0 0 0 0;border:10px #008B8B groove;text-align:left;border-top-left-radius:25px;border-bottom-right-radius:25px;border-radius-topleft:25px;border-radius-bottomright:25px;box-shadow:7px 7px 8px #00FFFF;}
.post-body blockquote p{margin:.75em 0;}
button{background-color:#2297f6;border:none;outline:none;margin-top:20px;padding:5px 20px;font-size:20px;color:#ffffff;cursor:pointer;border-radius:25px;}Nah itu sudah kita pasang kodenya di bagian template. Itu sebagai kode database ya. Supaya nanti saat penulisan kode itu muncul sebagai pembungkus kutipan yang kita buat. Untuk menayangkan kutipan didalam postingan, kalian hanya menambahkan property sebagai berikut :
<blockquote>Artikel yang akan kalian tulis diapit dengan kode blockquote seperti ini</blockquote>
Silakan kalian simpan untuk terakhir kalinya dan lihat artikel yang telah dipublikasikan. Sudah terlihat cantik bukan? Silakan dipraktekkan. Semoga blog kalian makin bagus. Salam dan terima kasih.
