Membuat Breadcrumb Menggunakan Bootstrap

MasPram – Assalamualaikum, semoga pembaca dalam keadaan sehat selalu. Kali ini saya akan membahas mengenai Bootstrap, namun lebih spesifiknya kali ini saya akan membahas bagaimana membuat breadcrumb navigator menggunakan bootstrap. Berikut ini cara membuatnya :

Breadcrumb-bootstrap

  • Tambahkan seperti dibawah ini untuk memanggil file javascript dan css bootstrap
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  • Tambahkan Script dibawah ini dalam tag <body> </body>
<div class="bs-example">
<ul class="breadcrumb">
	<li><a href="#">Home</a></li>
	<li><a href="#">Products</a></li>
	<li class="active">Accessories</li>
</ul>
</div>
  • Tambahkan css dibawah ini di datam tag <head></head>
.bs-example{
margin: 20px;
}
  • Simpan dan jalankan File

 

Download | Demo

Semoga bermanfaat 🙂

Advertisements

Cara menampilkan dan mengatur datepicker bootstrap hanya Bulan dan Tahun saja

Assalamualaikum, Pada postingan sebelumnya telah dibahas tentang menampilkan hanya tahun saja [disini], kali ini saya akan membahas bagaimana cara menampilkan datepicker bootstrap hanya yang ditampilkan tahun dan bulan saja. Yang semulanya datepicker menampilkan tampilan kalender pada umumnya, kali ini hanya tahun dan bulan saja.Monggo diperhatikan, kemudian dipraktekkan.

Tambahkan script dibawah ini pada script code javascript untuk memanggil datepicker bootstrap:

$("#datepicker").datepicker( {
   format: 'MM yyyy',
                viewMode: "months",
                minViewMode: "months",
                autoClose: true
});

month year bootstrap

Untuk lihat hasilnya : Demo

Semoga bermanfaat 🙂

Jika ada masalah hubungi admin melalui : Facebook | WA { +6285273357370 }

 

Cara merubah ukuran text input Bootstrap menggunakan Css3

Assalamualaikum, sesuai judul diatas maka kali ini saya akan membahas bagaimana caranya merubah ukuran text input bootstrap menggunakan css3. Sering kali kita lihat pada tampilan text input, select dan button bootstrap terkadang extra large ataupun besar, membuat tampilan kurang enak dipandang. Nah, terkadang kita menggunakan class input-lg, input-xm juga tidak dapat merubah ukurannya. Tidak perlu khawatir kita akan merubahnya menggunakan bantuan css3.

Berikut ini penjelasannya :

HTML :

<input type="text" class="input-small" />

CSS3:

.input-small {
  width: 210px;
  height: 20px !important;
  margin-bottom: 10px !important;
  line-height: 11px !important;
  font-size: 10px !important;
}

Demo

Jika ada masalah hubungi admin melalui : Facebook | WA { +6285273357370 }

Cara menampilkan dan mengatur datepicker bootstrap hanya Tahun saja dan Posisi.

Sebelum memulainya, masih ada yang bertanya apa itu bootstrap? kalau masih banyak yang belum tahu sebelumnya sudah dibahas disini. Untuk bagaimana penggunannya silahkan kunjungi situs resmi Bootstrap disana lengkap bagaimana menggunakan bootstrap.

Kali ini saya akan membahas bagaimana cara menampilkan datepicker bootstrap hanya yang ditampilkan tahun saja. Yang semulanya datepicker menampilkan tampilan kalender pada umumnya, kali ini hanya tahun saja. Monggo diperhatikan, kemudian dipraktekkan.

Tambahkan script dibawah ini pada script code javascript untuk memanggil datepicker bootstrap:

$("#datepicker").datepicker( {
    format: " yyyy",
    viewMode: "years", 
    minViewMode: "years"
});

Maka hasilnya seperti ini:

year

Misal pada tampilan datepicker muncul diposisi atas, untuk menampilkan datepicker diposisi bawah maka tambahkan script ini dibawah javascript minViewMode diatas :

 orientation: 'auto top'

Dapat digunakan di ASP.NET VB

Demo

Cara Menampilkan Hari & Tanggal di HTML dengan Javascript.

Assalamualaikum, postingan pertama di bulan Mei 2016 kali ini saya akan membahas bagaimana cara menampilkan hari dan tanggal di HTML menggunakan javascript. Berikut ini beberapa pilihan yang dapat anda gunkan atau terapkan di html.

google-calendar-logo

Menampilkan tanggal:

 <script type='text/javascript'>
    <!--
    var months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
    var date = new Date();
    var day = date.getDate();
    var month = date.getMonth();
    var yy = date.getYear();
    var year = (yy < 1000) ? yy + 1900 : yy;
    document.write(day + " " + months[month] + " " + year);
    //-->
    </script>

