Cara Membuat Catatan Box Keren Responsive
GAWARI-Didalam dunia blogger seringkali penulis blog memberikan catatan-catatan penting dalam tulisan mereka.
Catatan itu bisa berupa peringatan, atau hal yang perlu diingat. Misalnya saja catatan box seperti yang ada di blog GAWARI ini.
Keren kan bisa menampilkan sesuatu yang seperti itu. Ini sangat penting apalagi jika kamu mau membuat blog yang berhubungan tentang tutorial. Entah itu tutorial blog, tutorial membuat kue, memasak, dan lain sebagainya.
Pokoknya cocok dipakai untuk segala kebutuhan blogging.
Tapi bagaimana cara membuatnya, yuk simak langkah-langkah dibawah.
5. Klik Simpan Tema.
Setelah selesai pemasangan CSS nya sekarang kita akan belajar bagaimana menggunakannya dalam postingan blog.
Penggunaanya juga cukup mudah dan dalam sesi ini menggunakan HTML.
1. Pertama masuk ke Dashboard Blogger.
2. Buat Postingan baru.
3. Klik Mode HTML.
4. Lalu Salin kode dibawah ini.
Jika kamu mau menambahkan tombol CLOSE di kotak catatan nya silah kan pakai kode yang dibawah.
RESULT Akan seperti dibawah.
Selesai, sekarang kamu bisa menggunakan Catatan Box didalam setiap postingan kamu.
Bagaimana mudah kan Tutorial Cara Membuat Catatan Box Keren Responsive ini. Silahkan dicoba agar blog kamu menjadi semakin menarik.
Salam Blogger!
Catatan itu bisa berupa peringatan, atau hal yang perlu diingat. Misalnya saja catatan box seperti yang ada di blog GAWARI ini.
Keren kan bisa menampilkan sesuatu yang seperti itu. Ini sangat penting apalagi jika kamu mau membuat blog yang berhubungan tentang tutorial. Entah itu tutorial blog, tutorial membuat kue, memasak, dan lain sebagainya.
Pokoknya cocok dipakai untuk segala kebutuhan blogging.
Tapi bagaimana cara membuatnya, yuk simak langkah-langkah dibawah.
Cara Membuat Catatan Box Keren Responsive Seperti di Blog Gawari.
Cara pemasangan catatan box ini sangat mudah. Ikuti langkah-langkahnya dengan baik agar nanti bisa bekerja dengan baik di blog kamu.
1. Pertama pastikan blog kamu 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 menu Tema > Edit HTML.
4. Cari tag kode </style> atau ]]></b:skin>. Lalu Copy Kode dibawah ini dan letakkan kode tersebut TEPAT DI ATAS kode </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 selesai pemasangan CSS nya sekarang kita akan belajar bagaimana menggunakannya dalam postingan blog.
Penggunaanya juga cukup mudah dan dalam sesi ini menggunakan HTML.
1. Pertama masuk ke Dashboard Blogger.
2. Buat Postingan baru.
3. Klik Mode HTML.
4. Lalu Salin kode dibawah ini.
<div class="ikbox ikbox#">
Tulis catatanmu di sini!
</div>Jika kamu mau menambahkan tombol CLOSE di kotak catatan nya silah kan pakai kode 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 seperti 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, sekarang kamu bisa menggunakan Catatan Box didalam setiap postingan kamu.
Bagaimana mudah kan Tutorial Cara Membuat Catatan Box Keren Responsive ini. Silahkan dicoba agar blog kamu menjadi semakin menarik.
Salam Blogger!
