Memasang Buttons dan Image di Bootstrap

Sebelum saya lanjutkan pembahasan ini, saya ingin mengucapkan terima kasih yang sebesar-besarnya kepada sahabat semua yang mau mengikuti bahasan saya tentang Bootstrap; mulai dari membuat template dasar Bootstrap sampai artikel sekarang ini yaitu cara memasang tombol (button) dan gambar (image) di Bootstrap. Semoga kalian tidak bosan dan terus mengikuti pembahasan Bootstrap ini sampai selesai. Besar harapan saya jika kalian juga mau mengikuti artikel-artikel saya yang lain.
Kembali ke pokok pembahasan. Untuk memasang button dan image, anda bisa mempelajari langkah-langkahnya dibawah ini:

Cara Membuat Form di Bootstrap

Pembahasan kali ini mengenai cara membuat form (blangko isian) di Bootstrap. Form biasanya digunakan untuk halaman web yang bersifat dinamis sehingga memungkinkan terjadinya komunikasi antara user dengan web server atau user lain. Form memungkinkan suatu web server untuk menerima informasi dari user melalui sejumlah elemen kontrol. Ok, kita langsung ke TKP aja.

Form standar

Aturan standar untuk membuat form di Bootstrap adalah sebagai berikut:

1. Tambahkan role="form" pada elemen <form> (membantu meningkatkan aksesibilitas untuk orang-orang yang menggunakan screen readers)
2. Bungkus label dan form kontrol dalam elemen <div> dengan class="form-group" (diperlukan untuk mengoptimalkan jarak)
3. Tambahkan class="form-control" pada elemen tekstual seperti <input>, <textarea> dan <select>
Berikut format pembuatan form standar:

Cara Membuat Tabel di Bootstrap

Sekarang kita akan belajar membuat tabel di bootstrap. Sebenarnya caranya hampir sama dengan cara membuat tabel dengan HTML. Perbedaannya hanya pada nama-nama kelasnya.
Untuk lebih jelasnya, kita bisa mengikuti panduan dibawah ini.

Tabel dasar

Pada tabel dasar, bentuknya hanya berupa garis horisontal saja. Untuk membuatnya, kita perlu menambahkan kelas .table pada tag <table>. Berikut penampakannya:

<table class="table">
...
</table>

Hanya begitu saja? nggak, kita masih perlu menambahkan beberapa tag di dalam format dasar tadi, antara lain:

• <tr> = Untuk membuat baris tabel
• <th> = Untuk membuat kepala tabel
• <td> = Untuk membuat data tabel
Formatnya jadi seperti ini:

Mengenal Tipografi di Bootstrap dan Penerapannya

Tipografi (typography) adalah seni dan teknik pemilihan, penataan dan pengaturan huruf pada ruang yang tersedia agar tercipta kesan tertentu, guna kenyamanan membaca semaksimal mungkin.
Mungkin akan ada pertanyaan, seberapa penting kita mempelajari tipografi? Jawabannya, TERGANTUNG. Lho, kok tergantung? ya, kembali pada diri kita masing masing. Jika kita ingin membuat sebuah artikel yang bagus, tertata rapi dan enak dibaca, maka perlu dan harus mempelajari tipografi, begitu juga sebaliknya. Jika kita membuat artikel hanya sekedarnya saja, tanpa memperdulikan ada yang mau baca atau tidak, ya nggak usah dipelajari. paham kan maksud saya..
Kembali ke pokok pembahasan. Dalam Bootstrap, ada beberapa point yang harus kita pelajari dalam menggunakan tipografi. Beberapa point tersebut adalah:

Mengenal Sistem Grid di Bootstrap dan Penerapannya

Setelah kemarin kita belajar cara membuat template dasar menggunakan Bootstrap, sekarang kita belajar mengenal sistem grid pada Bootstrap sekaligus penerapannya. Untuk membuat sebuah template web yang bagus dan rapi, maka kita harus mempelajari sistem grid pada Bootstrap, karena ini merupakan salah satu komponen penting dalam pembuatan template Bootstrap.

Apa itu sistem grid pada Bootstrap?

Sistem grid pada Bootstrap adalah suatu aturan baku yang digunakan untuk pembuatan dan penataan layout halaman dengan menggunakan rangkaian baris dan kolom untuk penempatan konten kita nantinya.

Cara kerja sistem grid pada Bootstrap:

Cara Mudah Belajar Bootstrap Offline Lengkap

