Cara Menciptakan Catatan Box Keren Responsive
GAWARI-Didalam dunia blogger seringkali penulis blog menunjukkan catatan-catatan penting dalam goresan pena mereka.
Catatan itu dapat berupa peringatan, atau hal yang perlu diingat. Misalnya saja catatan box menyerupai yang ada di blog GAWARI ini.
Keren kan dapat menampilkan sesuatu yang menyerupai itu. Ini sangat penting apalagi jikalau kau mau menciptakan blog yang bekerjasama wacana tutorial. Entah itu tutorial blog, tutorial menciptakan kue, memasak, dan lain sebagainya.
Pokoknya cocok digunakan untuk segala kebutuhan blogging.
Tapi bagaimana cara membuatnya, yuk simak langkah-langkah dibawah.
5. Klik Simpan Tema.
Setelah simpulan pemasangan CSS nya kini kita akan berguru bagaimana menggunakannya dalam postingan blog.
Penggunaanya juga cukup gampang dan dalam sesi ini memakai HTML.
1. Pertama masuk ke Dashboard Blogger.
2. Buat Postingan baru.
3. Klik Mode HTML.
4. Lalu Salin instruksi dibawah ini.
Jika kau mau menambahkan tombol CLOSE di kotak catatan nya silah kan pakai instruksi yang dibawah.
RESULT Akan menyerupai dibawah.
Selesai, kini kau dapat memakai Catatan Box didalam setiap postingan kamu.
Bagaimana gampang kan Tutorial Cara Membuat Catatan Box Keren Responsive ini. Silahkan dicoba supaya blog kau menjadi semakin menarik.
Salam Blogger! Sumber https://gawarii.blogspot.com/
Catatan itu dapat berupa peringatan, atau hal yang perlu diingat. Misalnya saja catatan box menyerupai yang ada di blog GAWARI ini.
Keren kan dapat menampilkan sesuatu yang menyerupai itu. Ini sangat penting apalagi jikalau kau mau menciptakan blog yang bekerjasama wacana tutorial. Entah itu tutorial blog, tutorial menciptakan kue, memasak, dan lain sebagainya.
Pokoknya cocok digunakan untuk segala kebutuhan blogging.
Tapi bagaimana cara membuatnya, yuk simak langkah-langkah dibawah.
Cara Membuat Catatan Box Keren Responsive Seperti di Blog .
Cara pemasangan catatan box ini sangat mudah. Ikuti langkah-langkahnya dengan baik supaya nanti dapat bekerja dengan baik di blog kamu.
1. Pertama pastikan blog kau sudah terpasang Font Awesome atau Jquery dari Font Awesome.
Kalau belum silahkan baca bagaimana Cara Memasang Font Awesome Untuk Penggunaan Ikon di Blog.
2. Jika sudah terpasang masuk ke Dashboard Blogger.
3. Masuk sajian Tema > Edit HTML.
4. Cari tag instruksi </style> atau ]]></b:skin>. Lalu Copy Kode dibawah ini dan letakkan instruksi tersebut TEPAT DI ATAS instruksi </style> atau ]]></b:skin>. Pilih salah satu.
/* IKB-OX */ .ikbox{position:relative;border-radius:4px;display:block;font-size:14px;margin:16px 0;padding:12px 24px 12px 60px} .ikbox: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:8px} /* IKB-OX 1 */ .ikbox1:before{color:#039be5;content:'f005';} .ikbox1{background:#e1f5fe;color:#0288d1} /* IKB-OX 2 */ .ikbox2:before{color:#536dfe;content:'f0eb';} .ikbox2{background:#e8eaf6;color:#3f51b5} /* IKB-OX 3 */ .ikbox3:before{color:#78909c;content:'f1b0'} .ikbox3{background:#eceff1;color:#546e7a} /* IKB-OX 4 */ .ikbox4:before{color:#0f9d58;content:'f087'} /* IKB-OX 5 */ .ikbox5:before{color:#0f9d58;content:'f00c'} /* IKB-OX 6 */ .ikbox6:before{color:#00bfa5;content:'f19d'} .ikbox6{background:#e0f2f1;color:#00897b} /* IKB-OX 7 */ .ikbox7{background:#f3e5f5;color:#9c27b0} .ikbox7:before{color:#d500f9;content:'f031'} /* IKB-OX 8 */ .ikbox8:before{color:#ff6e40;content:'f06a'} .ikbox8{background:#fff3e0;color:#dd2c00} /* IKB-OX 9 */ .ikbox9:before{color:#dd2c00;content:'f088'} /* IKB-OX 10 */ .ikbox10:before{color:#dd2c00;content:'f05e'} /* Close Button */ .close{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} .close b,.close a{font-weight:500;} .close:hover{opacity:1} .close:focus,.tutup:active{outline:0} /* Note Icon Animation on Hover */ .ikbox1:hover:before,.ikbox2:hover:before,.ikbox3:hover:before,.ikbox4:hover:before,.ikbox5:hover:before,.ikbox6:hover:before,.ikbox7:hover:before,.ikbox8:hover:before,.ikbox9:hover:before,.ikbox10: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}}5. Klik Simpan Tema.
Cara Penggunaan Catatan Box Dalam Postingan
Setelah simpulan pemasangan CSS nya kini kita akan berguru bagaimana menggunakannya dalam postingan blog.
Penggunaanya juga cukup gampang dan dalam sesi ini memakai HTML.
1. Pertama masuk ke Dashboard Blogger.
2. Buat Postingan baru.
3. Klik Mode HTML.
4. Lalu Salin instruksi dibawah ini.
<div class="ikbox ikbox#"> Tulis catatanmu di sini! </div>Jika kau mau menambahkan tombol CLOSE di kotak catatan nya silah kan pakai instruksi yang dibawah.
<div class="ikbox ikbox#"> Tulis catatanmu di sini! <div aria-label='Close Note' class='tutup' onclick='this.parentElement.style.display="none"' role='button' tabindex='0'>×</div> </div> Silahkan ubah tanda pagar # dengan angka 1-10.
RESULT Akan menyerupai dibawah.
Test catatan hehe
Tiada lagi yang ku harapkan.
Tulis catatanmu di sini!
Tulis catatanmu di sini!
Tulis catatanmu di sini!
Tulis catatanmu di sini!
Tulis catatanmu di sini!
Tulis apa yahh.
Tulis catatanmu di sini!
Tulis catatanmu di sini!
Selesai, kini kau dapat memakai Catatan Box didalam setiap postingan kamu.
Bagaimana gampang kan Tutorial Cara Membuat Catatan Box Keren Responsive ini. Silahkan dicoba supaya blog kau menjadi semakin menarik.
Salam Blogger! Sumber https://gawarii.blogspot.com/