Membuat TaskBar Navigation Menu

Pada postingan kali ini saya akan memberikan 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 sobat....gimana keren-kan ??? Oke jika tertarik silakan simak tutorialnya...

© Copyright 2010 Vieand's

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 </Head>.
   
   The Code...
   <!-- Begin CSS TaskBar Navigation by Vieand's_blog -->
   <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  Vieand's_blog  -->
   Pada kode CSS #Welcome-Box yang berwarna biru silakan disesuaikan ukurannya biar tampilannya sesuai dengan template sobat.
   
   left:160px;
   right:200px;
   width:auto;
5. Cari kode </Body> kemudian copy kode berikut ini tepat diatas kode </Body>.
   The Code...
   <!-- Begin TaskBar Navigation by  Vieand's_blog  -->
   <div id='taskbar'>
   <div align='right' style='padding:0;'>
   <table><tr valign='midlle'>
   <td>
   
   <!-- Begin Copyrights -->
   
   &#169; Copyright  2010 <a href='http://alviand-blogger.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/AVvXsEhlNcuFNYWf8jERXvbUfWLi9GqAdz0VCtdiMSnBY8TKoU7beobf9blXm0Fg2MEPJaUEzoodEJTRvjagk2n7PNUrPTUialZ1_kZw2bcKN4nKR8BN5XmdYheIMGJ_agGWC5VVh6-Byp7bvqE/s800/backtotop.png'/></a>
   
   <a href='Taruh Link Anda Disini' title='Judul Link'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieP2VVMzdNciFK0-NBsrRFiIFIdTsO-HBUEIb9aQc-iwDpRDQzgYtCP9YPOVUckvyqSjzGHOs6Zd0YcPrnrhTKArg0b1Af2uA0Ptydy8YqDk0R4wjIztv5qBIFyn-KAWmOBue1yKubVeo/s800/Winamp-1.png'/></a>
   
   <a href='Taruh Link Anda Disini' title='Judul Link'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo4SzGRpH-x9EOeuugSaGVaS78ay61IXMeJISdf3a-xkhBNzqKx11Zobvj42Ngd0pNmkirt5mJClejux0DOLE0Qz673r58RcDFkHxTot-QaqTJFS8gupc01d3vH9D5azHKAIx2zAQJEO0/s800/chat24.png'/></a>
   
   <a href='Taruh Link Anda Disini' title='Judul Link'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivPvG8xksP32W49ALdteThelYpsmsi701R2p3gJSFc7Yb73TNyn4VWgdrigGbTCw8bT83hiRZmN4Ny_oFtVwYeSGma7MF8-lQWxSO5IHZqtl8J8Oq11-c0HeF11TCM12Q0ZEuKV33ufwo/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  Vieand's_blog  -->
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 sobat. Semoga tutorial singkat ini dapat memberikan manfaat buat sobat Vieand's_blog. Jika masih ada kesulitan dalam menerapkan taskbar navigation silakan tanyakan di kotak komentar...

.: Selamat Mencoba :.