Hey sobat semua,,,,sudah sekian lama MWcrew tak menampakkan diri lagi, kali ini MWcrew akan memberitahu temen-temen blogger semua tentang bagaiamana cara membuat "Dolphin Menu" hanya menggunakan CSS (Cascading Style Sheet) di Blog anda, Dolphin Navigation Menu ini sangat simple dan pastinya elegant.


Langsung saja di ikuti langkah-langkah pembuatannya di bawah ini, check it out...







Preview :




1. Masuk ke blogger dashboard kemudian klik Rancangan -> Edit Html

2. klik "expand widget template" kamudian cari kode </head>

3. Tambahkan kode ini sebelum kode </head>

<style type="text/css">
<!--
#dolphincontainer{position:relative;height:56px;color:#E0E0E0;background:#143D55;width:100%;font-family:Helvetica,Arial,Verdana,sans-serif;}
#dolphinnav{position:relative;height:33px;font-size:12px;text-transform:uppercase;font-weight:bold;background:#fff url(http://santabanta.mywapblog.com/files/dolphin-bg.gif) repeat-x bottom left;padding:0 0 0 20px;}
#dolphinnav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}
#dolphinnav ul li{display:block;float:left;margin:0 1px;}
#dolphinnav ul li a{display:block;float:left;color:#EAF3F8;text-decoration:none;padding:0 0 0 20px;height:33px;}
#dolphinnav ul li a span{padding:12px 20px 0 0;height:21px;float:left;}
#dolphinnav ul li a:hover{color:#fff;background:transparent url(http://santabanta.mywapblog.com/files/dolphin-bg-over.gif) repeat-x bottom left;}
#dolphinnav ul li a:hover span{display:block;width:auto;cursor:pointer;}
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{color:#fff;background:#1D6893 url(http://santabanta.mywapblog.com/files/dolphin-left-on.gif) no-repeat top left;line-height:275%;}
#dolphinnav ul li a.current span{display:block;padding:0 20px 0 0;width:auto;background:#1D6893 url(http://santabanta.mywapblog.com/files/dolphin-right-on.gif) no-repeat top right;height:33px;}
-->
</style>

4. Kemudian Simpan.

5. Pergi ke Elemen Laman--->>>Tambahkan Gadget--->>>Html/Javascript kemudian paste kode di bawah ini

<div id="dolphincontainer">
<div id="dolphinnav">
<ul>
<li><a href="TAB1 URL HERE" title="css menus"><span>TAB1 TITLE HERE</span></a></li>
<li><a href="TAB2 URL HERE" title="css menus" class="current"><span>TAB2 TITLE HERE</span></a></li>
<li><a href="TAB3 URL HERE" title="css menus"><span>TAB3 TITLE HERE</span></a></li>

<li><a href="TAB4 URL HERE" title="css menus"><span>TAB4 TITLE HERE</span></a></li>
<li><a href="TAB5 URL HERE" title="css menus"><span>TAB5 TITLE HERE</span></a></li>
</ul>
</div>
</div>

6. Klik Simpan







"MWcrew"