Posts

Cara membuat flat table responsive di blogger atau blogspot

Image
Table sulit untuk dibuat responsive, tetapi bisa diakali dengan memanfaatkan query media dan overflow. Dengan memanfaatkan query media dan overflow saya akan mencoba menerangkan langkah demi langkah bagaimana cara membuat flat table responsive di blogger atau blogspot . Seperti yang sudah kita tahu table bisa sangat luas. Sederet data row bisa bersama sama untuk masuk ke dalam sebuah table. Table dengan width 100%, bisa dikecilkan dan dibesarkan tetapi ketika layar di kecilkan row table akan terlihat sempit dan mungkin teks akan bertumpuk tumpuk. Inilah sebabnya kenapa table sulit dibuat responsive. Desain responsif adalah tentang bagaimana kita menyesuaikan desain dengan layar yang memiliki ukuran berbeda. Jadi disini ketika website dibuka pada layar yang lebih sempit semisal ponsel makan table akan tetap terlihat lebih lebar dan kita bisa menggeser table ke arah samping. Sehingga layout design responsive tidak rusak dan kita bisa membaca table dengan lebih mudah. Lalu apakah ini bisa...

Cara membuat blogger anda valid HTML5

Image
Sebelum melangkah ke topik utama, mari kita bahas terlebih dahulu apa sih HTML5? HTML5 adalah bahasa markup yang digunakan untuk penataan dan konten di World Wide Web(WWW). Bahasa HTML versi ini diselesaikan, dan diterbitkan, pada 28 Oktober 2014 melalui World Wide Web Consortium (W3C). HTML5 adalah revisi kelima dari standar HTML sejak awal World Wide Web(WWW). Versi sebelumnya, HTML4 adalah standar pada tahun 1997. Jadi HTML5 adalah revisi kelima dari sejak dikeluarkannya HTML. Bahasa ini support untuk browser modern seperti IE8+, mozilla, chrome, dll. IE7 kebawah tidak support untuk HTML. Apa sih keuntungan dari valid HTML5, banyak artikel yang saya baca banyak sekali keuntungan dari valid HTML5, saya sendiri tidak terlalu pusing mementingkan keuntungannya, hanya sekedar keren keranan saja. Buktinya website seperti, google, facebook bahkan tempat belajar CSS, HTML(www.w3schools.com) pun tidak valid HTML5. Tidak hanya itu, framework HTML seperti bootstrap, pure css, materializecss pu...

Cara membuat flat button 3d cantik di blogger atau blogspot

Image
Tutorial kali ini saya akan membahas bagaimana cara membuat flat button 3d cantik di blogger atau blogspot anda, seperti di blog ini. Untuk trik disini kita cukup memanfaatkan efek ketebalan box-shadow ketika button normal, di hover atau ketika button aktif. Logikanya ketika button normal box-shadow akan terlihat tebal, ketika pengunjung menghover button maka box-shadow di button akan terlihat lebih tipis dan ketika button aktif maka box-shadow akan hilang. Dengan memanfaat warna metro dan tampilan yang flat button akan semakin cantik dan membuat blog kita akan terlihat sedikit cantik dan profesional. Langsung berikut adalah langkah langkah nya: 1. Silahkan backup terlebih dahulu template bawaan anda, berikut adalah tutorial cara backup template blogger: Cara mudah backup template blogger atau blogspot 2. Selanjut anda edit template blogger anda, jika anda tidak tahu cara edit template blogger berikut adalah cara edit template blogger: Cara edit template blogger atau blogspot 3. Setel...

Daftar 20 Ikon baru di fontawesome 4.5

Image
Update terbaru ikon di fontawesome versi 4.5 Berikut adalah daftar 20 Ikon baru di fontawesome 4.5 Icon Fungsi Class fa fa-bluetooth fa fa-bluetooth-b fa fa-codiepie fa fa-credit-card-alt fa fa-edge fa fa-fort-awesome fa fa-hashtag fa fa-mixcloud fa fa-modx fa fa-pause-circle fa fa-pause-circle-o fa fa-percent fa fa-product-hunt fa fa-reddit-alien fa fa-scribd fa fa-shopping-bag fa fa-shopping-basket fa fa-stop-circle fa fa-stop-circle-o fa fa-usb Semoga bermanfaat sob..

Daftar icon atau ikon kategori lainnya fontawesome

Image
Beberapa daftar fontawesome telah saya buatkan di postingan sebelumnya, berikut adalah daftar fontawesome untuk kategori lainnya. Sebelumnya bagi yang belum tahu cara untuk memasukkan fontawesome di blogger anda silahkan lihat tutorial fontawesome untuk blogger atau blogspot . Berikut adalah daftar file type icons fontawesome Icon Fungsi Class fa fa-file fa fa-file-archive-o fa fa-file-audio-o fa fa-file-code-o fa fa-file-excel-o fa fa-file-image-o fa fa-file-movie-o fa fa-file-o fa fa-file-pdf-o fa fa-file-photo-o fa fa-file-picture-o fa fa-file-powerpoint-o fa fa-file-text fa fa-file-text-o fa fa-file-video-o fa fa-file-word-o fa fa-file-zip-o Berikut adalah daftar form icons fontawesome Icon Fungsi Class fa fa-check-square fa fa-check-square-o fa fa-circle fa...

Daftar spinner icons fontawesome

Image
Spinner icons biasanya digunakan web designer atau programer untuk animasi ketika akan meload suatu proses, ketika proses sedang berjalan maka akan ada animasi bisa berupa text maupun berupa animasi ikon yang berputar putar. Fontawesome memiliki beberapa ikon spinner, berikut adalah daftar spinner icons fontawesome: Icon Fungsi Class fa fa-circle-o-notch fa fa-cog fa fa-gear fa fa-refresh fa fa-spinner Semoga bermanfaat sob.

Daftar ikon web aplikasi atau web application icons fontawesome

Image
Sebelumnya saya tulis daftar ikon fontawesome untuk beberapa kategori ikon fontawesome seperti: Daftar ikon arah atau directional icons fontawesome Daftar ikon mata uang atau currency icons fontawesome Daftar Chart Icon Fontawesome Daftar brand icon fontawesome Berikut adalah daftar ikon web aplikasi atau web application icons fontawesome: Icon Fungsi Class fa fa-adjust fa fa-anchor fa fa-archive fa fa-area-chart fa fa-arrows fa fa-arrows-h fa fa-arrows-v fa fa-asterisk fa fa-at fa fa-automobile fa fa-balance-scale fa fa-ban fa fa-bank fa fa-bar-chart fa fa-bar-chart-o fa fa-barcode fa fa-bars fa fa-battery-0 fa fa-battery-1 fa fa-battery-2 fa fa-battery-3 fa fa-battery-4 fa fa-battery-empty fa fa-battery-full fa fa-battery-half ...