Icon svg blogger memiliki cara agak berbeda dengan icon svg yang kita pasang sendiri untuk mempercantik maupun untuk menambah estetik blog kita. Namun sayng blogger tidak memberikan tahukan secara detail dengan apa yang dimilikinya yang sebenarnya cukup sangat membantu para blogger untuk menggunakannya. Mereka meberikan nama icon pada setiap templatenya berbeda beda . Hingga para blogger enggan menggunkan icon tersebut, padahal icon svg miliknya ini secara fungsi lebih simple dan kode yang tidak panjang membuat kita lebih mudah juga tidak memkaan ruang yang banyak pada Html template kita. Selain mudah diterapkan dan bisa dipasang dimana saja kita mau.
Lalu seperti apakah kode icon svg milik blogger yang banyak orang tidak tahu itu.
Ayo kita mulai dari yang paling atas
1 . Icon Search
Terletak tentu pada box pencarian yang berfungsi sebagai tombol/button pencarian sebuah halaman, artikel, ketegori dan lainya.
Kodenya seperti berikut
<b:include data='{ iconClass: "touch-icon search-icon" }' name='searchIcon'/>
2. Icon Hamburger Menu
Icon ini hanya muncul pada versi mobile untuk di beberapa template blogger versi terbaru. Seperti Contempo, Soho, dan Emporio. Namun untuk Notable icon ini sudah muncul pada versi desktop, karena style templatenya tidak memiliki sidebar dan sidebar dipanggil dengan button toggle menu menggunakan icon ini.
Kodenya iconnya sebagai berikut
<b:include data='{ iconClass: "touch-icon hamburger-menu" }' name='menuIcon'/>
3. Icon Panah/Back Home
Icon ini jika pada contempo, soho dan emporio terdapat pada halaman post sebagai tombol untuk kembali ke halaman home, juga sebagai tombol penutup sidebar pada soho dan notable.
Berikut kodenya
<b:include data='{ iconClass: "touch-icon back-button rtl-reversible-icon" }' name='backArrowIcon'/>
4. Icon Silang/X
Icon ini muncul sebagai tombol penutup sidebar pada versi mobile untuk template Contempi dan emporio.
Kodenya sebagai berikut
<b:include data='{ iconClass: "touch-icon sidebar-back" }' name='closeIcon'/>
5. Icon Komentar
Icon ini terdapat pada Contempo dan emporia dan tampil di thumbnail di bawah judul postingan untuk menunjukan berapa jumlah komentar postingan tersebut.
Berikut kodenya
<b:include name='commentIcon'/>
6. Icon Berbagi/ Share Button
Tentu terdapat pada tombol berbagi sebelum kita membagikan ke medsos, kita harus menekan tombol ini. Kecuali Soho dan notable tidak menggunakan icon ini.
Kode sebagai berikut
<b:include data='{ shareButtonClass: "post-share-buttons-top", overridden: true }' name='shareIcon'/>
atau
<b:include data='{ shareButtonClass: "post-share-buttons-bottom", overridden: true }' name='maybeAddShareButtons'/>
7. Icon Media sosial
Untuk icon ini fungsinya tentu untuk membagikan artikel atau konten kita ke medsos. Terdiri dari icon Facebook, icon twitter, dan icon pinterest
Kodenya sebagai berikut
8. Icon Email
Seperti halnya dengan icon medsos, icon ini tampil sebelum icon share button diklik dan muncul bersamaan dengan mereka.
Kodenya sebagai berikut
<b:include data='{ iconClass: "touch-icon sharing-icon" }' name='emailIcon'/>
9. Icon Copy
Begitupula dengan icon ini, muncul sebelum icon share button diklik.
Kode sebagai berikut
10. Icon Titik Tiga
lcon ini berada pada menu header jika kita memasangnya dan apabila menu kita banyak sampai tidak muat berjejer secara horizontal maka icon ini akan muncul utuk memberitahukan, bahwa masih ada menu yang belum muncul untuk diklik.
Kodenya sebagai berikut
<b:include name='verticalMoreIcon'/>
11 . Icon Chevron
Icon chevron terdapat pada label/kategori dan pada arsip sebagai tombol pembuka label dan kategori tersebut.
Kodenya sebagai berikut
<b:include data='{iconClass: "chevron-up"}' name='chevronUpIcon'/>
Atau
<b:include data='{iconClass: "chevron-down"}' name='chevronDownIcon'/>
Cara penggunaan, saya akan mencontohkan pada icon chevron.
Misalnya kita akan menggunakan icon chevron ini dan di Pasang pada tombol postingan berikutnya. Maka tambahkan kode chevron tersebut setelah kode
<data:messages.morePosts/>
Contoh seperti ini
<b:includable id='nextPageLink'> <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:title='data:messages.morePosts'><data:messages.morePosts/> <b:include data='{iconClass: "chevron-kanan"}' name='chevronDownIcon'/></a> </b:includable>
Atau bisa menghapus <data:messages.morePosts/> dan menggantinya dengan kode icon tersebut.
Bila ingin merubah arahnya menjadi kekanan bisa menggunakan css transform.
Contoh
.chevron-kanan{-moz-transform: rotate(-90deg);-webkit-transform: rotate(-90deg);-o-transform: rotate(-90deg);-ms-transform: rotate(-90deg);transform: rotate(-90deg);padding:0px 5px;float:right;border:1px solid $(body.link.color);border-radius:6%;zoom:1.6;}
Untuk data='{iconClass: "chevron-kanan"}' adalah nama selektor class css untuk iconnya. Dan pasang cssny seperti biasa diatas
]]></b:skin>
Oke sekian dulu mudah-mudahan jadi sebuah informasi yang berguna buat kita semua.
Terimakasih telah menyimak
Wassalam.
Komentar
Posting Komentar