Sobat blogger, seperti yang kita ketahui bersama, saat ini sudah jamannya website yang responsive. Ada banyak cara untuk membuat desain web yang responsive. Bagi yang pintar coding hal ini tidak menjadi masalah, tapi bagi yang awam (seperti saya) tentu bisa membuat kepala jadi cenut-cenut :).. Tapi sekarang kita tidak perlu susah-susah untuk membuatnya, karena sekarang kita dimanjakan dengan hadirnya CSS Framework yang dapat digunakan untuk membuat desain web yang responsive. Beberapa contoh CSS Framework itu adalah Bootstrap, Foundation, Gumby, Pure CSS, Skeleton dan masih banyak lagi. Oleh karena itu, kali ini saya akan share cara menggunakan salah satu CSS Framework tersebut, yaitu Bootstrap. Kenapa Bootstrap? jawabannya simple, karena yang saya pelajari baru Bootstrap, yang lain belum :).
Sebelum kita belajar menggunakan Bootstrap, ada baiknya kita lebih dulu mengenal apa, kenapa dan bagaimana Bootstrap itu. Selain itu, kita juga perlu mempelajari beberapa perintah pada Bootstrap sebagai pendukung pembuatan deain web. Baiklah, kita mulai saja belajar Bootstrap secara mudah dan lengkap;

Cara Menampilkan Link Sumber di Blog

Artikel kali ini masih ada hubungannya dengan artikel saya yang kemarin tentang cara mencegah blog kita di copas. Namun kali ini saya ingin share tentang cara menampilkan link sumber pada saat artikel kita di copas. Untuk menggunakan cara yang akan saya share ini, kita perlu minta bantuan pada pihak ketiga, yaitu tynt.com. Sebenarnya kita juga bisa membuatnya tanpa bantuan pihak ketiga, tapi akan kesulitan untuk melacak artikel yang mana yang di copas, berapa kali artikel kita di copas, dan masih banyak lagi. Sedangkan jika kita menggunakan tynt.com, kita bisa mengetahuinya. Berikut adalah beberapa keuntungan jika kita menggunakan tynt.com:

Cara Mencegah Copas Pada Blog

Sekitar 2 hari yang lalu teman saya cerita. Dia jengkel karena artikel di Blognya banyak yang di copy paste (baca: copas). Yang bikin jengkel itu bukan masalah copasnya, tapi karena yang copas tidak mau mencantumkan link sumbernya. Blog saya sendiri juga banyak yang di copas dan mereka tidak mau mencantumkan link sumbernya. Jengkel? Ya, terus terang saya juga jengkel, tapi saya tetap berusaha menyikapinya dengan bijaksana. Semoga bisa jadi amal saya :))
Jika kalian tidak ikhlas artikel kalian di copas, ada cara yang bisa digunakan untuk mencegahnya. Cara ini cukup ampuh untuk mencegah copas pada Blog, tapi tidak bisa melindungi konten Blog anda sepenuhnya. Setidaknya bisa mencegah dari copaser newbie, karena sebenarnya banyak cara untuk bisa meng-copas artikel Blog sekalipun sudah dilindungi dengan script anti copas. Untuk melakukan pencegahan, anda cukup menambahkan script dibawah ini:

Install Wordpress di Localhost Dengan XAMPP

Sekarang kita sudah sampai pada penghujung acara tahapan terakhir (tahap ketiga) dari seluruh rangkaian membuat webserver localhost menggunakan XAMPP. Sampai disini saya anggap kalian sudah berhasil install XAMPP dan membuat database dengan benar. Jika anda tidak mengikuti dari awal, anda bisa membaca artikel saya sebelumnya agar bisa mengikuti tahap demi tahap;

• Tahap 1 : Install XAMPP di komputer
• Tahap 2 : Membuat database di XAMPP dengan phpMyAdmin

Setelah selesai membuat database, kita lanjut untuk install WordPress;

Membuat Database di XAMPP Dengan phpMyAdmin

Sekarang kita masuk tahap kedua, yaitu membuat database di XAMPP. Jika belum menginstall XAMPP, anda bisa baca artikel saya tentang cara install XAMPP di Windows 10 disini. Setelah kita selesai menginstall XAMPP, langkah selanjutnya kita membuat database di XAMPP dengan phpMyAdmin. Database inilah yang akan kita gunakan untuk menyimpan data-data website kita. Baiklah, kita langsung saja..

1. Aktifkan XAMPP dengan mode Run As Administrator. Bisa dari Desktop ataupun Start Menu. Jika pada waktu menginstall XAMPP anda langsung mengaktifkannya, lewati saja langkah ini.