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.
1. Masuk ke Blogger.com
2. Klik Tema > Edit HTML
3. Cari instruksi
4. Silahkan Copy instruksi CSS ini, kemudian Paste sebelum instruksi
Kode 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:
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}Kode 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. Sumber https://www.caramanual.com/Untuk mengganti warna kotak catatan silahkan gunakan tool Kode Warna HTML.