Cara Membuat Efek Lipatan Kertas Dengan CSS Di Blog

Bagaimana cara membuat efek lipatan kertas dengan kode css diatas?

1. Masuk Blogger
2. Klik Rancangan --> Edit Html --> Centang Expand Widget
3. Kemudian Cari kode ]]></b:skin>
4. kemudian letakkan kode berikut diatasnya :
   

   .note{
   position:relative;
   width:30%;
   padding:1em 1.5em;
   margin:2em auto;
   
   color:#fff;
   background:#97C02F;
   overflow:hidden;
   }
   
   .note:before{
   content:&quot;&quot;;
   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; /* Firefox 3.0 damage limitation */
   }
   
   /*
   --------------------------
   &quot;rounded&quot;
   --------------------------
   */
   
   .note.rounded{
   -webkit-border-radius:5px 0 5px 5px;
   -moz-border-radius:5px 0 5px 5px;
   border-radius:5px 0 5px 5px;
   }
   
   .note.rounded:before{
   border-width:8px;
   border-color:#fff #fff transparent transparent;
   -webkit-border-bottom-left-radius:5px;
   -moz-border-radius:0 0 0 5px;
   border-radius:0 0 0 5px;
   }

5. Kemudian Simpan Template.
   Untuk menggunakannya silahkan letakkan kode berikut pada postingan kamu :
   

   <div class='note'>
   letakkan konten atau kode anda disini
   </div>

   Dan jika rounded corner letakkan kode dibawah:
   

   <div class='note rounded'>
   letakkan konten atau kode anda disini
   </div>