Sering kali saat kita menciptakan sebuah artikel di blog kemudian menambahkan beberapa catatan penting semoga pembaca sanggup mengerti atau paham dengan apa yang disampaikan pada postingan tersebut.
Saya termasuk orang yang sering menambahkan catatan pada setiap artikel yang saya tulis.
Nah, kali ini saya akan menciptakan sebuah kotak catatan keren dengan warna-warni flat design dan pengaruh menyerupai lipatan kertas yang membuatnya benar-benar menyerupai sebuah catatan pada kertas.
Memodifikasi kotak catatan pada artikel blog memang penting dilakukan, meski ini memang tidak di haruskan namun dengan mengedit kotak catatan di blog dengan memperlihatkan warna yang menonjol dan terlihat menyerupai lipatan kertas tentu pembaca akan lebih gampang tertarik untuk membaca sebuah catatan penting yang Anda tulis.
Dengan tampilan kotak catatan yang keren, saya yakin pembaca atau visitor akan lebih gampang mendapatkan dan memahami poin-poin penting yang Anda tulis pada sebuah catatan.
Membuat kotak catatan dengan pengaruh css lipatan ini sangat mudah, Anda hanya perlu memasukkan instruksi css yang sudah saya siapkan, kemudian saat ingin menambahkan catatan Anda hanya perlu menambahkan sedikit instruksi html untuk memanggil instruksi css yang telah di pasang sebelumnya.
Baca juga: Cara Membuat Widget Popular Post Keren Warna Warni di Blog
Perlu di ingat, kalau Anda mengganti template blog mungkin pengaruh lipatan pada kotak catatan dan warnanya juga akan hilang, kalau ingin muncul kembali maka harus menambahkan kembali instruksi cssnya kedalam template gres Anda.
Baik pribadi saja kita mulai, kalau Anda tertarik untuk menciptakan kotak catatan dengan pengaruh lipatan ini, silahkan ikuti langkah-langkahnya di bawah ini.
Saya termasuk orang yang sering menambahkan catatan pada setiap artikel yang saya tulis.
Nah, kali ini saya akan menciptakan sebuah kotak catatan keren dengan warna-warni flat design dan pengaruh menyerupai lipatan kertas yang membuatnya benar-benar menyerupai sebuah catatan pada kertas.
Memodifikasi kotak catatan pada artikel blog memang penting dilakukan, meski ini memang tidak di haruskan namun dengan mengedit kotak catatan di blog dengan memperlihatkan warna yang menonjol dan terlihat menyerupai lipatan kertas tentu pembaca akan lebih gampang tertarik untuk membaca sebuah catatan penting yang Anda tulis.
Dengan tampilan kotak catatan yang keren, saya yakin pembaca atau visitor akan lebih gampang mendapatkan dan memahami poin-poin penting yang Anda tulis pada sebuah catatan.
Membuat kotak catatan dengan pengaruh css lipatan ini sangat mudah, Anda hanya perlu memasukkan instruksi css yang sudah saya siapkan, kemudian saat ingin menambahkan catatan Anda hanya perlu menambahkan sedikit instruksi html untuk memanggil instruksi css yang telah di pasang sebelumnya.
Baca juga: Cara Membuat Widget Popular Post Keren Warna Warni di Blog
Perlu di ingat, kalau Anda mengganti template blog mungkin pengaruh lipatan pada kotak catatan dan warnanya juga akan hilang, kalau ingin muncul kembali maka harus menambahkan kembali instruksi cssnya kedalam template gres Anda.
Baik pribadi saja kita mulai, kalau Anda tertarik untuk menciptakan kotak catatan dengan pengaruh lipatan ini, silahkan ikuti langkah-langkahnya di bawah ini.

