Cara Membuat dan Memasang Note Lipatan Warna yang Menarik di Postingan Blog

ipung.net - Salah satu hal yang dapat membuat sebuah postingan menjadi menarik adalah dengan menambahkan warna, bentuk, gambar, video, dll. Biasanya tulisan yang di beri sentuhan tampilan seni demikian akan menambah daya tarik para pembaca.

Kali ini ipung.net akan berbagi cara membuat note di postingan blog yang menarik banyak pembaca. Note atau catatan yang akan dibuat membentuk pola lipatan di bagian ujungnya. Menarikkan? Kenapa bikin menarik? yang jelas akan menambah suasana di dalam postingan blog lebih hidup dengan warna.

Cara memasang note atau catatan dengan efek lipatan di postingan blog dengan efek lipatan.

Buka Blogger > Edit Template > Tambahkan Kode ini sebelum ]]></b:skin> atau </style>

/* CSS Note ipung.net*/
.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}

Simpan Template

Jangan buru-buru di cek ya guys, ini belum selesai. Pantas aja belum nongol kan. Heheh. Oke kita lanjutkan dengan menambahkan catatan anda dan kemudian masukkan sesuai dengan pilihan kode yang ada di bawah ini ya.

1. Pilihan Warna A
.

<div class='note'>...Contoh text dengan note efek lipatan warna by ipung.net...</div>

Hasil

...Contoh text dengan note efek lipatan warna by ipung.net...

2. Pilihan Warna B
.

<div class='note yellow'>...Contoh text dengan note efek lipatan warna by ipung.net...</div>

Hasil:

...Contoh text dengan note efek lipatan warna by ipung.net...

3. Pilihan Warna C

<div class='note red'>...Contoh text dengan note efek lipatan warna by ipung.net...</div>

Hasil:

...Contoh text dengan note efek lipatan warna by ipung.net...

4. Pilihan Warna D
.

<div class='note blue'>...Contoh text dengan note efek lipatan warna by ipung.net...</div>

Hasil:

...Contoh text dengan note efek lipatan warna by ipung.net...

Bagaimana guygs Hasilnya? Mantap djiwa kan? saatnya berkreasi