Cara Membuat Box Quote Bericon SVG di Blogger

Multilenial.com

Cara Membuat Box Quote Bericon SVG di Blogger | Banyak tutorial untuk membuat box quote di google, namun kebanyakan masih menggunakan icon fontawesome sehingga kecepatan blog menjadi melambat.

Untuk itulah pada kesempatan kali ini, multilenial.com akan memberikan tutorial membuat box quote dengan icon SVG sehingga loading blog menjadi cepat.

Tutorial membuat box quote bericon SVG di blogger

Untuk membuat box quote tersebut, langkah-langkahnya sebagai berikut ini.

1. Backup terlebih dahulu template yang digunakan agar nantinya ketika ada error dapat dengan mudah mengatasinya.
2. Buka edit HTML
3. Tekan Ctrl + F lalu cari kode </style>
4. Setelah ketemu, lalu tambahkan kode dibawah ini tepat diatas kode </style> tersebut

  /* Box Quote */
.notes{position:relative;border-radius:5px;display:block;font-size:14px;margin:16px 0;padding:12px 24px 12px 55px}
.info{
background-image: url("data:image/svg+xml, %3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13,9H11V7H13M13,17H11V11H13M12,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' fill='%23039be5'/%3E%3C/svg%3E");
background-size: 35px;
background-repeat: no-repeat;
background-color:#edf094;
background-position: 12px 17px;
color:#353535;
}
.cakra {
background-image: url("data:image/svg+xml, %3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z' fill='%23ff3333'/%3E%3C/svg%3E");
background-size: 35px;
background-repeat: no-repeat;
background-color:#ffcccc;
background-position: 12px 17px;
color:#353535;
}
.link {
background-image: url("data:image/svg+xml, %3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z' fill='%23039be5'/%3E%3C/svg%3E");
background-size: 35px;
background-repeat: no-repeat;
background-color:#cce0ff;
background-position: 12px 17px;
color:#353535;
}
.ceklis {
background-image: url("data:image/svg+xml, %3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='%23669900'/%3E%3C/svg%3E");
background-size: 35px;
background-repeat: no-repeat;
background-color:#d9ffb3;
background-position: 12px 17px;
color:#353535;
}
.warning {
background-image: url("data:image/svg+xml, %3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13,14H11V10H13M13,18H11V16H13M1,21H23L12,2L1,21Z' fill='%23ff9900'/%3E%3C/svg%3E");
background-size: 35px;
background-repeat: no-repeat;
background-color:#ffe0b3;
background-position: 12px 17px;
color:#353535;
}

5. Lalu simpan. Pemasangan kode CSS telah selesai.

Setelah itu, untuk bisa menampilkannya di psotingan, tambahkan javascript dibawah ini.

<div class="notes info">Ini Teksnya Gan</div>

Baca Juga: Cara Mengubah Tampilan Komentar Blog Ke Versi Terbaru

Untuk kodenya lihat contoh dibawah ini

Ini contoh box quote info. Ini contoh box quote info. Ini contoh box quote info. Ini contoh box quote info. Ini contoh box quote info.

Ini contoh box quote ceklis. Ini contoh box quote ceklis. Ini contoh box quote ceklis. Ini contoh box quote ceklis.

Ini contoh box quote cakra. Ini contoh box quote cakra. Ini contoh box quote cakra. Ini contoh box quote cakra.

Ini contoh box quote warning. Ini contoh box quote warning. Ini contoh box quote warning. Ini contoh box quote warning.

Ini contoh box quote link. Ini contoh box quote link. Ini contoh box quote link. Ini contoh box quote link. Ini contoh box quote link.

Bagaimana cukup mudah, kan?