Cara Membuat Kotak Info Di dalam postingan Blog

 Pada postingan kali ini Pemalang Otodidak akan membagikan Tutorial Cara membuat kotak INFO atau Warning! di dalam artikel blog.

Tahukah Anda apa itu Kotak info/Warning?
Di dalam web/blog, Kotak info atau Kotak Warning ini seperti "Blockquote", yang sering digunakan untuk membungkus kutipan teks penting dalam suatu artikel, supaya terlihat rapi dan keren. 

Mungkin kalian tidak asing atau sering melihatnya ketika sedang berkunjung di dalam web atau blog profesional, seperti blognya mba Igniel, saya lihat dia sering menggunakan kotak info ini sebagai pembungkus teks seperti: "Catatan, Penting, Tambahan, Info, Perhatian, Peringatan, dan lainnya".

Apakah Anda tertarik untuk membuatnya? Yuk simak lebih lanjut, di bawah ini akan saya berikan caranya:

Cara Membuat Kotak Info dengan CSS Dalam Postingan Blog

Ini tidak pengaruh besar pada kecepatan loading blog, karena hanya menggunakan CSS, dan untuk ikonnya menggunakan SVG. Berikut ini caranya:

• Pertama, Salin kode CSS kotak info yang sudah saya sediakan di bawah ini:

/* info */
.info {
    font-size: 16px;
    line-height: 1.65em;
    color: #333333;
    border-left: 5px solid #f1c40f;
    background-size: 35px;
    background-repeat: no-repeat;
    min-height: 50px;
    padding: 12px 12px 12px 60px;
    background-color: #edf10f;
    background-position: 12px 17px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='%235dbeaa' d='M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' /%3E%3C/svg%3E");
}

• Tempatkan kode tersebut di atasnya tag ]]></b:template-skin> atau ]]></b:skin>.

Untuk memperjelas, baca lebih lanjut.

Cara menempatkannya

• Pergi ke Dashboard blogger, lalu pilih Tema -> Edit HTML,
• Cari kode tag ini:
  

  ]]></b:template-skin> atau ]]></b:skin>

• Setelah ketemu, paste kode CSS info tadi tepat di atasnya,
• Klik Simpan.

Berikut ini contoh setelah kode ditempatkan:

Contoh pada template Viomagz, di atas ]]></b:template-skin>:

.info {
    font-size: 16px;
    line-height: 1.65em;
    color: #333333;
    border-left: 5px solid #f1c40f;
    background-size: 35px;
    background-repeat: no-repeat;
    min-height: 50px;
    padding: 12px 12px 12px 60px;
    background-color: #edf10f;
    background-position: 12px 17px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='%235dbeaa' d='M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' /%3E%3C/svg%3E");
}
]]></b:template-skin>

Contoh pada template Contempo, di atas ]]></b:skin>:

.info {
    font-size: 16px;
    line-height: 1.65em;
    color: #333333;
    border-left: 5px solid #f1c40f;
    background-size: 35px;
    background-repeat: no-repeat;
    min-height: 50px;
    padding: 12px 12px 12px 60px;
    background-color: #edf10f;
    background-position: 12px 17px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='%235dbeaa' d='M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' /%3E%3C/svg%3E");
}
]]></b:skin>

Cara menggunakannya

Setelah kita menempatkan kode CSS Kotak info tadi, selanjutnya kita akan menggunakannya dengan mengedit HTML Artikel agar tampil di postingan yang kita buat. Di sini kita akan memanggil elemen tersebut untuk membungkus kutipan kata yang akan kita tentukan. Berikut carannya:

• Pada postingan yang biasanya Tampilan menulis, ubah ke Tampilan HTML,
• Salin atau copy pastekan kode di bawah ini ke dalam HTML artikel:

<div class="info">...</div>

Ganti titik-titik dengan kalimat yang akan kalian gunakan, dan klik Simpan atau klik Prantinjau terlebih dahulu untuk melihat hasilnya.

• SELESAI.

Bagaimana? Sangat mudah ya kan...? 
Seperti itulah cara membuat dan menggunakan Kotak info pada postingan blogger, semoga artikel ini membantu Anda. Mungkin barangkali ada kata-kata yang kurang dipahami Anda bisa tanyakan di komentar. Terima kasih.