Custom Awesome Font - Hari ini sepertinya mau posting banyak-banyak. Seperti kita tahu semua, untuk membuat icon sekarang tidak perlu susah payah dengan image, kita bisa memanfaatkan awesome font / awesome icon. (Baca: Menggunakan Awesome Icon di Blogspot).

Nah, disana sudah dibahas coding standart untuk menentukan ukuran icon, memutar icon, flip icon dan lain-lain. Tapi sebenarnya kita bisa menambahkan kode CSS Custom untuk mengatur awesome ikon sesuai keinginan kita.

Misalkan kita mencoba mengubah awesome icon Facebook, yang kodenya:

<i class="icon-facebook"></i> 

Nah, kita bisa menambahkan CSS custom dengan selector .icon-facebook
Contoh kodenya adalah: - Di tambahkan di atas ]]></b:skin>

Daftar Lengkap Awesome Icon -  Sebelumnya saya sudah posting tentang pemasangan awesome ikon di blog (baca: Menggunakan Awesome Icon di Blog). Nah, berikut ini daftar lengkap kode-kode ikon yang bisa Anda pakai:

Cara menggunakan Awesome Font di Blogspot - Perkembangan Bootstrap mulai menarik diikuti (selama ini ane kemana aje? baru post hahaha < blogger ketinggalan jaman). Nah, karena banyaknya minat pembaca mengenai tema ini, maka di blog ini akan di bahas tentang bootstrap secara serial. Ya, kita belajar bareng lah sambil lihat perkembangannya. Untuk hal yang paling sederhana dulu, bagi temen-temen yang pengen menggunakan awesome font di blog.

Apa Itu Awesome Font?
Jika kalian sering twitteran maka kalian tidak akan asing dengan font ikonik ini. Font-font ini terdiri dari berbagai macam icon atau logo termasuk situs terkenal seperti facebook, google atau twitter. Dengan kata lain, jika biasanya saat menambahkan ikon di blog kita menggunakan image, maka sekarang kita bisa memanfaatkan awesome ikon ini. Loadingnya jadi lebih cepet.

Pemasangan Script
Tambahkan script berikut ini di atas </head>
 <link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

Untuk membuat icon Facebook kodenya seperti berikut:

<i class="icon-facebook"></i> 

Ganti yang berwarna merah sesuai kebutuhan. Untuk membuat icon-icon yang lain, bisa dilihat list lengkapnya di: Daftar Lengkap Awesome Icon Untuk Blogspot

Ukuran Ikon
Ukutan ikon juga bisa disesuaikan, menggunakan kode:

<i class="icon-facebook"></i>  <i class="icon-facebook icon-large"></i>  <i class="icon-facebook icon-2x"></i>  <i class="icon-facebook icon-3x"></i>  <i class="icon-facebook icon-4x"></i>

Berurutan semakin ke bawah, semakin besar. Yang berwarna merah adalah kode yang ditambahkan untuk menyatakan ukuran.

Pull Icon/Floating
Untuk membuat ikon mepet ke kiri elemen, atau ke kanan elemen. Gunakan kode:

<i class="icon-facebook icon-4x pull-left"></i>

Yang akan tampil adalah ikon super besar dan mepet ke kiri elemen.

<i class="icon-facebook icon-2x pull-right"></i>

Yang akan tampil adalah ikon berukuran medium dan mepet ke kanan elemen.

Penambahan Garis Tepi / Border
Ikon ini juga bisa diberi garis tepi. Kodenya:

<i class="icon-facebook icon-border"></i>

Cara Memutar Icon
Ikon ini juga bisa diputar 90, 180 atau 270 derajat. Kodenya:

<i class="icon-facebook icon-rotate-90"></i>

<i class="icon-facebook icon-rotate-180"></i>

<i class="icon-facebook icon-rotate-270"></i>  

Flip Horizontal/Vertikal
Fungsi ini membuat ikon terbalik secara horizontal ataupun vertikal. Kodenya:

<i class="icon-facebook icon-flip-horizontal"></i>

<i class="icon-facebook icon-flip-vertical"></i>

Ikon Bergerak Memutar
Ikon juga bisa digerakkan memutar. Kodenya:

<i class="icon-facebook icon-spinr"></i>

