Cara Menciptakan Catatan (Note Box) Dampak Lipatan

Cara Membuat Catatan (Note Box) Efek Lipatan - Kali ini Saya akan membagikan cara biar artikelmu lebih keren terutama bagi Kamu yang menciptakan artikel niche tutorial. Yaitu bagaimana cara menciptakan note box (catatan) dengan efek lipatan. Fungsinya bekerjsama hampir menyerupai dengan blockquote menyerupai biasanya, tetapi pemasangannya sedikit berbeda. Styke blockquote atau catatan ini sendiri merupakan desain (style) dari Arlina Design yang merupakan blogger sekaligus pembuat template yang responsive. Arlina juga sering membagikan desain-desain widget yang keren, salah satunya ya ini catatan dengan efek lipatan dengan aneka macam warna.

Memasang note box atau kotak catatan atau juga sering disebut blockquote sangat bermanfaat untuk penunjang postingan blog. Blockquote ini sanggup berfungsi untuk memperjelas atau menegaskan sebuah statement biar pembaca artikel mengetahui point penting yang dilarang dilewatkan dikala membaca artikel tersebut. Selain itu memakai blockquote dengan CSS ini menciptakan desain lebih bervariatif dan cenderung tidak membosankan dikala membaca isi postingan. Maka dari itu memakai blockquote dengan style tertentu sanggup bermanfaat untuk user experience. Apalagi jikalau style yang dipakai cukup keren, niscaya mereka bertanya-tanya bagiamana cara menciptakan dan memasangnya.

Langsung saja berikut tutorialnya.

Cara menciptakan catatan (note box) dengan efek lipatan berwarna

#1 Buka blogger

#2 Pilih hidangan Tema

#3 Pilih hidangan Edit HTML

#4 Cari kode ]]></b:skin> atau </style> Gunakan CTRL+F untuk mencarinya.

#5 Pasang isyarat di bawah ini sempurna sebelum kode ]]></b:skin> atau </style>

/* CSS Note */ .note{position:relative;padding:1.2em 1.5em;margin:2em auto;color:#fff;background:#2ecc71;overflow:hidden} .note.darkorange{background:#ff8c00} .note.lightseagreen{background:#20b2aa} .note.chocolate{background:#d2691e} .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.darkorange:before{border-color:#fff #fff #ff8c00 #ff8c00;background:#ff8c00} .note.lightseagreen:before{border-color:#fff #fff #20b2aa #20b2aa;background:#20b2aa} .note.chocolate:before{border-color:#fff #fff #d2691e #d2691e;background:#d2691e}

#6 Simpan Template

Untuk menambahkan catatan (note box) atau blocquote di artikel, Kamu tinggal mencopy isyarat di bawah ini dengan 4 macam warna.

1. Warna Medium Sea Green

<div class='note'>...TEKS CATATAN KAMU...</div>

2. Warna Dark Orange

<div class='note darkorange'>...TEKS CATATAN KAMU...</div>

3. Warna Light Sea Green

<div class='note lightseagreen'>...TEKS CATATAN KAMU...</div>

4. Warna Chocolate

<div class='note chocolate'>...TEKS CATATAN KAMU...</div>

Nah di sini Kamu sanggup mengganti warna kotak catatan sesuai seleramu. Kamu sanggup menentukan warna di HTMLCOLORCODES. Caranya ganti isyarat warna dan nama warna yang diinginkan. Bagaimana? keren bukan? Begitulah kiranya cara menciptakan kotak catatan (note box) efek lipatan dengan warna. Untuk tampilan, lebih jelasnya sanggup lihat demo di bawah ini.

Demo