Sebenarnya blogger telah membuatkan tool bernama blockquote yang fungsinya untuk menandai poin-point penting, namun jika hanya mengandalkan blockquote saja sangatlah tidak menarik bagi pengunjung.
Maka dari itu, kita akan membahas cara membuat kotak catatan/note box yang indah, selain itu note box yang akan kita buat juga memiliki beberapa varian warna. Kotak catatan/note box ini memiliki fungsi agar pengunjung tidak melewatkan poin-poin penting yang kita bahas.
Cara Membuat Kotak Catatan Berwarna di Blogger
- Masuk ke dashboard blog, kemudian pergi ke menu Tema
- Pilih Edit HTML
- Letakkan kode ini, tepat berada diatas
]]></b:skin>atau</style>/* kotak catatan berwarna */ .note-yellow{background:#f8cf82;color:#000;font-size:15px;position:relative;padding:1.2em 1.5em;margin:1em auto;overflow:hidden;text-align:left;word-spacing:0} .note-blue{background:#7eaecf;color:#000;font-size:15px;position:relative;padding:1.2em 1.5em;margin:1em auto;overflow:hidden;text-align:left;word-spacing:0} .note-green{background:#5dc698;color:#000;font-size:15px;position:relative;padding:1.2em 1.5em;margin:1em auto;overflow:hidden;text-align:left;word-spacing:0} .note-red{background:#fb7073;color:#000;font-size:15px;position:relative;padding:1.2em 1.5em;margin:1em auto;overflow:hidden;text-align:left;word-spacing:0} .note-gray{background:#424242;color:#fff;font-size:15px;position:relative;padding:1.2em 1.5em;margin:1em auto;overflow:hidden;text-align:left;word-spacing:0} .note-orange{background:#f67938;color:#fff;font-size:15px;position:relative;padding:1.2em 1.5em;margin:1em auto;overflow:hidden;text-align:left;word-spacing:0} .note-black{background:#000;color:#fff;font-size:15px;position:relative;padding:1.2em 1.5em;margin:1em auto;overflow:hidden;text-align:left;word-spacing:0} .note-primary{background:#0275d8;color:#fff;font-size:15px;position:relative;padding:1.2em 1.5em;margin:1em auto;overflow:hidden;text-align:left;word-spacing:0} .note-succes{background:#5cb85c;color:#fff;font-size:15px;position:relative;padding:1.2em 1.5em;margin:1em auto;overflow:hidden;text-align:left;word-spacing:0}- Jika sudah selesai, klik simpan tema
Sekarang kita telah berhasil membuat kotak catatan di blog, dan sekarang adalah cara untuk menggunakan kotak catatan tersebut di postingan blog.
Cara Menggunakan Kotak Catatan Berwarna di Blogger
- Masuk ke dashboard blog, kemudian pergi ke menu Postingan
- Pilih postingan baru
- Pilih Tampilan HTML, bukan tampilan Menulis/Compose
- Letakkan kode berikut ini:
Warna merah
<div class="note-red">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
Warna biru
<div class="note-blue">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
Warna hijau
<div class="note-red">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
Warna kuning
<div class="note-yellow">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
Warna abu-abu
<div class="note-gray">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
Warna jingga
<div class="note-orange">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
Warna hitam
<div class="note-black">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
Penutup
Demikianlah penjelasan dari saya, jika anda merasa keliru dan ada yang belum dipahami jangan sungkan untuk menanyakan dikolom komentar dibawah, sampai jumpa lagi.
Tags Blogger