Selamat datang di web TulisanIB. Di artikel kali ini penulis akan memberitahukan sebuah tutorial bagaimana caranya membuat kotak catatan (blockquote) keren seperti yang penulis gunakan di web TulisanIB ini di blog Blogspot alias Blogger.com.
Sebenarnya bukan hanya di Blogspot, tapi tutorial ini juga bisa di berikan pada platform website lainnya.
Kenapa selain blog berplatform Blogspot atau Blogger.com bisa juga? Karena kita hanya menggunakan kode CSS saja tanpa perlu menggunakan javascript, jadi insya Allah bisa disemua platform blog atau website, Allahu a'lam.
Jadi tampilan kotak catatan (blockquote) yang akan penulis bagikan di artikel ini adalah seperti kotak di bawah ini.
Mari membaca di web TulisanIB.
Semoga bermanfaat untuk kita semua.
Bagaimana? Tertarik untuk membuat kotak catatan (blockquote) seperti kotak catatan di atas?
Kotak catatan (blockquote) di atas penulis dapatkan dari sebuah artikel di website Tamboenman. Kotak catatan (blockquote) dari web Tamboenman tersebut menggunakan Font Awesome.
Lalu penulis modifikasi kotak catatan dari web Tamboenman tersebut dengan menghilangkan kode dari Font Awesome di kode CSS kotak catatan (blockquote) tersebut dan menyederhanakan serta me-minify kode CSS-nya agar lebih ringan.
Di artikel ini penulis telah menonaktifkan gambar pada web Blogger.com di browser Opera yang penulis gunakan, jadi kalian tidak akan menemukan gambar makhluk bernyawa pada langkah-langkah di artikel ini.
Baiklah, bagi yang ingin memasang kotak catatan (blockquote) seperti kotak catatan yang penulis bagikan tadi silahkan simak tutorialnya di bawah ini.
- Pertama masuk ke dashboard Blogger.com dulu melalui link berikut ini:
https://www.blogger.com
Blogger.com menampilkan gambar makhluk bernyawa di dalam web-nya. Baca artikel saya yang berjudul "Cara Mematikan Gambar Pada Browser dan Browsing di Internet Tanpa Menampilkan Gambar" bagi kalian yang ingin menonaktifkan gambar tetapi belum tahu caranya menonaktifkan gambar pada browser.
- Lalu masuk ke menu "Tema".
- Klik icon tanda panah yang mengarah ke bawah yang berada di tombol berwarna orange di sebelah kanan tulisan "SESUAIKAN".
- Akan muncul menu dropdown, silahkan klik pada "Cadangkan" untuk membackup apabila nanti ada kesalahan bisa dipulihkan kembali (optional). Lalu klik "Edit HTML".
- Cari </b:skin> atau </style>, pilih salah satu. Tekan tombol Ctrl + F pada keyboard untuk memunculkan form pencarian.
- Lalu paste kode berikut di bawah ini tepat di atasnya kode tag </b:skin> atau </style>, atau boleh juga di bagian atas atau di tengah-tengah kode tag <b:skin> atau <style>.
blockquote.a{background:#d2dae2;position:relative;display:block;padding:63px 13px 23px;border-radius:3px;margin:15px 0}blockquote.a:before{position:absolute;content:'Catatan';background:#149;position:absolute;top:0;padding:9px 0;left:0;right:0;color:#fff;display:block;margin:0;font-weight:700;text-indent:15px;border-radius:3px 3px 0 0} - Untuk mengubah background warna biru pada tulisan "Catatan", silahkan ubah kode #149 yang telah penulis tandai dengan warna kuning di kode di atas dengan kode warna yang kalian inginkan.
- Untuk mengubah warna abu-abu pada background kotak catatan, silahkan ubah kode #d2dae2 yang telah penulis tandai dengan warna kuning di kode di atas dengan kode warna yang kalian inginkan.
- Lalu simpan dengan mengeklik icon bergambar disket atau kartu memori di sebelah kanan atas yang apabila icon tersebut didekatkan dengan mouse akan muncul tulisan "Simpan".
- Apabila muncul kotak persegi panjang bertuliskan "Update berhasil." itu tandanya template-nya telah berhasil kita save.
- Sekarang kita akan membuat kotak catatannya. Saat berada di editor menulis postingan artikel atau halaman statis, tulis kata-kata atau kalimat yang ingin ditaruh ke dalam kotak catatannya terlebih dahulu.
- Sekarang kita akan masuk ke mode menulis "Tampilan HTML", klik pada icon bergambar pensil tepat di bawah judul paling kiri.
- Akan muncul dua menu, silahkan kalian klik pada menu mode "Tampilan HTML".
- Lalu seleksi atau blok kata-kata yang ingin ditaruh di dalam kotak catatan tersebut.
- Setelah itu klik pada icon bergambar kutip atau tanda petik pada menu.
- Maka akan muncul tag <blockquote>, berikan class a pada tag <blockquote> tersebut.
class="a"
- Selesai, maka teks yang telah kita tentukan akan dimasukkan ke dalam kotak catatan (blockquote).
Bagaimana cara membuat kotak catatannya? Sulit ataukah gampang? Insya Allah mudah, kalau masih bingung langkah-langkah di atas bisa dibaca lagi.
Sekian apa yang bisa penulis sampaikan di artikel Cara Membuat Kotak Catatan (Blockquote) Keren di Blog Blogspot (Blogger.com) ini. Semoga artikel ini dapat bermanfaat untuk kita dan semua orang, juga terutama bagi yang sedang membutuhkan tutorial ini.
Artikel di rubrik Blogger lainnya yang mungkin ingin kalian baca: Cara Pasang Font Google Fonts di Blog Blogspot (Blogger.com).
Daftar Pustaka
- https://www.tamboenman.xyz/2019/09/membuat-tampilan-blockquote-keren-di.html
Link di atas menampilkan gambar makhluk bernyawa di dalam web-nya. Baca artikel saya yang berjudul "Cara Mematikan Gambar Pada Browser dan Browsing di Internet Tanpa Menampilkan Gambar" bagi kalian yang ingin menonaktifkan gambar tetapi belum tahu caranya menonaktifkan gambar pada browser.