[ad_1]
Posting ini akan membahas beberapa cuplikan kode CSS terbaik untuk menata kutipan blok pada tahun 2020. Kami menulis artikel ini karena kami mencoba menemukan gaya CSS yang bagus untuk kutipan blok, tetapi semua panduan sumber daya yang tersedia diterbitkan bertahun-tahun lalu, atau tidak mengandung gaya blockquote CSS berkualitas tinggi.
Dalam posting ini, kita akan membahas cuplikan gaya CSS kode blok terbaik empat tahun 2020, mengapa mereka berakhir di daftar kami, dan bagaimana cara memasukkannya ke situs web WordPress Anda.
Apa itu Blockquote?
Blockquote adalah elemen HTML yang menunjukkan bahwa tag terlampir adalah kutipan. Pada dasarnya, ini menunjukkan bahwa ini bukan kata-kata Anda, ada orang lain, dan membuatnya mudah untuk mengutip sumbernya.
Anda dapat mengutip sumber menggunakan URL, informasi publikasi, dan lainnya. Ini juga spekulasi, tetapi kami dan banyak orang lain percaya bahwa elemen kode blok HTML berguna untuk SEO. Itu karena Google tidak menyukai konten duplikat, dan ini adalah indikator kode keras bahwa konten yang terkandung dalam elemen HTML bukan milik Anda.
Karena memiliki struktur standar, orang dapat berasumsi bahwa Google telah memasukkan ini ke dalam algoritme bot perayapan mereka. Jika Anda mengutip seseorang, kami merekomendasikan untuk menggunakan kutipan blok karena potensi manfaat SEO dan kemudahan penggabungan ke situs web WordPress Anda.
Kutipan Blok WordPress
Pada saat penulisan, versi WordPress terbaru adalah 5.5. Dengan versi modern CMS WordPress, editor Gutenberg berada di depan dan tengah sebagai cara utama untuk membuat dan menerbitkan konten. Editor ini menggunakan blok, dan salah satu blok default tersebut adalah blockquote. Berikut kode umumnya:
<blockquote class="wp-block-quote"><p></p></blockquote>
Code language: HTML, XML (xml)Kutipan blok WordPress berbeda di antara situs web karena gaya tema berlaku untuk mereka. Penataan gaya dan penyeleksi juga dapat berubah jika Anda menggunakan pembuat halaman seperti Elemen atau Pembangun Oksigen.
Namun, sebagian besar waktu mereka memiliki kelas wp-blok-kutipan.
Cara Menggunakan Cuplikan Kode Dalam Artikel Ini
Kelas standar ini membuatnya sangat mudah untuk menerapkan gaya CSS untuk blockquotes yang terdapat dalam artikel ini juga yang ada di situs web Anda. Cukup ambil kode CSS dari situs web repositori kode (sebagian besar entri dalam daftar ini berasal dari codepen.IO ), tempelkan ke editor CSS di bawah Appearences –> Customizer.
Sebagian besar waktu, Anda harus mengubah pemilih CSS agar sesuai dengan ID atau kelas Anda untuk blockquote tertentu. Biasanya, seperti yang disebutkan di atas, Anda dapat menggunakan . wp-block-quote class untuk menerapkan gaya CSS khusus ke blockquotes di WordPress.
Namun, ini mungkin tidak berfungsi, jadi sebaiknya periksa markup HTML Anda menggunakan sesuatu seperti Chrome Dev Tools.
Tentu saja, jika Anda akan menggunakan banyak CSS khusus di situs WordPress Anda, kami merekomendasikan untuk melihat sesuatu seperti kuningpensil atau CSSHero.
Dengan itu, mari kita lihat beberapa cuplikan kode CSS terbaik untuk gaya blok kutipan pada tahun 2020. Kami akan mencoba untuk terus memperbarui artikel ini ke versi CSS, HTML, WordPress, dan CSS terbaru. lagi. Sebagai variasi baru dari permukaan styling blockquote CSS di Internet, akan mencoba mempostingnya di sini.
Penataan Blockquote CSS Terbaik
Diperbarui pada Agustus, 2020.
Kutipan Halus
Blockquote ini menggunakan animasi CSS, potongan kecil JavaScript, dan tidak banyak lagi. Latar belakang adalah gradien halus yang berputar melalui variasi warna dasar, merah, biru, dan merah muda. Seperti namanya, ini sederhana dan halus, tetapi ini adalah cara yang bagus untuk menampilkan kutipan dan memisahkan situs web Anda dari yang lain.
CSS Quote Box Hover Effects
Blockquote ini sangat keren karena langsung responsif terhadap posisi mouse Anda. Saat Anda mengarahkan kursor ke kotak, elemen bergerak sesuai dengan posisi mouse Anda, dan ini dilakukan dengan CSS murni. Tidak ada JavaScript untuk dimasukkan ke dalam situs web Anda.
Ini jelas merupakan salah satu favorit kami hanya karena jauh lebih unik daripada elemen blockquote lainnya yang pernah kami lihat di luar sana. Pada saat yang sama, ini bukan elemen kutipan blok HTML5 murni, melainkan gaya DIV.
Mengutip Konsep Aplikasi
Dari entri gaya blockquote dalam daftar ini, yang ini adalah yang paling kompleks, tetapi menambahkan fungsionalitas yang sangat menarik ke situs web WordPress Anda tanpa memerlukan plugin tambahan. Pada dasarnya, ini adalah kartu yang menggulir melalui 4 kutipan (Anda dapat menambahkan lebih banyak jika perlu).
Itu menggunakan JavaScript, HTML, dan CSS, tetapi jika Anda mencari cara untuk menambahkan kartu kutipan ke situs web WordPress Anda tanpa plugin tambahan, ini adalah pilihan yang bagus untuk Anda.
Kartu lain seperti Widget kutipan yang dibuat dari HTML5 dan CSS murni, ini memungkinkan Anda untuk menampilkan koleksi kutipan dengan cara yang modern. Perlu diingat, ini tidak menggunakan elemen blockquote, tetapi sangat keren karena semua animasi dan interaksi dilakukan dengan CSS langsung, tanpa JavaScript.
Ini adalah blockquote sederhana yang mencakup fungsionalitas untuk men-tweet konten yang mendasarinya. Untuk menambahkan fungsionalitas itu, Anda perlu memasukkan JavaScript ke dalam blockquote, namun, Anda dapat menghilangkan JavaScript dan hanya mempertahankan gaya kustom CSS untuk blockquote Anda.
Blockquote Bergaya
Jika Anda mencari blockquote CSS yang unik dan langsung, yang ini mungkin cocok untuk Anda. Ini menggunakan CSS khusus untuk menata elemen blockquote HTML5, menampilkan kutipan singkat dengan cara yang sangat unik. Jelas, Anda dapat mengubah gaya font di sekitar!
Penataan Blockquote yang Luar Biasa dengan CSS
Jika Anda mencari gaya CSS paling sederhana dan universal untuk blockquote, ini adalah pilihan terbaik Anda. Ini adalah gaya bootstrap khas yang kami harapkan ketika datang ke blockquotes CSS, dan merupakan cara yang bagus untuk menata elemen jika tema WordPress Anda tidak mengandung CSS yang sudah ada sebelumnya. Super responsif juga!
Bahan Desain Blockquote
Gaya blockquote ini mengikuti prinsip desain material yang digariskan oleh Google , terlihat sangat bersih, dan dapat dengan mudah dimasukkan ke dalam situs web WordPress. Kami menyukai ini karena menggunakan aksen warna yang sederhana, artinya Anda dapat memadukannya dengan branding situs Anda yang sudah ada.
Kami sebenarnya telah menggunakan blockquote yang tepat ini di banyak situs web klien kami karena kesederhanaannya. Perlu diingat, itu tidak mengandung kutipan apa pun, jadi Anda perlu menambahkan elemen HTML itu dan menatanya sesuai dengan itu. Itu juga dikodekan dalam SASS, Meskipun Anda dapat dengan mudah mengkompilasi CSS itu dengan membuka pena kode, mengklik panah bawah di header CSS, dan mengklik lihat CSS yang dikompilasi.
Kutipan Glyph Blockquote
Ini adalah kode blok CSS lain yang sangat sederhana dan menggunakan tanda kutip di bagian atas elemen. Ini dilakukan sepenuhnya dengan CSS, menggunakan status :before. Sederhana, ringan, dan sesuatu yang tidak akan memperlambat waktu pemuatan situs web Anda dengan cara apa pun.
Gaya Blockquote
Jika Anda mencari kumpulan gaya CSS blockquote, pena kode ini berisi 5 di antaranya. Namun, akan menjadi yang pertama mengakui bahwa ini terlihat agak ketinggalan zaman, tetapi memberi Anda titik awal yang baik jika Anda mencari gaya dasar.
Gaya Kutipan Blok Mewah
Ini adalah gaya blockquote mewah yang dibuat sepenuhnya dari CSS dan HTML. Itu muncul dari halaman, dan menggunakan mesin terbang kutipan. Semuanya dilakukan dalam CSS murni, menjadikannya cara yang ringan untuk menampilkan kutipan di situs WordPress Anda.
Kesimpulan
Kami berharap artikel ini memberi Anda beberapa informasi bagus tentang gaya blockquote CSS, dan cara memasukkannya ke dalam situs web WordPress. Ini adalah cuplikan gaya terbaik yang kami temukan di Codepen, Tetapi jika Anda memiliki yang lain yang ingin Anda bagikan, kirimkan di komentar di bawah.
[ad_2]
Source link
Content Writer
