Mad Trik - Sampai lah kita pada bagian ketiga dalam edisi "Membuat template sendiri dengan Bootstrap". Dibagian ini mungkin sedikit yang akan kita bahas. Karena bagian ini saya hanya menjelaskan tentang memasang CDN Bootstrap saja.
Jika kamu mau membuat template dengan menggunakan framework dari luar, maka CDN-nya wajib kamu pasang.
Dan setelah
kerangka template yang kemarin jadi, sekarang yang akan kamu lakukan adalah memasang CDN yang sudah diberikan oleh pihak Bootstrap.
Jika kamu melihat di halaman
persiapan Bootstrap, disana ada 2 buah CDN yang wajib kamu pasang.
Cuman 2, bukannya ada 3 ?. Ya, sebenarnya ada 3 CDN disana, tapi khusus untuk
bootstrap-theme.min.css, itu tidak wajib juga ada di blog kamu. Karena isinya hanya berupa style untuk tombol dan elemen-elemen lain yang ada di template kamu nanti.
Halaman resminya saja tidak memakai ini, masa kita harus memakainya ?. Tapi itu sih terserah kamu ya, mau dipakai atau tidak, selera tiap individu itu kan berbeda-beda.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"/>
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type='text/javascript'/>
Pastikan kamu memilih CDN yang bertuliskan bootstrap-theme.min.css dan jangan yang bootstrap-theme.css. Alasan kenapa kamu jangan memasang CDN yang seperti itu simpel saja, kecepatan muat blog kamu akan bertambah lambat, jika memasang CDN yang belum di minified oleh Bootstrap.
Dan bukan cuman Bootstrap saja, ini juga berlaku ke rangka-rangka lainnya selain Bootstrap.
Untuk pemasangannya sendiri dipisah ya. Misalnya untuk javascript Bootstrap, kamu harus memasangnya diatas kode
</body> didalam template kamu. Tujuannya agar javascript dari Bootstrap ini tidak membebani kecepatan muat blog kamu.
Untuk sekedar contoh:
Untuk CSS Bootstrap:
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"/>
Untuk Javascriptnya:
<!-- Latest compiled and minified JavaScript -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type='text/javascript'/>
</body>
Pada kode diatas saya juga menyertakan Jquery dari Google. Tapi jika didalam template kamu sudah terdapat script Jquery ini hapus saja kode ini.
Untuk dua CDN lainnya, silahkan dipasan diatas
</head> atau dibawah
<head> bersama dengan
meta tag yang ada didalam template kamu.
Saya sendiri tidak memasang
bootstrap-theme.min.css, karena desainnya sendiri yang tidak mengikuti tren masa kini, apalagi kalau bukan
tren Flat atau Metro. Toh, halaman resminya sendiri tidak menggunakan ini.
Nah, bagaimana sudah mengerti bukan cara memasang dan dimana pemenempatan CDN yang tepatnya ?. Kalau ada pertanyaan silahkan berkomentar dibawah ya. Dan jangan lupa tunggu edisi lainnya membuat template blogger dengan rangka Bootstrap ini beberapa hari lagi.
ADS HERE !!!