Hasilnya :

Contoh : 12 Mei 2016

Cara Menampilkan Hari dan Tanggal dengan Javascript :

<script type='text/javascript'>
    <!--
    var months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
    var myDays = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum'at', 'Sabtu'];
    var date = new Date();
    var day = date.getDate();
    var month = date.getMonth();
    var thisDay = date.getDay(),
        thisDay = myDays[thisDay];
    var yy = date.getYear();
    var year = (yy < 1000) ? yy + 1900 : yy;
    document.write(thisDay + ', ' + day + ' ' + months[month] + ' ' + year);
    //-->
    </script>

Hasilnya :

Contoh : Kamis, 12 Mei 2016

Semoga bermanfaat 🙂

Membuat Presentasi Indah menggunakan HTML5 dan Reveal.js

Assalamualaikum, semoga dalam keadaan sehat selalu pengunjung setia blog sandal jepit mas pram. Sebelumnya sudah dibahas apa itu html5 dan mengapa harus menggunakan html5, kali ini saya akan mengkombinasikan html5 dengan reveal.js. Apa itu reveal.js? Reveal.js adalah sebuah library atau pustaka yang menyediakan dan mudah digunakan untuk pembuatan presentasi. Reveal.js ini sudah saya gunakan sewaktu saya seminar hasil dan sidang komprehensif skripsi beberapa waktu kemarin. Bagaimana menggunakan reveal.js? Untuk menggunakan reveal.js cukuplah mudah jika anda sudah mengetahui dasar html5 dan css. Berikut ini untuk lebih jelasnya cara menggunakannya atau membuat presentasi menggunakan reveal.js.

  • Download library Reveal.js disitus resminya | disini
  • Jika sudah anda download, ekstrak file yang anda download tadi.reveal
  • Silahkan buka file index.html menggunakan notepad, notepad++, dreamweaver, visual studio atau media lain yang biasa anda gunakan. Jika anda ingin melihat tampilan default reveal.js maka anda buka file index.html di web browser.
  • Dasar pembuatan presentasi di reveal.jsreveal1
  • Sebelum anda menggunakannya, mari isikan terlebih dahulu informasi mengenai presentasi, yang disimpan di dalamdan, dalam potongan kode berikut:
    reveal2
  • Tentunya isi dari setiap tag atau atribut content di atas harus diubah sesuai dengan kebutuhan. Selesai mengisikan data di atas, kita harus membuat komponen penampung seluruh elemen presentasi. Adapun komponen-komponen yang dimiliki oleh sebuah presentasi reveal.js.
    1. Slide Presentasi. Namanya juga pustaka untuk presentasi, ya pasti ada komponen ini 😀
    2. Navigasi. Komponen utama bagi pengguna untuk bergerak di dalam slide. Seperti yang tampak pada gambar, bisa bergerak ke empat arah utama.
    3. Progress Bar. Menunjukkan seberapa jauh kita telah berjalan dari awal presentasi.
  • Selanjutnya jika ingin menambahkan slide, kita hanya tinggal menambahkan elemen
    lagi di dalam

    , seperti ini:reveal4
  • Nah, untuk pembuatan presentasi sederhana lebih lanjut silahkan edit file index.html yang sudah saya buat [disini]. Anda bisa mengembangkannya sesuai kreatifitas dan kemauan anda.

Download tutorial | PDF : Download

Membuat Backsound Game HTML5 Menggunakan Buzz.Js

maspramproduction

Assalamualikum, semoga dalam keadaan sehat selalu pembaca dan pengunjung setia blog sandal jepit mas pram. Kali ini mas pram akan membahas bagaimana cara membuat backsound pada game html5 menggunakan buzz.js. Mungkin anda bertanya apa itu buzz.js? Buzz.js adalah library javascript yang membantu dengan mudah memasukkan dan mengelola suara pada website  ataupun game dengan menggunakan tag audio yang ada pada HTML5. Dan bagaimanakah cara penggunaannya? Sebelumnya anda harus mempersiapkan bahan, diantaranya:
1.  File sound dalam format .mp3, .ogg, .wav atau format lainnya.
2.  Buzz.js yang dapat anda download di situs resminya.

Selanjutnya jika bahan sudah anda miliki,
1.  Buka file game html5 anda yang akan dibuat backsound. Disini saya membuatnya di microsoft visual

     studio express windows 8.
2.  Extract file buzz yang anda download tadi, pastikan dalam satu folder dengan file sound anda. folder3.  Letakkan script code ini didalam tag…scriptgamesoundCukup mudah bukan, semoga tutorial kali ini bermanfaat.

Artikel diatas dapat anda download dalam format PDF : Download [PDF] | Download [File html]