Cara Membuat Note di Postingan Blog Menarik Berupa Efek Lipatan Warna - intensitas.com
logo
KATEGORI

Cara Membuat Note di Postingan Blog Menarik Berupa Efek Lipatan Warna

Cara Membuat Note di Postingan Blog Menarik Berupa Efek Lipatan Warna

Salah satu hal yang dapat membuat sebuah postingan yang 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 intensitas.com 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 Intensitas.com */
.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}

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.

Pilihan Warna A
<div class='note'>...ISI DENGAN CATATAN ANDA...</div>

Pilihan Warna B
<div class='note orange'>...ISI DENGAN CATATAN ANDA...</div>

Pilihan Warna C
<div class='note river'>...ISI DENGAN CATATAN ANDA...</div>

Pilihan Warna D
<div class='note crusta'>...ISI DENGAN CATATAN ANDA...</div>

Contoh Hasil
...ISI DENGAN CATATAN ANDA...

Bagaimana guygs Hasilnya? Mantap djiwa kan? saatnya berkreasi

Disclaimer: Images, articles or videos that exist on the web sometimes come from various sources of other media. Copyright is fully owned by the source. If there is a problem with this matter, you can contact