Membuat Catatan Dengan Efek Kertas Lipat Di Postingan Blog

Membuat Catatan Dengan Efek Kertas Lipat Di Postingan Blog - Sebelumnya Saya sudah membagikan artikel tentang cara membuat widget label dengan efek kertas lipat. Dan pada kesempatan kali ini Saya akan coba posting cara membuat catatan dengan efek kertas lipat pada postingan blog.

Selain membuat postingan yang baik dan unik, tampilan blog juga harus bagus dan keren, sehingga pengunjung semakin betah pada blog Anda, salah satunya membuat catatan dengan efek kertas lipat agar postingan pada blog Anda lebih manarik untuk dibaca.

Untuk Demo tampilan catatan dengan efek kertas lipat seperti pada gambar dibawah ini.

Bagaimana menurut Anda, keren kan?. Nah, setelah Anda melihat contoh pada gambar di atas mungkin Anda tertarik untuk membuat catatan dengan efek kertas lipat pada blog Anda. Jika ingin membuat catatan efek kertas lipat, silahkan ikuti caranya berikut ini.

Membuat Catatan Dengan Efek Kertas Lipat

---

Masuk akun blogger, pilih menu Tema >> EDIT HTML.

Kemudian simpan CSS di bawah ini diatas kode ]]></b:skin> atau </style>

.note {
   position:relative;
   width:100%;
   padding:1em 1.5em;
   margin:2em auto;
   color:#fff;
   background:#97C02F;
   overflow:hidden;
}
.note:before {
   content:"";
   position:absolute;
   top:0;
   right:0;
   border-width:0 16px 16px 0;
   border-style:solid;
   border-color:#fff #fff #658E15 #658E15;
   background:#658E15;
   -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
   -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
   box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
   display:block; width:0;
}

Kemudian untuk menghasilkan efek kertas lipat, gunakan kode di bawah ini di dalam postingan.

<div class="note">
Disini isi catatan atau pesan
</div> 

Bagaimana, cukup mudah mukan?. Nah, cukup sampai disini saja postingan tentang cara Membuat Catatan Dengan Efek Kertas Lipat Di Postingan Blog. Selamat mencoba dan semoga bermanfaat.