Senin, 26 Agustus 2013

Pengaturan Margin dan Padding di Bootstrap - THEMASDOYOK.COM

Pengaturan Margin dan Padding di Bootstrap - THEMASDOYOK.COM

Pengaturan Margin dan Padding di Bootstrap

Posted: 25 Aug 2013 05:06 PM PDT

Pengaturan Margin dan Padding di Bootstrap - Bootstrap v3 telah dikembangkan. Versi ini memungkinkan responsibility di berbagai device seperti mobile, tablet dan desktop tanpa pengaturan css manual. Sistem grid yang fleksibel memungkinkan kita mengatur lebar kolom yang akan menyesuaikan device tanpa penambahan rumus kondisional secara manual di blog.

Saya mencoba membuat template full bootstrap, paling tidak dari segi CSS, sama sekali tidak ada CSS yang ditulis manual di blog, dan ternyata cukup membuat puyeng. Contoh project: http://project-bootstrap.blogspot.com/. Mungkin akan terjadi error atau apa, karena masih saya utak atik terus menerus sambil belajar. Template tersebut juga sudah lolos validasi HTML5.

Sementara ini, lebih banyak kesulitan yang didapatkan ketimbang kelebihan yang saya rasakan ketika mencoba mengembangkan template berbasis bootstrap. Kode memang menjadi lebih ringkas dan tentu saja loading cepat, tapi belum keseluruhan class CSS bootstrap bisa mewakili kebutuhan desainer.

Misalkan saja untuk masalah padding dan margin kita akan dibuat sangat ribet. Di web resmi bootstrap (getbootstrap.com), diajarkan tentang pergeseran widget ke kanan (bisa mewakili margin-left) menggunakan sistem offseting column, tapi untuk kebalikannya juga belum ada class standard yang bisa kita gunakan.


Jadi, untuk menentukan margin dan padding kita harus memberikan tambahan kode CSS internal, seperti contoh: 

.selector {
margin: 0px;
padding: 0px;
}  

Info Tentang: Pengaturan margin, padding dan color di Bootstrap

Membuat Bootstrap di Blogger - Blogspot

Posted: 25 Aug 2013 06:21 PM PDT

Instal Bootstrap di Blogger Blog - Banyak pengguna blogger yang bingung soal bootstrap. Mungkin banyak yang mempunyai keinginan untuk aplikasikan bootstrap di blog blogspot mereka, tapi bingung step-step nya. Ya, sambil belajar bareng mari kita coba buat bootstrap di blogger.

(Sebaiknya dibaca: Bootstrap belum tepat untuk blogspot). Tapi untuk belajar boleh juga lah, biar tidak ketinggalan jaman.

Langkah-langkahnya:
1. Download File Bootstrap
2. Upload di Google Drive
3. Pemasangan di Blogspot

Download File Bootstrap
Untuk versi terbarunya bisa di download di https://github.com/
File nya terus di update, jadi nanti kita bisa ikuti perkembangannya.
- Download file tersebut, hasil download berupa zip file
- Extract file ke folder yang Anda tentukan. File zip tersebut terdiri dari file xss, images dan js


Upload di Google Drive
- Sementara 2 file aja dulu yang di upload di Google Drive. Baca Tutorial: Host JavaScript di Google Drive.
- File yang diupload adalah file bootstrap.min.css dan bootstrap.min.js

Pemasangan di Blogspot
Nah, ini langkah terpenting.
- Login Blogger
- Klik Template
- Klik Edit HTML
- Masukkan script bootstrap yang sudah diupload di atas </head>

Nah, setelah script ditambahkan Anda mulai bisa menggunakan class-class bootstrap.

Kalau Mau Mudah,
Kalau bingung cara upload file dan pasangnya, cukup tambahkan kode berikut ini di atas </head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script src='http://html5shim.googlecode.com/svn/trunk/html5.js' type='text/javascript'/>
<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"/>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"/>


Jika, sudah silahkan Simpan Template Anda. Sekarang Anda mulai bisa menambahkan berbagai component dengan mudah. Untuk penambahan elemen silahkan lihat di: Componen . Btotstrap

 Sekarang sudah update versi 3: http://getbootstrap.com/

Item Info: Membuat Bootstrap di Blogger - Blogspot
posted from di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)