Pos

Menampilkan postingan dari Desember, 2014

Perbedaan JavaScript dan jQuery Beserta Contoh

Gambar
Artikel-artikel dalam blog ini sering menampilkan baris-baris code dalam kategori JavaScript dan jQuery. Apa sih JavaScript dan jQuery itu? Berikut ini saya akan berbagi tentang apa Perbedaan JavaScript dan jQuery tersebut.

Nama JavaScript agak menyesatkan karena mirip dengan platform untuk software Java milik Oracle. Padahal tidak berhubungan sama sekali, dan juga JavaScript bukan scripting language*. 

Secara umum JavaScript dipergunakan untuk memanipulasi “Document Object Model” (DOM), yang meliputi elemen-elemen pada sebuah laman web. Jadi, sebuah bahasa pemrograman yang dirancang untuk penggunaan pada browser (peramban) web.

JavaScript dieksekusi pada client side (sisi pengguna = komputer pengguna): Sebuah server website mengirim JavaScript ke peramban milik pengguna, dan peramban tersebut menginterpretasikan dan menjalankan kodenya. Semua ini terjadi dalam sebuah sandbox, yang menjaga agar JavaScript tidak menyentuh internal sistem dan mencegah malicious code (kode jahat) meng…

Manisnya Font Roboto - Cara Pasang dan Penggunaan

Gambar
Baru-baru ini saya mengganti font jelasinblog dengan font tipe Roboto. Ini adalah font yang digunakan oleh Google pada OS Android dan juga di situs Google Play Store. Font ini mirip dengan Arial tetapi lebih mirip lagi dengan Helvetica sehingga ada yang mengatakan Roboto adalah Helvetica versi Google. Bahkan sebagian mereka mengatakan Google mungkin akan menghadapi tuntutan pengadilan karena hal ini.

Terlepas dari itu semua, bagi saya Roboto adalah Helvetica yang disempurnakan.

Bagi Anda yang tertarik silahkan ikuti tutorial cara memasang font Roboto di blog. Tanpa buang-buang waktu mari kita mulai!

Cara Memasang font Roboto
Mula-mula letakkan URL font Roboto dalam tag <head>, mudahnya letakkan saja tepat di atas tag </head>. Copy-paste URL lengkapnya sebagai berikut.

<style type="text/css">@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 100; src: local('Roboto Thin'), local('Roboto-Thin'), url(//fonts.g…

CSS Text-overflow: Ellipsis, Clip, String [Tiga titik di Akhir Teks]

Gambar
Deklarasi text-overflow memungkinkan Anda untuk berkompromi dengan teks terpotong: yaitu, teks yang tidak sesuai dengan kotaknya. Tidak sesuai dengan kotaknya (div) berarti bahwa teks lebih panjang atau lebih lebar dari kotaknya.

Ada dua keadaan yang terjadi pada teks semacam ini.
Pertama, teks akan berpindah secara otomatis ke baris berikutnya setelah mencapai batas tepi kotak.

Contoh, saya menulis teks dalam sebuah kotak selebar 200px, hasilnya seperti di bawah ini:

Teks ini lebih panjang dari pada lebar kotak. Lebar kotak telah ditetapkan 200px.

Kedua, teks akan terus mengalir melewati batas tepi kotak.

Contoh:

Teks ini lebih panjang dari pada kotaknya. Teks yang melewati batas ini terlihat sangat tak elok, bukan?

Mengatasi ini tidaklah sulit. Kita hanya perlu menerapkan properti text-overflow. Setelah text-overflow diterapkan hasilnya akan nampak seperti di bawah ini.

Teks ini lebih panjang dari pada kotaknya. Teks yang melewati batas akan terpotong dan tak terlihat karena menggun…

Posting Layout Tiga Kolom dengan CSS Float

Gambar
Hanya dengan CSS Float, kita bisa membuat artikel dengan layout tiga kolom. Jadi susunan artikel atau posting blog (elemen) yang tadinya tersusun dari atas ke bawah kini bisa dibuat menyamping. Sebelumnya sudah ada artikel yang saya buat serupa ini, silahkan kunjungi:Halaman Blogger Seperti Majalah atau Koran.
Kita mulai dengan menerapkan elemen-elemen <div> seperti ini:

Sebelum CSS Float

<div id='kolom-3'> <div class='kolom'> Konten di sini... </div> <div class='kolom'> Konten di sini... </div> <div class='kolom'> Konten di sini... </div> <div style='clear:both;'></div> </div>
Kemudian kita terapkan kode CSS dengan menyesuaikan atribut kelas dan ID pada elemen yang kita buat:
#kolom-3 { width:100%; margin:15px 0 15px; } .kolom { width:30%; margin:0% 1.6666667%; float:left; display:inline; word-wrap:break-word; /…