Membuat Navigasi Menu Plus Widget Hari Tanggal Tahun

Kali ini saya akan membahas tutorial cara membuat menu navigaton plus widget hari, tanggal dan tahun. Widget Navigasi ini saya terapkan pada Demo pada Template Pertama saya. Jika anda ingin mendownload, kunjungi Theme Blog Perdana buatanku

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. :D

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) 

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

• Daftar Isi
• About Me
• Product
• Contact

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 :)

Newer Post Older Post