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 🙂

Membuat Efek Accordion/Collapse Dengan Bootstrap

Assalamualaikum, semoga dalam keadaan sehat selalu pembaca. Kali ini saya akan membahas  bagaimana caranya membuat efek atau konten collapse menggunakan bootstrap.

Tampilan standar jika di klik tombol View Details maka akan muncul konten yang akan dimunculkan.

collapse1collapse2

Bagaimana membuatnya? Anda dapat copy paste source code dibawah ini :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu Collapse</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class=container>
<div class="row">
<div class="collapse-group">
<h2>Heading</h2>
<h2 class="collapse" id="viewdetails">Duniagama.wordpress.com</h2>
<a class="btn btn-info" data-toggle="collapse" data-target="#viewdetails">View details &raquo;</a></div>
</div>
</div>
</body>
</html>

Download : [Mediafire] [Dropbox]

Demo

Semoga bermanfaat

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

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 Format Bahasa Bootstrap Datepicker

datepicker-indonesia

Assalamualaikum, semoga dalam keadaan sehat selalu. Kali ini saya akan membahas bagaimana caranya merubah tampilan bootstrap datepicker mengikuti lokasi atau negara yang diingingkan. Seperti contoh, kita menggunakan bootstrap datepicker dan ingin merubahnya menggunakan format bahasa indonesia, secara default bootstrap datepicker menggunakan format bahasa inggris. Cukup mudah untuk merubahnya anda cukup mengikuti langkah-langkah dibawah ini :

  • Cari format bahasa yang kita inginkan di CDNJS.com
  • Setelah memilih bahasa yang diinginkan copy script yang ada di cdnjs.com tadi.
  • Masukkan link script yang telah di copy tadi kedalam stuktur HTML tepat berada didalam “<Head>disini </Head>”
https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/id.js
  • Lalu buat form untuk memunculkan bootstrap datepickernya.
<div class="container">
<h3>Bahasa Indonesia</h3>
<div class="form-group col-md-3">
<div class='input-group date datepicker' >
<input type='text' class="form-control placementT" id="fecha">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar">
</span>
</span>
</div>
</div>
</div>
                                                                        

</div>

  • Kemudian sisipkan script code javascript dibawah ini didalam “<Head>disini</Head> seperti dibawah ini.
 
        $(document).ready(function () {
            $('.input-group.date').datetimepicker({
                locale: 'id',
            });
        });
    

Keterangan :

  • Pada script javascript, locale: ‘id’ anda dapat merubah id menjadi de (bahasa jerman) dll.
  • Pastikan anda sudah memasukkan atau memanggil link/file bootstrap.min.css,  jquery.min.js, bootstrap-datetimepicker.min.css, moment.js, dan bootstrap-datetimepicker.min.js didalam head.
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/locale/id.js"></script>

Demo | Download [Dropbox] | Download [Mediafire]

Semoga bermanfaat dan terimakasih atas kunjungannya 🙂

 

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 🙂