Lompat ke konten Lompat ke sidebar Lompat ke footer

Daftar Data Icon SVG Standar di Template Blogger

Daftar Data Icon SVG Standar dari Template Blogspot

Pembahasan Icon SVG sebelumnya sudah pernah mimin bahas di artikel sebelumnya. Mulai dari memasang icon SVG, Membuat gambar menjadi format SVG dan cara menggunakannya.

Semuanya sudah mimin bahas secara lengkap beserta contoh gambar panduannya. Jika belum pernha membaca silahkan untuk mempelajarinya dulu.

Pembukaan

Dalam pembahasan kali ini, mimin hanya membagikan daftar icon SVG versi standar dari data template blogger.

Yang mana icon SVG ini tidak akan berfungsi jika digunakan selain di tema blogger.com.

Jika pada dasarnya kita ingin memasang icon SVG pada tema blogspot harus mengambil kodenya di situs Materialdesignicon.com.

Maka dipembahasan kali ini Anda cukup menyalin kode data icon SVG dari blogspot yang sudah mimin kumpulkan sesuai model dan jenisnya.

Jadi Anda tidak perlu lagi melakukan pengaturan CSS agar icon SVG ini sesuai tampilan.

Karena semua icon SVG disini sudah diatur secara bawaan dari tema blogspot itu sendiri.

Icon SVG disini hanya berjalan pada model tema blogspot versi terbaru.
  • Contempo
  • Soho
  • Emporio
  • Notable
  • Enssential

Untuk tema blogspot versi lawas | lama kemungkinan besar tidak akan bekerja.

Daftar Icon SVG Default Blogger

  1. <b:include data='{ button: true, iconClass: &quot;flat-icon-button ripple&quot; }' name='menuIcon'/> |
  2. <b:include data='{ button: true, iconClass: &quot;flat-icon-button ripple&quot; }' name='searchIcon'/> |
  3. <b:include data='{ button: true, iconClass: &quot;flat-icon-button ripple&quot; }' name='closeIcon'/> |
  4. <b:include data='{ button: true, iconClass: &quot;flat-icon-button ripple&quot; }' name='shareIcon'/> |
  5. <b:include data='{ button: true, iconClass: &quot;flat-icon-button ripple&quot; }' name='defaultAvatarIcon'/> |
  6. <b:include data='{ button: true, iconClass: &quot;flat-icon-button ripple&quot; }' name='flatbloggerIcon'/>  |
  7. <b:include data='{ button: true, iconClass: &quot;flat-icon-button ripple&quot; }' name='facebookIcon'/> |
  8. <b:include data='{ button: true, iconClass: &quot;flat-icon-button ripple&quot; }' name='twitterIcon'/> |
  9. <b:include data='{ button: true, iconClass: &quot;flat-icon-button ripple&quot; }' name='pinterestIcon'/> |
  10. <b:include data='{ button: true, iconClass: &quot;flat-icon-button ripple&quot; }' name='emailIcon'/> |
  11. <b:include data='{ button: true, iconClass: &quot;flat-icon-button ripple&quot; }' name='chevronDownIcon'/> |
  12. <b:include data='{ button: true, iconClass: &quot;flat-icon-button ripple&quot; }' name='chevronUpIcon'/> |
  13. <b:include data='{ button: true, iconClass: &quot;flat-icon-button ripple&quot; }' name='backArrowIcon'/> |
  14. <b:include data='{ button: true, iconClass: &quot;flat-icon-button ripple&quot; }' name='linkIcon'/> |
  15. <b:include data='{ button: true, iconClass: &quot;flat-icon-button ripple&quot; }' name='commentIcon'/> |
  16. <b:include data='{ button: true, iconClass: &quot;flat-icon-button ripple&quot; }' name='forwardArrowIcon'/> |
  17. <b:include data='{ button: true, iconClass: &quot;flat-icon-button ripple&quot; }' name='verticalMoreIcon'/> |
  18. <b:include data='{ button: true, iconClass: &quot;flat-icon-button ripple&quot; }' name='sharingOtherIcon'/> |

Penjelasan :
  • Area yang mimin beri warna hijau adalah tag pemanggil untuk setiap jenis icon
  • iconClass: " flat-icon-button " adalah seleksi class bagian tombol icon

Sampai saat ini, ada 18 model icon SVG yang sudah tersedia dari tema bawaan blogspot.

Apabila tampilan icon diatas berantakan saat dipasang, Anda harus menyalin kode CSS dibawah ini.
.svg-icon-24 {width:24px:height:24px}
Alasan mimin membagikan informasi ini adalah untuk membantu mempercepat pekerjaan Anda.

Dengan memakai kode data icon SVG diatas, maka akan lebih mudah bagi Anda untuk memasang | mengganti icon tema blogspot.

Saat ini template blogger yang kami buat yang bernama Blogger Stores semuanya menggunakan data icon SVG diatas.

Sehingga untuk data kode template akan terlihat tetap utuh karena mengikuti kualitas tema bawaan blogspot.

Walau untuk dari segi kekurangannya adalah tidak banyak pilihan jenis model icon SVG yang disediakan.

Tapi itu semua kembali dari sisi diri kita masing-masing, mau icon SVG yang versi bawaan blogger atau dari pihak lain.

Berikut 2 daftar situs penyedia icon SVG yang mimin sering gunakan untuk kepentingan mendesain tema.
  1. https://materialdesignicons.com/ - Material Design Icons
  2. https://icomoon.io/ - IcoMoon

Kata Penutup

Mungkin itulah beberapa informasi dari mimin terkait icon SVG versi standar dari blogspot.

Jika masih ada yang kurang, silahkan tulis masukannya dikolom komentar.

Posting Komentar untuk "Daftar Data Icon SVG Standar di Template Blogger"