Agan Koben hanya akan menyampaikan dua informasi update dari blogger dan google. Yang pertama datang dari blooger buzz tentang pembaharuan syntax XML. Sobat bisa baca di sini buzz.blogger.com/2015/05/adding-new-expressions-to-blogger.html Versi master Taufik www.dte.web.id/2015/06/pembaharuan-operator-xml-blogger-2015.html Karena saya juga belum paham, silahkan sobat blogger membaca sendiri :D Semoga dengan adanya pemutakhiran expression ini akan lebih efisien tentunya ;)Informasi ke dua datang dari google mengenai material icons! Salah satu layanan dari google design yang memungkinkan kita untuk melakukan pemanggilan icon. Sobat mungkin lebih familiar dengan Font Awesome Icon! Tidak jauh berbeda dengan hal itu, tetapi di sini kita akan menggunakan hostingan langsung dari embah google :D Ada 750+ icon yg sudah tersedia dengan size hanya 40KB saja dengan format woff2!
AA akan coba tuntun bagaimana cara memasang material icons google. Ada 2 metode yg bisa kita pakai.
Metode 1
Cara termudah untuk mengatur ikon font untuk digunakan dalam setiap halaman web adalah melalui Google Web Font. Yang perlu Anda lakukan adalah memasukkan satu baris HTML berikut:<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />Letakan yaaa kira-kira di bawah tag <head>Metode 2
Bagi sobat yg ingin menghosting sendiri font web, bisa melakukan dengan cara ini:@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
} .material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
width: 1em;
height: 1em;
line-height: 1;
text-transform: none;
letter-spacing: normal;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
} // Aturan untuk ukuran ikon.
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
// Aturan untuk menggunakan ikon sebagai hitam sebagai warna latar belakang.
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
// Aturan untuk menggunakan ikon putih sebagai warna latar belakang.
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); } | Display | Syntax |
|---|---|
| face | <i class="material-icons">face</i> |
| <i class="material-icons UNIK-ID for CLASS">face</i> |
>> www.google.com/design/icons
>> google.github.io/material-design-icons
>> github.com/google/material-design-icons
>> codeload.github.com/google/material-design-icons/zip/master
>> github.com/google/material-design-icons/blob/master/iconfont/codepoints
Bonus...
>> www.google.com/design/tool/devices
Sebenarnya memang lagi rombak besar-besaran ngikutin trend material design gitooh :D
Terima kasih :)
Sekarang jika sobat ingin mengubah warna tombol pemutar, menyembunyikan informasi player dan mengedit dimensi player, maka kita dapat memasukkan atribut dengan syntax seperti dibawah ini
Penulisan syntax diatas hanya contoh saja, rincian lengkap tentang cara menggunakan/menuliskan syntax shortcode-plugin akan dibagi dalam tutorial mendatang (UPDATED)
Hostingkan gambar tersebut, mau diedit-edit dulu jg silahkan!