Information: Cara Menggunakan Awesome Font - Twitter Bootstrap

Custom Scroll Yang Dapat Dimodifikasi Dengan CSS - Seringkali gadget kita terlalu panjag sehingga menghabiskan area pada blog. Kita bisa mengakalinya dengan menambahkan scroll untuk gadget yang terlalu panjang (baca: Konsultasi Blog Tentang Scroll). Tapi masalah lain muncul karena kita semua tahu, desain scroll default jelek banget. Iya gak sih? Padahal tidak semua browser support modifikasi CSS scroll



Nah, jangan khawatir karena kemarin muter-muter forum Google dapat banyak referensi scroll dengan javascript ataupun jquery yang maknyus dan lancar di semua browser. Tapi dari sekian banyak pilihan, scroll dari Jools yang paling mudah instalasinya.

Tambahkan Script berikut di atas </head>

<script src="http://www.jools.net/javascripts/prototype.js" type="text/javascript"></script>  <script src="http://www.jools.net/javascripts/slider.js" type="text/javascript"></script>  <script src="http://www.jools.net/javascripts/scroller.js" type="text/javascript"></script>

*lebih baik scriptnya di host sendiri, biar lebih cepet, juga untuk jaga-jaga kalau suatu saat link script di atas dihapus Jools, kalau sudah di host sendiri kan aman.
*referensi:
- Host Javascript/CSS di Google Drive
- Membuat Javascript Milik Anda Pribadi

Tambahkan CSS berikut di atas ]]></b:skin>

.scroll-track{   height:10px;   width:10px;   background:black;  }    .scroll-handle{   border: 1px solid black;   height:10px;   width:10px;   background:#5B207B;   cursor:pointer;  }

*scroll-track adalah jalur scrollnya sedangkan scroll-handle adalah tombol dragablenya. Edit sesuai selera.

Pemasangan Gadget
Kemudian untuk gadget yang ingin diberi scroll silahkan gunakan kode berikut ini:

<div style="height:165px; overflow:hidden" class="makeScroll">  Kode HTML Gadget/Tulisan  </div>

Silahkan mencoba ya, semoga bermanfaat blogger...

Referensi:
Jools - Custom Scroll Bar

Item Review: Scroll CSS, Scroll Bisa Dimodifikasi Dengan CSS

Tab Download di Google Code Hilang - Google kembali melakukan perubahan yang cukup merepotkan. Perubahan ini sebenarnya sudah sejak lama, tapi baru sempet posting. Perubahan yang saya maksud adalah hilangnya tab download pada Google Code (baca: Hosting JavaScript di Google Code, Tak Terbatas) yang artinya kita tidak bisa lagi host file per file disana.

Google sendiri merekomendasikan layanannya yang lain yakni Google Drive untuk tempat host javascript, CSS ataupun file-file lain. Google Drive ini terintegrasi dengan banyak sekali layanan baik dari Google sendiri maupun dari pihak ketiga.

Bagaimana Cara Host JavaScript/CSS di Google Drive?
1. Login ke https://drive.google.com dengan akun gmail Anda.
2. Klik tombol Upload kemudian pilih Files

3. Pilih file yang akan diupload
4. Proses upload ada di pojok kanan bawah. Klik Share

5. Muncul kotak dialog. Pada who has access klik Change.

6. Pilih Public On The Web kemudian Save.


Bagaimana Menggunakannya di Blog?

Perhatikan pada step 4, setelah di klik tombol share, pada kotak dialog yang muncul akan muncul sebuah link, misalnya:

https://docs.google.com/file/d/0B69aOIwUyEZmX0JHNGtiTWp1YjQ/edit?usp=sharing

yang berwarna merah adalah kode unik yang akan digunakan. Kode unik dari Google drive selalu terletak seperti berikut ini:

https://docs.google.com/file/d/[letakkodeunik]/edit?usp=sharing


Untuk memasangnya di blog, silahkan gunakan script berikut ini:
<script src='https://googledrive.com/host/kodeunik' type='text/javascript'/>

*kodeunik isikan dengan kode seperti dijelaskan di atas.

Sedikit tambah ribet. Namanya gratisan :D


Artikel Rekomendasi Berjudul: Host Javascript dan CSS di Google Drive