Membuat Catatan Khusus dengan Efek Lipatan di Postingan Blog

Membuat Catatan Khusus dengan Efek Lipatan di Postingan Blog

Membuat Catatan Khusus dengan Efek Lipatan di Postingan Blog - Membuat catatan khusus sering dilakukan jika kita menuliskan sebuah tutorial atau tips untuk menekankan hal hal yang sifatnya penting. Membuat catatan khusus juga dilakukan oleh penulis sebagai penjelasan dari sebuah kalimat yang isinya masih ambigu.

Membuat catatan khusus dengan memberikan efek tertentu didalam postingan bog akan menambah minat baca pengunjung situs anda. Karena mereaka akan lebih mudah memahami apa intisari dari semua isi artikel anda.

Untuk mempercantik tampilan situs, tampilan catatan khusus akan lebih menarik jika diberi efek misalnya efek warna maupun efek lipatan. Dengan efek tersebut maka akan ada pembeda dari uraian kalimat biasa dengan catatan khusus.

Untuk membuat catatan khusus dengan efek lipatan di postingan blog, berikut ini telah kami ambil kode css dari artikel yang telah diterbitkan oleh arlinadzgn.com. Ada bisa menerapkan di blog anda jika anda berminat.

Cara Membuat Catatan Khusus dengan Efek Lipatan di Postingan Blog

1. Masuk ke blogger, pilih tema kemudian edit HTML
2. Tambahkan kode CSS dibawah ini, diatas ]]></b:skin>

.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.

Untuk menggunakannya, anda tinggal memasukkan kode berikut ini kedalam postingan mode HTML

Warna 1

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

Warna 2

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

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

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

Jika berhasil maka catatan khusus dengan efek lipatan di postingan blog akan semakin menambah cantik tampilan blog anda. Saya ucapkan terimakasih kepada admin arlinadzgn.com yang telah berbagi cara ini sebelumnya.