Pada kesempatan kali ini saya akan membagikan tips bagaimana Cara Mudah Membuat Catatan Note Box Berwarna Dengan Efek Lipatan Pada Blogger. Penggunaan catatan note box berwarna dengan efek lipatan pada blogger ini menurut saya sangat bermanfaat, yaitu agar pembaca dapat mengetahui poin-poin penting yang tidak boleh dilewatkan untuk dibaca terdapat isi artikel yang kita buat.
Pada postingan sebelumnya sebenarnya saya pernah memposting bagaimana Cara Mudah Membuat Catatan Note Box Berwarna Pada Blogger namun tanpa memiliki efek lipatan. Namun pada tutorial kali ini catatan note box tersebut diberi efek lipatan agar terlihat lebih cantik dan tidak terlihat kaku.
Jadi balik lagi ke pembahasan kita sebelumnya saya akan memberikan tips bagaimana Cara Mudah Membuat Catatan Note Box Berwarna Dengan Efek Lipatan Pada Blogger berikut adalah ulasannya.
Cara Mudah Membuat Catatan Note Box Berwarna Dengan Efek Lipatan Pada Blogger
1. Buka Blogger > Template > Tambahkan kode di bawah ini sebelum ]]></b:skin> atau </style>
/* Note Box Color */
.note{position:relative;width:30%;padding:1.2em 1.5em;margin:2em auto;color:#fff;background:#2ecc71;overflow:hidden}
.note.orange{background:#f39c12}
.note.crusta{background:#F2784B}
.note.river{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.orange:before{border-color:#fff #fff #e67e22 #e67e22;background:#e67e22}
.note.crusta:before{border-color:#fff #fff #de6e45 #de6e45;background:#de6e45}
.note.river:before{border-color:#fff #fff #2980b9 #2980b9;background:#2980b9}
2. Simpan template. Kemudian untuk menambahkan catatan Anda cukup pilih salah satu kode HTML di bawah dengan 4 pilihan warna kemudian tambahkan di dalam postingan pada tab HTML
Warna Default
<div class='note'>...TULIS-CATATAN-ANDA-DISINI...</div>
Warna Orange
<div class='note orange'>...TULIS-CATATAN-ANDA-DISINI...</div>
Warna Biru
<div class='note river'>...TULIS-CATATAN-ANDA-DISINI...</div>
Warna Crusta
<div class='note crusta'>...TULIS-CATATAN-ANDA-DISINI...</div>
Demikian penjelasan dari saya bagaimana Cara Mudah Membuat Catatan Note Box Berwarna Dengan Efek Lipatan Pada Blogger. Jika ada hal yang kurang dipahami silahkan tinggal kan pesan anda di kolom komentar, semoga informasinya bermanfaat dan sampai jumpa di postingan berikutnya.