Cara Membuat Catatan Box Keren Responsive - Hallo sahabat ndelet.com, Pada Artikel yang anda baca kali ini dengan judul Cara Membuat Catatan Box Keren Responsive, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel blog, Artikel lain-lain, Artikel Tutorial Blog, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Cara Membuat Catatan Box Keren Responsive
link : Cara Membuat Catatan Box Keren Responsive

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.

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=&quot;none&quot;' role='button' tabindex='0'>&times;</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!

Demikianlah Artikel

Sekianlah artikel kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel dengan alamat link