Mwkhi54l4AT71A9SPj2FMDVTdJ7sCX4vtnoXHfCo
Membuat Kotak Catatan Warna Warni di Blog

Iklan 728x90

Membuat Kotak Catatan Warna Warni di Blog

Saya memiliki script Yang  Nanti nya berguna untuk mengisi box note atau contoh dengan mengisi kata kata bijak misalnya.
Agar mempercantik tulisan tersebut dengan box note


Memasang Kotak Catatan Dengan Efek  Lipatan Kertas

Langkah pertama silakan sobat masuke beranda blogger

1. Setelan > Tema > Lalu Edit HTML
2. Lalu cari kode </style>
3. Sobat salin kode dibawah ini dan sobat seletakan sebelum kode </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}

5. Klik Simpan Tema

Kode CCS di atas memiliki 3 warna berbeda

KODE CATATAN LIPAT WARNA HIJAU



<div class='note'>...ISI DENGAN CATATAN...</div>


KODE CATATAN LIPAT WARNA  MERAH



<div class='note red'>...ISI DENGAN CATATAN...</div>


KODE CATATAN WARNA  BIRU


<div class='note blue'>...ISI DENGAN CATATAN...</div>


KODE CATATAN WARNA  KUNING


<div class='note yellow'>...ISI DENGAN CATATAN...</div>

Bagimana sobat blogger mudah dan simpel bukan.
Baca Juga
SHARE
Man
seorang mahasiswa semester akhir yang suka mengumbar senyum, kemesraan, dan kebucinan bersama kucing. sangat menyukai nasi goreng, kota Bandung, dan kamu.

Related Posts

Subscribe to get free updates

Posting Komentar

Iklan Tengah Post

Iklan 300x250