Blogspot icon button

Daftar ikon svg template

Ikon svg dibawah ini berdasarkan template responsive (Contempo,Soho,Emporio,Notable).

<a class='return_link' expr:href='data:blog.homepageUrl'>
  <b:include data='{ iconClass: &quot;touch-icon back-button rtl-reversible-icon&quot; }' name='backArrowIcon'/>
</a>

<div class='hamburger-section'>
  <b:include data='{ iconClass: &quot;touch-icon hamburger-menu&quot; }' name='menuIcon'/>
</div>

Kedua ikon svg diatas letaknya berada di 1 tempat yang sama, hanya saja tampil secara bergantian pada jenis halaman yang berbeda. Ikon return-link terdapat pada halaman singleItem (halaman postingan & halaman statis) dan juga pada halaman pencarian kata kunci (search). Untuk Hamburger-menu muncul di halaman multipleItems (halaman depan (homepage) dan halaman pencarian label (LabelSearch))

<button class='search-expand touch-icon-button' expr:aria-label='data:messages.search.escaped'>
  <b:include data='{ iconClass: &quot;touch-icon search-expand-icon&quot; }' name='searchIcon'/>
</button>

<b:include data='{ iconClass: &quot;touch-icon search-icon&quot; }' name='searchIcon'/>

Seperti halnya 2 ikon sebelumnya, 2 ikon pencarian diatas juga ditampilkan secara bergantian, namun karena ikon yang digunakan pada dasarnya sama yaitu searchIcon terkesan seperti 1 ikon saja. Yang membedakan kedua ikon tersebut adalah nama "class" dan fungsinya, untuk search-expand-icon berfungsi sebagai tombol pembuka form pencarian, sedangkan search-icon berfungsi untuk mulai mencari setelah kata kunci dimasukkan.

<a expr:href='data:post.emailPostUrl' expr:title='data:messages.emailPost'>
  <b:include data='{ iconClass: &quot;touch-icon sharing-icon&quot; }' name='emailIcon'/>
</a>

Tombol ikon share via email ini merupakan fitur lama Blogger yang saat ini sudah jarang digunakan namun masih disematkan kedalam markup postingan di template bawaan.

<b:include data='{ iconClass: (&quot;touch-icon sharing-&quot; + data:platform.key) }' expr:name='data:platform.key + &quot;Icon&quot;'/>

Untuk sharing platform, ikon tersebut terdiri dari beberapa ikon logo media sosial populer sebagai target untuk membagikan postingan. Medsos yang paling umum adalah Facebook, Twitter dan Pinterest. Ikon link untuk copy link dan ikon berbagi via email

<div class='navigation'>
  <b:include data='{ iconClass: &quot;touch-icon sidebar-back&quot; }' name='closeIcon'/>
</div>

close-icon ini terletak di bagian atas Bilah Sisi (sidebar) yang berfungsi sebagai navigasi menyembunyikan / menutup Bilah Sisi.

<div class='default-avatar-wrapper'>
  <b:include data='{ iconClass: &quot;avatar-icon&quot; }' name='defaultAvatarIcon'/>
</div>

Ikon profile-image hanya akan muncul apabila profil Blogger penulis tidak terdapat foto.

Mengganti & menambahkan ikon svg.

1.Mengganti ikon svg bawaan.

Untuk mengganti ikon svg bawaan template, perhatikan atribut name= pada tag ikon, misal:

<div class='navigation'>
  <b:include data='{ iconClass: &quot;touch-icon sidebar-back&quot; }' name='closeIcon'/>
</div>

<!-- ganti nilai atribut name menjadi seperti ini -->

<div class='navigation'>
  <b:include data='{ iconClass: &quot;touch-icon sidebar-back&quot; }' name='name_baru'/>
</div>

Step 1 :
Ganti nilai pada atribut name= (yang ditandai warna pink) yaitu 'closeIcon' dengan name yang baru, misal diganti menjadi: 'close-ikon' atau 'tutup-menu' dsb bebas. Contoh diatas menggunakan nilai name_baru

Step 2 :
(Pastikan kursor berkedip didalam template.) Pada keyboard tekan ctrl + F untuk memunculkan form pencarian di pojok atas editor HTML template,
lalu ketikkan "common" dalam form tersebut dan tekan enter.
Cara tersebut untuk mengarahkan tampilan tepat pada tag <b:defaultmarkup type='Common'> .
Klik 2x kode dibawah ini untuk menyalin.

<b:includable id='name_baru'>
<!--area kosong-->
</b:includable>

Step 3 :
Cari ikon svg pengganti ikon bawaan, copy kode svg-nya lalu letakkan diantara tag b:includable diarea kosong pada tag markup diatas yang sudah di copy-paste sebelumnya.

Pastikan untuk mengganti nilai id = name yang dibuat. Jika tidak sama, maka akan terjadi error pada halaman.

Step 4 :
Tekan untuk menyimpan template

2.Menambah ikon svg lainnya.

Jika ingin menambahkan ikon lainnya ke dalam template, ulangi step 2 dan 3 lalu buat tag b:include untuk memanggil markup tersebut dan letakkan dilokasi yang diinginkan.

<b:include name='id_markup'/>

Jangan lupa untuk selalu menyamakan nilai name pada b:include dengan id pada markup b:includable.

  Sebelumnya

  

Selanjutnya