Close Menu

Cara Membuat Catatan dengan Efek Lipat di Blogger

ErwinBy

Pada kesempatan ini admin akan membagikan tutorial cara membuat catatan keren dengan efek lipat di blogger.

Jika kalian bosan dengan catatan bawaan template dan ingin tampilan catatan kalian terlihat lebih keren, kalian bisa mengikuti tutorial ini.

Note box atau atau kotak catatan ini memiliki efek lipatan kecil di sudut kanan atas yang dapat buka tutup dengan gerakan scroll mouse. Tentunya ini responsive untuk tampilan mobile dan desktop. Untuk tutorialnya sebagai berikut.

Cara Membuat Catatan dengan Efek Lipat di Blogger

  1. Buka Blogger
  2. Pilih Tema
  3. Pada menu SESUAIKAN, pilih Edit HTML
  4. Kemudian letakkan kode ini tepat berada diatas kode </body> atau &lt;/body&gt;
    /* Pita CSS by felmika.com */
.mikanotes{background:#f8cf82;color:#000;font-size:15px;position:relative;padding:1.2em 1.5em;margin:1em auto;overflow:hidden;text-align:left;word-spacing:0}
.mikanotes:before{content:"";position:absolute;top:0;right:0;border-width:0 16px 16px 0;border-style:solid;border-color:#fff #fff #d8b471 #d8b471;background:#d8b471;display:block;width:0}
.mikanotes:hover:before{display:none}
  5. Jika sudah pilih Simpan Tema

Untuk menerapkannya pada halaman postingan kalian, buat postingan baru dan masukkan kode ini pada Tampilan HTML.

<div class="mikanotes">Isi dengan Teks Kalian</div>
DEMO

Itulah tadi cara membuat kotak catatan dengan efek lipat dalam postingan blogger. Jika ada hal yang kurang dipahami dan ingin ditanyakan bisa langsung ke kolom komentar, terimakasih.

 

Share.
Add A Comment

Leave A Reply