Trik Komputer: Buzz Information for Blogger by Google

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');
}

Adapun link download source nanti ada pada akhir acara! Aturan CSS render font icon adalah sbb:

.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';
}

Ekstra aturan untuk CSS render

// 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); }

Cara penggunaan huruf ikon di HTML. Contoh sederhana...

Display	Syntax
	<i class="material-icons">face</i>
	<i class="material-icons UNIK-ID for CLASS">face</i>

Source:
>> 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 :)

Trik Komputer

Jumat, 05 Juni 2015

Buzz Information for Blogger by Google

Metode 1

Metode 2

Tidak ada komentar:

Posting Komentar