Taskbar navigation menu

Berikut merupakan tutorial sederhana membuat navigation bar berbentuk taskbar horizontal yang stylish seperti taskbar 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..

1. Login ke blog sobat dan jangan lupa untuk mem-backup template blog terlebih dahulu.
2. Klik Dashboard > Design > Edit HTML.
3. Cari kode </Head> pada template blog (tekan CTRL + F pada keyboard anda untuk menampilkan kotak pencarian di browser untuk mempercepat pencarian).
4. Copy kode berikut ini tepat diatas kode </Head>.
   
   <!-- Begin CSS TaskBar Navigation by MonozCore -->
   <style>
   #taskbar {
   background: url() bottom repeat-x;
   width: 100%;
   height: 34px;
   clear: both;
   bottom: 0;
   position: fixed;
   font-family:arial;
   text-decoration: none;
   color: #FFFCFC;
   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;
   }
   #icon-box {
   text-align: left;
   color:white;
   position:fixed;
   left: 10px;
   bottom: 3px;
   }
   
   #icon-box a:hover img {
   border: 1px solid #ffffff;
   bottom: 2px;
   }
   
   #icon-box a:hover{
   color: #666666;
   }
   
   #welcome-box {
   text-align: center;
   color:white;
   font-weight:bold;
   font-size:13px;
   font-family:arial;
   text-decoration: none;
   position:fixed;
   bottom: 8px;
   left:160px;
   right:200px;
   width:auto;
   }
   </style>
   <!-- End CSS TaskBar Navigation by MonozCore -->
   Pada kode CSS #Welcome-Box yang berwarna biru silakan disesuaikan ukurannya biar tampilannya sesuai dengan template.
   
   left:160px;
   right:200px;
   width:auto;
5. Cari kode </Body> kemudian copy kode berikut ini tepat diatas kode </Body>. 
   
   
   <!-- Begin TaskBar Navigation by MonozCore -->
   <div id='taskbar'>
   <div align='right' style='padding:0;'>
   <table><tr valign='midlle'>
   <td>
   <!-- Begin Copyrights -->
   &#169; Copyright  2010 <a href='http://monozcore.blogspot.com' target='blank'><data:blog.title/></a>
   <!-- End Copyrights -->
   </td>
   <td>
   <!-- Begin clock script -->
   <script src='http://localtimes.info/clock.php?cp3_Hex=FFB200&amp;cp2_Hex=000000&amp;cp1_Hex=FFFCFC&amp;fwdt=96&amp;ham=0&amp;hbg=1&amp;hfg=0&amp;sid=0&amp;mon=0&amp;wek=0&amp;wkf=0&amp;sep=0&amp;continent=Asia&amp;country=Indonesia&amp;city=Jakarta&amp;widget_number=1000' type='text/javascript'/>
   <!-- End clock script -->
   </td></tr></table></div>
   </div>
   <!-- Begin QuickLaunch Box -->
   <div id='icon-box'>
   <a href='Taruh Link Anda Disini' title='Judul Link'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXtcAQxFJ7CFuf_mbtYS6tvILqVJUYrkCgmxct2DDaESWw-B8HwLbRY7Ob6PLn-Rbsdhm-NWJVWdaMPTSuBlQVTxVr2za4kV7janYvpqyAEIV9wV6-5zDyBUoQa3FKXsHY_-NusrMWwlk/s800/backtotop.png'/></a>
   <a href='Taruh Link Anda Disini' title='Judul Link'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ2lfiDKy7lZkAaKqRTLY4OHDYt4RYKQhnFIYCfMSACH7sybXJnhVcSMjmc1Fv0d-rJv_QTUde-fCWeowX8rf9I3x-LjfUaCMwoc4k6y_rmaIxM09Ozir-LTCQrinx8QzwOyjGRcs8uKY/s800/Winamp-1.png'/></a>
   <a href='Taruh Link Anda Disini' title='Judul Link'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDz1JrtZLJk_wsl1Tym6UjCWKWt3tytC1IRrE7B7Yi-KorpNVemUs6yxxiChEDIHfXqLg2u8aTFwQq3NhGMYq8jGwtJLVGhfBgZ4hA9QNlrhoR9bb8syLNfYCDIvKPP6LTM5_J_m93tsg/s800/chat24.png'/></a>
   <a href='Taruh Link Anda Disini' title='Judul Link'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuN_rgiaZ7Pi4dUP7oiEzjG8F8r84KlhWLirB1pN27uTtPWN84UcLNR-kqY59dSECh1hlFFg8rmObIoCMk50sRsO_ytd8YVC3-J3NKi1AVcVNMlWhTWwBGs8I0WPS5O4VYoFrhELFhDXU/s800/fb_logo24.png'/></a>
   <a href='http://www.docs.google.com' onclick='NewWindow(this.href,&apos;Google Office&apos;,&apos;925&apos;,&apos;700&apos;,&apos;yes&apos;,&apos;center&apos;);return false' onfocus='this.blur()' title='Google Office'><img src='http://lh5.ggpht.com/_mFe4nvV0PXc/TOteuTF4SuI/AAAAAAAAAYI/4q8zN7mGn-k/s800/google_docs.png'/></a>
   <!-- End QuickLaunch Box -->
   <!-- Begin Welcome Note -->
   <div id='welcome-box'>
   <marquee direction='left'>Welcome to <data:blog.title/></marquee>
   </div>
   <!-- End Welcome Note -->
   </div>
   <!-- End TaskBar Navigation by MonozCore -->
6. 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.

Selamat mencoba