Cara Membuat Kotak Catatan Keren di Blogger

Cara Membuat Kotak Catatan Keren di Blogger

Cara Membuat Kotak Catatan di Blogger

Pada kesempatan kali ini admin ingin sedikit share seputar dunia blogging yaitu Cara Membuat Kotak Catatan Keren di Blogger atau yang biasa dikenal dengan Note Box, dengan tampilan yang menarik saya rasa anda juga akan menyukainya.

Jika anda seorang blogger, sangat admin sarankan supaya kalian memasang kotak catatan ini di blog kalian masing-masing, kenapa? supaya pengunjung dapat membedakan mana yang penting, diketahui, dan tentunya diingat.

Kotak catatan kali ini memiliki desain yang menarik diantaranya adalah kotak warna-warni, include icon font awesome, dan tombol close. Sedangkan untuk membuatnya anda hanya perlu menambahkan CSS, dan kode HTML.

Blog ini juga telah memasang kotak catatan hanya saja dengan desain atau gaya yang berbeda. Untuk anda yang penasaran dengan tampilan dari kotak catatan ini, anda bisa lihat hasil jadinya dengan menekan tombol demo dibawah ini.

Demo Note Box

Apakah menarik? Jika iya dan kalian ingin pasang di blog sendiri, ikuti tutorial berikut ini yang akan saya pandu melalui tulisan.

Persyaratan

Sebelum menuju ke tutorial pemasangan, alangkah baiknya anda pasang font awesome terlebih dahulu di template yang anda gunakan agar kotak catatan dapat menampilkan icon.

Cara Memasang Font Awesome

  1. Pastikan anda sudah login di Blogger.com
  2. Pada dashboard, silahkan pilih menu Template > Edit HTML
  3. Lalu cari kode </head> 
    Untuk memudahkan pencarian, gunakan tombol pintasan CTRL+F di keyboard.
  4. Kemudian salin kode berikut ini, dan letakkan diatas kode (langkah no.3)
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
  5. Selesai.

Cara Memasang CSS Kotak Catatan

  1. Cari kode </style> atau ]]></b:skin>
  2. Kemudian salin dan letakkan kode beriku ini, tepat sebelum kode (langkah no.1)
    /* MTBOX */
    .mtbox{position:relative;border-radius:4px;display:block;font-size:14px;margin:16px 0;padding:12px 24px 12px 60px}
    .mtbox:before{float:left;font-size:32px; font-family:FontAwesome;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;word-wrap:normal;margin-left:-46px;margin-top:12px}
    /* MTBOX 1 */
    .mtbox1:before{color:#039be5;content:'\f005';}
    .mtbox1{background:#e1f5fe;color:#0288d1}
    /* MTBOX 2 */
    .mtbox2:before{color:#536dfe;content:'\f0eb';}
    .mtbox2{background:#e8eaf6;color:#3f51b5}
    /* MTBOX 3 */
    .mtbox3:before{color:#78909c;content:'\f1b0'}
    .mtbox3{background:#eceff1;color:#546e7a}
    /* MTBOX 4 */
    .mtbox4:before{color:#0f9d58;content:'\f087'}
    /* MTBOX 5 */
    .mtbox5:before{color:#0f9d58;content:'\f00c'}
    /* MTBOX 6 */
    .mtbox6:before{color:#00bfa5;content:'\f19d'}
    .mtbox6{background:#e0f2f1;color:#00897b}
    /* MTBOX 7 */
    .mtbox7{background:#f3e5f5;color:#9c27b0}
    .mtbox7:before{color:#d500f9;content:'\f031'}
    /* MTBOX 8 */
    .mtbox8:before{color:#ff6e40;content:'\f06a'}
    .mtbox8{background:#fff3e0;color:#dd2c00}
    /* MTBOX 9 */
    .mtbox9:before{color:#dd2c00;content:'\f088'}
    /* MTBOX 10 */
    .mtbox10:before{color:#dd2c00;content:'\f05e'}
    /* Close Button */
    .tutup{position:absolute;top:5px;right:5px;width:17px;height:17px;line-height:20px;text-align:center;font-size:24px;font-weight:500;opacity:.3;cursor:pointer}
    .tutup b,.tutup a{font-weight:500;}
    .tutup:hover{opacity:1}
    .tutup:focus,.tutup:active{outline:0}
    /* Note Icon Animation on Hover */
    .mtbox1:hover:before,.mtbox2:hover:before,.mtbox3:hover:before,.mtbox4:hover:before,.mtbox5:hover:before,.mtbox6:hover:before,.mtbox7:hover:before,.mtbox8:hover:before,.mtbox9:hover:before,.mtbox10:hover:before{-webkit-animation:flash 1s linear 1s infinite normal;animation:flash 1s linear 1s infinite normal}@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}
  3. Save Template.

Cara Menerapkan Pada Artikel

  1. Pada dashboard blogger, silahkan pilih menu Postingan > Entri Baru
  2. Lalu pilih metode penulisan HTML bukan Compose
  3. Kemudian salin dan letakkan kode berikut ini ke dalam teks editor.
    // Kotak Catatan Tanpa Menggunakan Close Button
    <div class="mtbox mtbox8">
     ...Masukan teks anda disini... 
    </div>
    
    // Kotak Catatan Menggunakan Close Button
    <div class="mtbox mtbox8">
     ...Masukan teks anda disini... 
    <div aria-label='Close Note' class='tutup' onclick='this.parentElement.style.display=&quot;none&quot;' role='button' tabindex='0'>&times;</div>
    </div>
  4. Publikasikan

Jika anda sudah melakukan pemasangan seperti tutorial diatas, saya pastikan tidak ada kegagalan atau error pada template yang anda gunakan. Jika anda masih gagal atau kurang paham dengan apa yang telah saya berikan, silahkan bertanya melalui kolom komentar yang tersedia dibawah artikel ini.

Saya rasa cukup sekian dulu artikel dari Cara Membuat Kotak Catatan Keren di Blogger, semoga bermanfaat untuk kalian semua.
Terima kasih