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

Membuat/Menampilkan Tahun Update Otomatis Menggunakan Javascript

Assalamualaikum, kali ini saya akan membahas bagaimana membuat atau menampilkan tahun update otomatis tanpa kita harus merubah-merubahnya menggunakan Javascript. Sebagai contoh biasa digunakan pada bagian bawah atau Footer.

footer

Penggunaanya cukup copy dan paste script dibawah ini :

<p style="font-family:'Century Gothic';">Copyright © 
new Date().getFullYear()> 2010 && document.write(new Date().getFullYear());
. All rights reserved 
Mas Pram</p>

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 🙂