Cara Membuat Kotak Catatan Keren dan Responsive di Blog

Sering kali seorang blogger memberikan catatan-catatan penting di artikel yang mereka tulis, tentu termasuk kamu yang sedang membaca artikel ini hehe.

Dengan adanya catatan di artikel, tentu akan membantu pembaca untuk lebih mudah memahami isi artikel tersebut. Bayangkan jika terdapat kalimat penting pada artikel namun ditulis biasa-biasa saja tanpa ada perbedaan dengan tulisan yang lain, tentu pembaca yang tidak tau, bisa-bisa men-skip tulisan tersebut. Hal ini akan berakibat buruk jika yang dibaca adalah artikel yang berisi tutorial atau prosedur, jika ada langkah-langkah atau catatan yang di-skip, tentu tidak bisa mendapatkan hasil yang sesuai karena prosedur yang dilakukan masih kurang lengkap.

Oleh karena itu, sudah saatnya kamu menggunakan kotak catatan keren yang juga responsive pada blogmu, untuk menambah hiasan pada blogmu agar lebih terlihat menarik.

Gimana Cara Memasang Kotak Catatan yang Keren & Responsive di Blog?

Caranya cukup mudah, jangan lewatkan satu langkah pun, agar hasil yang kalian dapat bisa sesuai dengan yang dimaksud di sini.

I. Lakukan Pengecekan Pemasangan Font Awesome Icon Terlebih Dahulu

Sebelum masuk ke tahap pemasangan script kotak catatan, silahkan kamu mengecek telebih dahulu apakah Blogmu sudah terpasang Font Awesome Icon. Jika belum, silahkan kamu pasang terlebih dahulu, karena kode script yang saya bagikan ini akan bekerja dengan baik jika blogmu sudah terpasang Font Awesome Icon.

Apakah blog mu sudah terpasang Font Awesome Icon?

Jika kamu menggunakan template bawaan blogger, biasanya belum terpasang Font Awesome Icon, akan tetapi jika template blogmu adalah template hasil download atau membeli, biasanya sudah terpasang Font Awesome Icon. Biar lebih jelas, silahkan kamu cek di bagian Template blog mu, jika terdapat kode kurang lebih seperti di bawah ini, artinya blogmu sudah memasang Font Awesome Icon.

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

atau kode seperti ini

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

Jika benar-benar tidak ada, maka silahkan kamu memasang salah satu kode di atas, letakkan di atas kode </head>

II. Saatnya Memulai Tahap Pemasangan Kotak Catatan Keren & Responsive ke dalam Tema Blogger

Sampai sini tentu kalian sudah masuk ke akun Blogger.
1. Silahkan kalian pilih menu Tema lalu tekan tombol Edit Template.
2. Pasang kode CSS di bawah ini, di atas kode </style> atau ]]></b:skin>.

/* 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:12px}
/* 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}}

3. Setelah melakukan langkah di atas, silahkan klik Simpan Template.

III. Tahap Terakhir yaitu Dengan Menggunakannya di Dalam Postingan Blog

Setelah memasang kode CSS ke dalam template blogmu, sekarang adalah sesi yang ditunggu-tunggu, yaitu menggunakan Kotak Catatannya di dalam artikelmu. Dalam sesi ini, kita tetap akan berurusan dengan copy paste kode, namun tidak ke dalam Template blog, melinkan langsung ke bagian edit HTML pada entri atau artikel yang akan kita posting.

Silahkan kamu copy paste kode berikut ke bagian HTML postingan :

Ingat, bukan Compose, tapi taruh di bagian HTML!

<div class="ikbox ikbox#">
Tulis catatanmu di sini!
</div>

Jika sobat ingin menambahkan tombol close pada Kotak Catatannya, silahkan gunakan kode di bawah ini sebagai pengganti kode di atas :

<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 kamu ganti tanda '#' dengan angka 1-10!

Selesai, sekarang kamu bisa memasang kotak catatan di postingan ataupun halaman statis pada blogmu.
Semoga artikel ini bisa bermanfaat. Bantu share ke temen-temenmu yang lain, jika dirasa artikel ini bermanfaat!

Source code by : https://masihterjaga.blogspot.com/2018/08/cara-membuat-kotak-catatan-di-postingan-blogger.html

Ide Kevin Blog