Cara Membuat Kotak Catatan di Postingan Blog

Cara Membuat Kotak Catatan di Postingan Blog-anditii.web.id

                 Assalamu'alaikum Warahmatullahi Wabarakatuh.

             Anditii.web.id - Selamat malam semuanya kali ini mimin akan share sedikit trik dalam blogging, yang pertama akan mimin bahas bagaimana caranya memberikan kotak catatan yang fungsinya untuk memeberikan informasi yang bersifat penegasan dalam suatu article yang diposting pada blog, dan isinya bebas tergantung dari tujuan article itu sendiri di posting, langsung saja perhatikan step by step dibawah ini :

  • Pertama yang perlu kalian lakukan adalah masuk pada menu dashboard blogger kalian dan pilih menu Tema - Edit HTML
Cara Membuat Kotak Catatan di Postingan Blog-anditii.web.id

  • Kemudian masukkan kode CSS yang sudah mimin siapkan dibawah ini sebelum </script>
atau ]]></b:skin> yang ada di dalam menu edit HTML tadi untuk memudahkan pencarian bisa kalian tekan tombol CTRL+F kemudian isikan </script> atau ]]></b:skin>

/* 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}}

  • Berikut ini adalah penampakan sebelum pemasangan script dan sesudah pemasangan script
Cara Membuat Kotak Catatan di Postingan Blog-anditii.web.id

Cara Membuat Kotak Catatan di Postingan Blog-anditii.web.id
  • Kalau sudah tekan tombol Simpan Tema dibagian atas yang berwarna orange untuk menyimpan perubahan yang sudah kalian lakukan tadi
  • Langkah selanjutnya coba kalian buat sebuah postingan di blogger kemudian masuk ke menu HTML perhatikan gambar dibawah ini
Cara Membuat Kotak Catatan di Postingan Blog-anditii.web.id
  • Kemudian masukkan Script kotak Catatan dibawah ini, sesuaikan posisinya menurut selera kalian masing - masing 
          - Script Tanpa Tanda Close

<div class="mtbox mtbox#"> ...letakan teks sobat disini... </div>
     
          - Script dengan Tanda Close

<div class="mtbox mtbox#"> ...teks disini... <div aria-label='Close Note' class='tutup' onclick='this.parentElement.style.display=&quot;none&quot;' role='button' tabindex='0'>&times;</div> </div>
  • Keterangan # Tanda pagar warna merah kalian isi angka 1-10 untuk memilih style kotak catatan yang kalian inginkan, dan pada tulisan berwarna biru diatas tempat meletakkan catatan yang ingin kalian sampaikan.
  • Berikut dibawah ini adalah style dari kotak catatan nya urut dari nomor 1 sampai dengan 10 
  • Done
Lorem ipsum dolor sit amet, eos ludus intellegat cu, ex rebum lucilius vel, malis debitis probatus mei ne. In quaeque ullamcorper sed, no ius meis debet graeco. Elitr nonumy pro et, omnes oblique invenire ea has. Qui ex veritus delectus.
×

Lorem ipsum dolor sit amet, eos ludus intellegat cu, ex rebum lucilius vel, malis debitis probatus mei ne. In quaeque ullamcorper sed, no ius meis debet graeco. Elitr nonumy pro et, omnes oblique invenire ea has. Qui ex veritus delectus.
×

Lorem ipsum dolor sit amet, eos ludus intellegat cu, ex rebum lucilius vel, malis debitis probatus mei ne. In quaeque ullamcorper sed, no ius meis debet graeco. Elitr nonumy pro et, omnes oblique invenire ea has. Qui ex veritus delectus.
×

Lorem ipsum dolor sit amet, eos ludus intellegat cu, ex rebum lucilius vel, malis debitis probatus mei ne. In quaeque ullamcorper sed, no ius meis debet graeco. Elitr nonumy pro et, omnes oblique invenire ea has. Qui ex veritus delectus.
×

Lorem ipsum dolor sit amet, eos ludus intellegat cu, ex rebum lucilius vel, malis debitis probatus mei ne. In quaeque ullamcorper sed, no ius meis debet graeco. Elitr nonumy pro et, omnes oblique invenire ea has. Qui ex veritus delectus.
×

Lorem ipsum dolor sit amet, eos ludus intellegat cu, ex rebum lucilius vel, malis debitis probatus mei ne. In quaeque ullamcorper sed, no ius meis debet graeco. Elitr nonumy pro et, omnes oblique invenire ea has. Qui ex veritus delectus.
×

Lorem ipsum dolor sit amet, eos ludus intellegat cu, ex rebum lucilius vel, malis debitis probatus mei ne. In quaeque ullamcorper sed, no ius meis debet graeco. Elitr nonumy pro et, omnes oblique invenire ea has. Qui ex veritus delectus.
×

Lorem ipsum dolor sit amet, eos ludus intellegat cu, ex rebum lucilius vel, malis debitis probatus mei ne. In quaeque ullamcorper sed, no ius meis debet graeco. Elitr nonumy pro et, omnes oblique invenire ea has. Qui ex veritus delectus.
×

Lorem ipsum dolor sit amet, eos ludus intellegat cu, ex rebum lucilius vel, malis debitis probatus mei ne. In quaeque ullamcorper sed, no ius meis debet graeco. Elitr nonumy pro et, omnes oblique invenire ea has. Qui ex veritus delectus.
×

Lorem ipsum dolor sit amet, eos ludus intellegat cu, ex rebum lucilius vel, malis debitis probatus mei ne. In quaeque ullamcorper sed, no ius meis debet graeco. Elitr nonumy pro et, omnes oblique invenire ea has. Qui ex veritus delectus.
×

Previous
Next Post »
### skrip untuk pop up email pendaftaran