Sering kali dikala kita menciptakan sebuah artikel di blog kemudian menambahkan beberapa catatan penting supaya 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 efek 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 menawarkan 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 efek css lipatan ini sangat mudah, Anda hanya perlu memasukkan arahan css yang sudah saya siapkan, kemudian dikala ingin menambahkan catatan Anda hanya perlu menambahkan sedikit arahan html untuk memanggil arahan css yang telah di pasang sebelumnya.
Baca juga: Cara Membuat Widget Popular Post Keren Warna Warni di Blog
Perlu di ingat, bila Anda mengganti template blog mungkin efek lipatan pada kotak catatan dan warnanya juga akan hilang, bila ingin muncul kembali maka harus menambahkan kembali arahan cssnya kedalam template gres Anda.
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 efek 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 menawarkan 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 efek css lipatan ini sangat mudah, Anda hanya perlu memasukkan arahan css yang sudah saya siapkan, kemudian dikala ingin menambahkan catatan Anda hanya perlu menambahkan sedikit arahan html untuk memanggil arahan css yang telah di pasang sebelumnya.
Baca juga: Cara Membuat Widget Popular Post Keren Warna Warni di Blog
Perlu di ingat, bila Anda mengganti template blog mungkin efek lipatan pada kotak catatan dan warnanya juga akan hilang, bila ingin muncul kembali maka harus menambahkan kembali arahan cssnya kedalam template gres Anda.
Baik pribadi saja kita mulai, bila Anda tertarik untuk menciptakan kotak catatan dengan efek lipatan ini, silahkan ikuti langkah-langkahnya di bawah ini.
1. Masuk ke Blogger.com
2. Klik Tema > Edit HTML
3. Cari arahan
4. Silahkan Copy arahan CSS ini, kemudian Paste sebelum arahan
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 arahan HTML di bawah ini pada postingan blog Anda di mode HTML bukan Compose:
Sumber http://www.caramanual.com
Memasang Kotak Catatan Dengan Efek Lipatan Kertas
1. Masuk ke Blogger.com
2. Klik Tema > Edit HTML
3. Cari arahan
]]></b:skin> atau </style>4. Silahkan Copy arahan CSS ini, kemudian Paste sebelum arahan
]]></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 arahan 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 http://www.caramanual.com
Buat lebih berguna, kongsi:
