Membuat Navigasi Menu Plus Widget Hari Tanggal Tahun

Baca juga artikel saya sebelumnya mengenai Navigasi Menu dengan tambahan Search Box.
Berikut langkah-langkah Navigasi Menu dan Widget Kalender
Sederhana sekali. Widget ini dikombinasikan dengan kode Java Script yang dimasukkan kedalam kode HTML. Kode anda bisa temukan di googling hehehe. :Dnow = new Date();
if (now.getTimezoneOffset() == 0) (a=now.getTime() + (7*60*60*1000))
else (a=now.getTime());
now.setTime(a);
var tahun=now.getFullYear()
var hari=now.getDay()
var bulan=now.getMonth()
var tanggal=now.getDate()
var hariarray=new Array("Minggu,","Senin,","Selasa,","Rabu,","Kamis,","Jum'at,","Sabtu,")
var bulanarray=new Array("Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember")
document.write(hariarray[hari]+" "+tanggal+" "+bulanarray[bulan]+" "+tahun)
Navigasi Menu ini juga sudah di modifikasi dengan efek Sliding dari kiri kekanan.
Baca juga: Cara Membuat Efek Sliding Underline Menggunakan CSS
Masukkan kode CSS
/* Start Navigasi */
#cssmenu {background: #494949;width: auto;font-family: Arial, sans-serif;}
#cssmenu ul {list-style: none;margin: 0;padding: 0;line-height: 1;display: block;}
#cssmenu ul:after {content: ' ';display: block;font-size: 0;height: 0;clear: both;visibility: hidden;}
#cssmenu ul li {float: left;display: block;padding: 0;}
#cssmenu ul li a {color: #ffffff;text-decoration: none;display: block;padding: 17px 25px;font-weight: 700;font-size: 14px;position: relative;-webkit-transition: color .25s;-moz-transition: color .25s;-ms-transition: color .25s;-o-transition: color .25s;transition: color .25s;}
#cssmenu ul li a:hover {color: #BEBEBE;}
#cssmenu ul li a:hover:before {width: 100%;}
#cssmenu ul li a:after {content: '';display: block;position: absolute;right: -3px;top: 17px;height: 6px;width: 6px;background: #171717;opacity: .5;}
#cssmenu ul li a:before {content: '';display: block;position: absolute;left: 0;bottom: 0;height: 3px;width: 0;background: #E9E9E9;-webkit-transition: width .25s;-moz-transition: width .25s;-ms-transition: width .25s;-o-transition: width .25s;transition: width .25s;}
#cssmenu ul li.last > a:after,#cssmenu ul li:last-child > a:after {display: none;}
#cssmenu ul li.active a {color: #333333;}
#cssmenu ul li.active a:before {width: 100%;}
/* End Navigasi */
Berikut kode HTML
<div id='cssmenu'>
<ul>
<li><a href='index.html'><span>Daftar Isi</span></a></li>
<li><a href='#'><span>About Me</span></a></li>
<li><a href='#'><span>Product</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
<li style='float: right;'><a><i class='icon-calendar'></i>
<script type='text/javascript'>
now = new Date();
if (now.getTimezoneOffset() == 0) (a=now.getTime() + (7*60*60*1000))
else (a=now.getTime());
now.setTime(a);
var tahun=now.getFullYear()
var hari=now.getDay()
var bulan=now.getMonth()
var tanggal=now.getDate()
var hariarray=new Array("Minggu,","Senin,","Selasa,","Rabu,","Kamis,","Jum'at,","Sabtu,")
var bulanarray=new Array("Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember")
document.write(hariarray[hari]+" "+tanggal+" "+bulanarray[bulan]+" "+tahun)
</script></a></li>
</ul>
</div>
Sebagai Demo
Bila anda ingin memodifikasi dengan fontawsome, maka masukkan kode berikut diatas </head>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"rel="stylesheet"/>
Selipkan Icon-icon yang anda inginkan, Lihat pada Icon Font Awsome klik fortawesome.github.io . Sekian Tutorial kali ini, Selamat berkreasi dan otak-atik Blog. Keep Happy Blogging :)
Post A Comment
No comments :
Jangan lupa Komentarnya...