Cara Mudah Membuat Catatan di Blog

Hallo Blogger, kembali lagi dengan saya di DXTrip Blog dan terima kasih sudah berkunjung di Blog ini.

Pada kesempatn kali ini saya akan share untuk tutorial atau tips untuk blogger, mungkin tutorial ini sudah ada di blog yang lainnya, bahkan mungkin banyak yang sudah memposting tentang ini.

Pembahasan yang akan saya share adalah tentang cara membuat catatan atau note pada blog dengan effect lipatan. Sumber dari tutorial ini berasal dari master kita yaitu Arlina Design.

Untuk demonya, sobat bisa cek link di bawah ini :

Demo

Dan untuk tutorialnya sobat bisa simak tahapan yang sudah saya siapkan :

1. Masuk pada menu Template > Edit HTML.

2. Tambahkan code di bawah sebelum code </style>.

/* CSS Note by Arlina Design */
.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}

3. Simpan Template.

4. Pasang Catatan pada postingan di Tab HTML.

Warna Hijau 

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

Warna Orange

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

Warna Biru

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

Warna Crusta

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

Rate this artikel