Membuat Navs dan Navbar Dengan Bootstrap

Sekarang kita belajar 2 hal sekaligus, yaitu Navs dan Navbar. Tanpa basi-basi, langsung saja kita ke pokok pembahasan..

Navs

• Tabs

  Contoh penggunaan:

  <ul class="nav nav-tabs">
    <li role="presentation" class="active"><a href="#">Home</a></li>
    <li role="presentation"><a href="#">Profile</a></li>
    <li role="presentation"><a href="#">Messages</a></li>
  </ul>

  Hasilnya:
  

  Home Profile Messages

  

• Pills

  Contoh penggunaan:

Mengenal Input Groups Pada Bootstrap

Langsung saja ke pokok pembahasan. Kali ini kita belajar untuk mengenal input groups pada bootstrap. Input groups ini bisa dijadikan dasar untuk membuat sebuah form pada bootstrap (tentu saja digabung dengan komponen yang lain). Kita belajarnya pelan-pelan saja ya, biar lebih mudah memahami.. :)

Dasar

Contoh:

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<br/>
<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<br/>
<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>
<br/>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

Hasil:

Mempelajari Button Groups di Bootstrap

Kemarin kita sudah belajar membuat menu dropdown di bootstrap. Seperti janji saya, sekarang kita akan mempelajari Button Groups di Bootstrap.

Dasar

Bungkus kumpulan button dengan .btn di dalam .btn-group
Contoh penerapannya:

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Kiri</button>
  <button type="button" class="btn btn-default">Tengah</button>
  <button type="button" class="btn btn-default">Kanan</button>
</div>

Hasilnya seperti ini:

Warna

Untuk memberi warna pada button, kita perlu menambahkan elemen pada kelas .btn
Adapun elemen tersebut adalah:

Membuat Menu Dropdown di Bootstrap

Setelah 9 bulan vakum dari blog, saya ingin melanjutkan lagi pembahasan mengenai bootstrap yang sempat tertunda. Sebelumnya saya minta maaf karena terlalu lama vakumnya. Oke kita lanjut...

Dropdowns

Untuk membuat menu dropdown, kita perlu membungkus pemicunya (trigger) dan menu dropdown dengan .dropdown
Contoh penerapannya:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Sub Menu 1</a></li>
    <li><a href="#">Sub Menu 2</a></li>
    <li><a href="#">Sub Menu 3</a></li>
  </ul>
</div>

Hasilnya:

Cara Mengatasi Bluescreen pada Komputer dan Laptop

Greget itu saat kita lagi asik-asiknya ngeGame, atau lagi serius ngerjain tugas kuliah ataupun kantor, tiba-tiba layar komputer/laptop menjadi biru (bluescreen).... Marah, jengkel, bingung, emosi ca,pur aduk jadi satu. Bluescreen atau panjangnya BlueScreen of Death (BSOD) memang menjadi momok tersendiri bagi pengguna komputer maupun laptop (termasuk notebook, netbook dan sejenisnya). Untuk itu kali ini saya akan coba memberikan beberapa tips cara mengatasinya. Untuk mengatasi bluescreen, kita perlu melihat kode permaslahan yang ditampilkan, karena beda kode beda juga cara mengatasinya.
Berikut ini beberapa kode yang biasanya ditampilkan oleh bluescreen:

DATA_BUS_ERROR

Pesan error ini berarti slot pada motherboard rusak atau berdebu, biasanya slot yang bermasalah adalah pada slot memori. Untuk mengatasinya Anda bersihkan slot-slot yang ada pada mobo terutama slot memori.

Mempercantik Blog Dengan Glyphicons Bootstrap

Ada banyak cara untuk mempercantik Blog kita. Salah satunya dengan memasang icon di Blog kita. Kenapa harus dengan Glyphicons, pakai icon yang biasanya kan bisa? pakai image juga bisa kan? YA.. memang bisa. Tapi yang menarik dari Glypicons adalah Glyphicons ini berbasis text jadi lebih ringan dan bisa dirubah warna dan ukurannya seperti huruf pada umumnya.

Saat ini Glyphicons tidak bisa digunakan di Blogspot, karena kita tidak bisa mengupload file pendukungnya agar bisa terintegrasi dengan blogspot.

Perlu kita ketahui, saat ini Glyphicons tersedia dalam 3 set, yaitu Halflings, Social dan Filetypes. Hanya saja yang bisa kita gunakan secara gratis hanya yang Halfling set. Termasuk lebih dari 250 glyphs dalam format font dari Glyphicon Halfling set. Anda bisa melihat-lihat macam-macam icon dan kodenya di sini atau di situs resminya Glyphicons disini

Gerhana Kali Ini Mirip Gerhana Pada Zaman Rasulullah

Tidak dipungkiri lagi, bahwasannya saat ini momen yang paling dinantikan seluruh orang adalah Gerhana Matahari Total (GMT) yang akan terjadi besok pada hari Rabu, 09 Maret 2016. Sayangnya Gerhana Matahari Total hanya bisa dilihat di sebagian wilayah di Indonesia. Wilyah-wilayah tersebut antara lain:

• Palembang
• Belitung
• Sampit
• Palangkaraya
• Balikpapan
• Palu
• Poso
• Luwuk
• Ternate
• Halmahera

Spesifikasi dan Harga Vivo Xplay5 Elite

