Membuat TaskBar Navigation Menu

Pada postingan kali ini monosbit memberikan tutorial sederhana membuat navigation bar berbentuk taskbar horizontal yang stylish seperti taskbar pada contoh yang ada di bawah pada blog ini. Tampilan taskbar navigation menggunakan kombinasi transparansi dan gradien color sehingga memberikan tampilan efek kaca seperti taskbar di Win7. Taskbar navigation ini dapat menjadi daya tarik tersendiri bagi pengunjung blogger, selain merapikan menu-menu utama pada halaman blog, taskbar ini dapat digunakan untuk memberikan kemudahan me-navigasikan blog sobat....gimana keren-kan ??? Oke jika tertarik silakan simak tutorialnya...

1. Login ke blog sobat dan jangan lupa untuk mem-backup template blog sobat terlebih dahulu.
2. Klik Dashboard > Design > Edit HTML.
3. Cari kode </Head> pada template blog sobat (tekan CTRL + F pada keyboard anda untuk menampilkan kotak pencarian di browser untuk mempercepat pencarian).
4. Copy kode berikut ini tepat diatas kode </BODY> pada kode template blog sobat atau bisa juga ditaruh sebagai widget di kotak postingan gadget blog.
   <script>function startTime() { var today = new Date(); var h = today.getHours(); var m = today.getMinutes(); var s = today.getSeconds(); m = checkTime(m); s = checkTime(s); document.getElementById('time').innerHTML = h + ":" + m + ":" + s; var t = setTimeout(startTime, 500); } function checkTime(i) { if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10 return i; } startTime(); </script><style>#taskbar { position:fixed; bottom:0; left:0; z-index:+999999999; width:100%; height: 34px; clear: both; font-family:arial; text-decoration: none; color: white; background: #; font-weight:bold; font-size:13px; overflow:hidden; -moz-border-radius-topright: 8px;-webkit-border-top-right-radius: 8px;border-top-right-radius:8px; -moz-border-radius-topleft: 8px;-webkit-border-top-left-radius: 8px;border-top-left-radius:8px; box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff; background-color:#619bb9; background: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75)); background: -webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc)); } #taskbar a { text-decoration:none; color:white; } #taskbar div a img {vertical-align:middle;} </style><div id="taskbar"><div id="taskbarapps" style="margin: 4px 0 0 8px;"><a href="#" title="Back to top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvQDniv8FaOP95npLTeUIBWn-iepar_24Kb4BZKxAlU7AHySEPwBD5sf5u39AHQnceDNpz-jSSWZf-bGVpVYRrbQKb_het7-B0wmsJo5oehS8TSwX5hq64OGtkVdmR7eWCK1FeIV0HcwY/s800/backtotop.png" /></a><a href="http://www.youtube.com" target="blank" title="Play Music"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEha4t6X6C4vO7rR6xjBCjMGg7VB6B53lJjHRDhyphenhyphenGhYrBGDb35tBqVW_qCyF3rq1SW1hJ5ut9FO2KMJN1DtjQvgu7_eFvrXxKXCk9Sij8QKSDVp3utw6_XEbsy6IYpLYgIDR4uFc-x0X5wk/s800/Winamp-1.png" /></a><a href="http://www.twitter.com" target="blank" title="Twitter"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5sDigXHTq3TEYZ81i4SH3Feb9wTVYR88MS7TgvaiKakIBqZ3vTxBYefAmO1CaEMpdHxxA_0vZ6a3vjMcNMGkaZItHKIzIn7IpDbOewGBJ8H6xUdJMUwCLlPRXlvgyNM1Balta5GLZNi8/s800/chat24.png" /></a><a href="http://www.facebook.com" target="blank" title="Facebook"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyaqkZ3oPoT7JmdtFeYyh7_Smh9SFUXgDfkfha-1ha5fnsyjh64AyPsrhLbcyPYzOQbWBDcLeR5FgCuschQYJyHD-mHGiSjkwVrKRoPONz5emC8ewtzmbrj1RJ5kBCTzX7STWVOI_x9C4/s800/fb_logo24.png" /></a><a href="http://www.docs.google.com/" target="blank" title="Google Office"><img src="https://lh5.ggpht.com/_mFe4nvV0PXc/TOteuTF4SuI/AAAAAAAAAYI/4q8zN7mGn-k/s800/google_docs.png" /></a></div><div align="right" style="margin: -22px 5px;"><a href="http://monosbit.blogspot.com/" target="blank">© Monosbit</a> <span id="time"></span></div></div>
   
   Silakan sesuaikan beberapa kode diatas seperti URL Link tujuan ataupun gambar icon apabila sobat memiliki gambar icon sendiri yang sesuai dengan tema template blog sobat.


5. Silakan di simpan dan lihat hasilnya.

Kode CSS taskbar navigation ini silakan disesuaikan terlebih dahulu baik ukuran, warna, icon dan jumlan quick-link agar sesuai dengan template sobat. Semoga tutorial singkat ini dapat memberikan manfaat. Jika masih ada kesulitan dalam menerapkan taskbar navigation silakan tanyakan di kotak komentar...

.: Selamat Mencoba :.

© Monosbit