#3 Memasang CDN Bootstrap

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.

Bagi kamu yang belum tahu apa itu CDN.

CDN adalah Content Delivery Network atau Content Distribution Network. Wikipedia

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.

4 comments

  1. waduh masalah template newbie bang nggak tahu utak atik asal ngeblog saja

    ReplyDelete
    Replies
    1. Silahkan dicoba aja dulu pelan-pelan :)

      Terus jangan lupa juga baca bagian artikel ini bertahap dari bagian pertama :D Saya juga newbie kok :)

      Delete
  2. ternyata cara pemasangan cdn bootstrap juga banyak ya mas...saya juga baca panduan pasang cdn boostrap sebelumnya. saya pelajari dulu ya mas...semoga aja berhasil. terima kasih atas tutorialnya. salam sahabat blogger.

    ReplyDelete
    Replies
    1. Gak banyak kok mbah, cuman 3 script aja :D

      Delete

Perlu diingat saya juga manusia, yang kadang punya salah, jika ada kesalahan pada artikel yang dibuat kamu bisa membantu saya untuk memperbaiki artikel tersebut. Dan kadang saya juga tidak bisa manjawab pertanyaan kamu.