WOOWW!!. Itulah kata-kata yang pertama saya ucapkan ketika mendengar ada smartphone keluaran terbaru dengan RAM 6GB. Apaaa... 6GB? yang bener aja; sumpe loo.. Nggak usah kaget, nggak usah lebay.. tapi emang seperti itu kenyataannya.
Ya, perusahaan asal Tiongkok tersebut akhirnya secara resmi memperkenalkan smartphone Vivo Xplay5 Elite di Beijing. Dan ini menjadikan Vivo Xplay 5 Elite sebagai smartphone pertama di dunia yang memakai RAM 6GB. Smartphone ini rencananya akan rilis tanggal 8 Maret 2016 di Beijing, China.
Berikut ini spesifikasi Vivo Xplay5 Elite yang saya lansir dari GSMArena.com:

Kelas Pendukung CSS di Bootstrap

Selain dari kelas-kelas yang sudah kita pelajari pada artikel saya sebelumnya, CSS pada Bootstrap juga menyediakan kelas-kelas pendukung untuk memudahkan kita dalam membuat rancangan situs yang bagus. Oleh karena itu, kali ini kita akan bersama-sama mempelajari kelas-kelas pendukung tersebut.

Contextual Colors

Digunakan untuk merubah warna pada suatu kata atau kalimat.
Format penggunaannya:


<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

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.

Membuat Web Server Localhost Dengan XAMPP

XAMPP adalah sebuah aplikasi yang dapat digunakan untuk membuat web server localhost (web server yang berdiri sendiri). Selain WordPress, XAMPP juga support dengan banyak aplikasi CMS dan e-Commerce, antara lain: WordPress, Joomla!, Drupal, PrestaShop, Moodle, Magento, OrangeHRM, OpenCart dan masih banyak lagi. Mungkin ada pertanyaan seperti ini "Saya sudah punya hosting sendiri, apa kita masih harus install XAMPP di komputer kita?". TIDAK HARUS. Anda bisa membangun website, theme maupun membuat postingan langsung dari hosting. "Lalu, apa untungnya kita install XAMPP?". Dengan XAMPP, kita bisa membangun sebuah website, theme maupun postingan di komputer kita SECARA OFFLINE, sehingga kita bisa memperbaiki kesalahan-kesalahan pada website, theme maupun postingan sebelum di upload ke hosting. "Cara installnya bagaimana". Lha iya ini yang mau saya share disini... Kita akan membuat web server localhost dengan XAMPP di Windows 10. Untuk membuat web server localhost dengan XAMPP, ada beberapa tahapan yng harus kita lakukan;

Mengatasi Apache TIdak Jalan di Windows 10

Apache yang tidak bisa start, biasanya karena port yang akan digunakan (80 dan 443) sudah dipakai aplikasi lain. Akibatnya terjadi bentrok (conflict). Sebenarnya ada beberapa macam cara untuk mengatasi apache yang tidak bisa berjalan. Salah satunya adalah dengan cara yang akan saya share disini.
Ikuti saja langkah-langkahnya;

1. Aktifkan XAMPP dengan mode Run As Administrator
   
   

Cara Mengubah Default Port pada Skype

Secara default, Skype menggunakan port 80 dan 443. Jika kita ingin menggunakan web server semacam Apache, XAMPP, IIS dll, port tersebut akan bentrok. Karena biasanya web server juga menggunakan port tersebut. Untuk itu, agar tidak terjadi bentrok, kita bisa mengubah default port pada Skype. Caranya cukup mudah kok, kalian tinggal ikuti saja cara dibawah ini:

1. Buka aplikasi Skype
2. Pada menu Tools, klik [Connection Options...]
   
   

Pengalamatan IP

Alamat IP (Internet Protocol) atau IP Address adalah alamat yang diberikan pada jaringan komputer maupun peralatan jaringan yang menggunakan protokol TCP/IP (Transmission Control Protocol/Internet Protocol). TCP/IP adalah sekolompok protokol yang mengatur komunikasi data komputer/perangkat di internet, sehingga perangkat-perangkat tersebut dapat saling berkomunikasi. Alamat IP terdiri dari 2 bagian, yaitu:

1. Network ID
   Menentukan alamat dari suatu peralatan di dalam jaringan
2. Host ID
   menentukan alamat dari peralatan jaringan itu sendiri

Berdasarkan perkembangannya IP Address dibagi menjadi dua jenis:

Teknik Pengkabelan Jaringan Komputer

Kali ini saya ingin berbagi tentang teknik pengkabelan pada jaringan komputer lokal (LAN) dengan menggunakan kabel twisted pair berjenis UTP. Kabel UTP terdiri dari 8 kabel tembaga dengan warna yang berbeda-beda. Berikut ini adalah susunan standar pin pada kabel UTP.

Pin	Warna
1	Oranye-putih
2	Oranye
3	Hijau-putih
4	Biru
5	Biru-putih
6	Hijau
7	Coklat putih
8	Coklat

Masuk ke Windows 10 tanpa login

User Login pada Windows sebenarnya ada manfaatnya, salah satunya supaya komputer/ laptop kita tidak di gunakan oleh sembarang orang. Pada Windows 10, User Login yang kita gunakan untuk masuk Windows akan langsung terhubung dengan akun Live kita, yang mana akun tersebut bisa kita gunakan untuk masuk ke Windows App Store.
Tapi, jika komputer/ laptop tersebut hanya digunakan sendiri dan ataupun keluarga, kadang user login pada windows malah jadi sedikit "mengganggu". Untuk itu disini saya akan berbagi trik supaya pada saat masuk Windows, kita tidak perlu login terlebih dulu. Istilahnya kita membypass. Berikut cara yang digunakan;

1. Tekan tombol Windows (Kalau di Windows 8, kombinasi dari tombol Windows dan R ), lalu ketik netplwiz