Memasang Kotak Catatan Dengan Efek Lipatan Kertas
1. Masuk ke Blogger.com
2. Klik Tema > Edit HTML
3. Cari instruksi
]]></b:skin>
atau </style>
4. Silahkan Copy instruksi CSS ini, kemudian Paste sebelum instruksi
]]></b:skin>
atau </style>
/* CSS Note */ .note{position:relative;padding:1.2em 1.5em;margin:2em auto;color:#fff;background:#2ecc71;overflow:hidden} .note.yellow{background:#f1c40f} .note.red{background:#e74c3c} .note.blue{background:#3498db} .note:before{content:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;border-color:#fff #fff #27ae60 #27ae60;background:#27ae60;box-shadow:0 1px 1px rgba(0,0,0,0.3),-1px 1px 1px rgba(0,0,0,0.2);display:block;width:0} .note.yellow:before{border-color:#fff #fff #f1c40f #f1c40f;background:#f1c40f} .note.red:before{border-color:#fff #fff #e74c3c #e74c3c;background:#e74c3c} .note.blue:before{border-color:#fff #fff #3498db #3498db;background:#3498db}
5. Klik Simpan temaKode css di atas mempunyai 4 warna kotak catatan menyerupai yang sanggup Anda lihat pada demo di atas.
Untuk menerapkannya pada blog atau postingan, Anda cukup menambahkan salah satu instruksi HTML di bawah ini pada postingan blog Anda di mode HTML bukan Compose:
Kotak Catatan Warna Hijau
<div class='note'>...ISI DENGAN CATATAN...</div>
Kotak Catatan Warna Kuning
<div class='note yellow'>...ISI DENGAN CATATAN...</div>
Kotak Catatan Warna Merah
<div class='note red'>...ISI DENGAN CATATAN...</div>
Kotak Catatan Warna Biru
<div class='note blue'>...ISI DENGAN CATATAN...</div>
Catatan:
Untuk mengganti warna kotak catatan silahkan gunakan tool Kode Warna HTML.
Itulah artikel mengenai cara menciptakan kotak catatan warna warni di blog, semoga sanggup bermanfaat.Untuk mengganti warna kotak catatan silahkan gunakan tool Kode Warna HTML.
Sumber https://www.caramanual.com/
Kotak Catatan Warna Hijau
<div class='note'>...ISI DENGAN CATATAN...</div>
Kotak Catatan Warna Kuning
<div class='note yellow'>...ISI DENGAN CATATAN...</div>
Kotak Catatan Warna Merah
<div class='note red'>...ISI DENGAN CATATAN...</div>
Kotak Catatan Warna Biru
<div class='note blue'>...ISI DENGAN CATATAN...</div>
Catatan:
Untuk mengganti warna kotak catatan silahkan gunakan tool Kode Warna HTML.
Itulah artikel mengenai cara menciptakan kotak catatan warna warni di blog, semoga sanggup bermanfaat.Untuk mengganti warna kotak catatan silahkan gunakan tool Kode Warna HTML.
Sumber https://www.caramanual.com/
Related Posts
- Cara Menciptakan Web Push Notifications Di BloggerWeb push notifications merupakan pesan atau notifikasi pop-up yang muncul pada layar desktop maupun smartphone Anda dikala membuka halaman website at ...
- Cara Mengganti Warna Scrollbar Di Blogger Tampilan scrollbar yang biasa kita lihat berwarna abu-abu, namun ternyata dapat kita modifikasi tampilannya supaya lebih keren. Kita dapat mengga ...
- Cara Menciptakan Iklan Parallax Pada Blog Non Amp Iklan Parallax Cara Membuat Iklan Parallax Pada Blog Non AMP - Sahabat Pasti tahu Kan iklan parallax scrolling itu , parallax ini mungkin sanggup ...
- Cara Sharing Printer Di Windows 7 Melalui Jaringan Lan / Wifi Tips dan Trik Komputer - Cara Sharing Printer di Windows 7 Melalui Jaringan LAN / Wifi. Sharing Printer merupakan salah satu manfaat dari sebu ...
- Cara Menghilangkan Icon Obeng Dan Tang Atau Quick Edit Di Blogger Pengguna blogger mungkin sering melihat ada icon gambar obeng dan tang kecil di bab widget atau sidebar blog. Icon obeng dan tang ini merupakan t ...
- Cara Menciptakan Sitemap (Daftar Isi) Di Blog Versi LengkapApa itu sitemap? Sitemap jikalau diterjemahkan ke dalam Bahasa Indonesia berarti Peta Situs, yakni kumpulan link atau tautan yang mengarah ke posting ...