Ads (728x90)

Sebelumnya saya pernah posting cara membuat menu tab navigation horizontal. Mungkin ada diantara teman-teman blogger yang menemukan kesulitan dalam meletakkan kode CSS pada tahapan pengeditan template, untuk itu pada postingan kali ini saya mencoba memberikan solusi ringan berupa sajian 30 tab menu horizontal instant yang siap pakai hanya dengan menambahkan gadget HTML/JavaScript dan meletakkan kode tab pada konten, sekaligus menekankan akan urgennya fungsi tab navigation pada sebuah template.

Langkah-langkah membuat tab menu navigation horizontal

1. Dalam keadaan sig in pada account blogger sobat, pada dasbor => klik Tata Letak=> klik Elemen Halaman

2. Klik Tambah Gadget pada kolom elemen halaman dibawah header atau diatas header

2. Pilih HTML/JavaScript

3. Copy semuae kode tab yang terdapat dalam teks area dibawah tab navigator horizontal pilihan sobat dan paste pada kolom konten

Untuk mengganti link, edit pada bagian HTML semua kode seperti berikut:
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#" ><span>Link 2</span></a></li>
<li><a href="#" ><span>Link 3</span></a></li>
<li><a href="#" ><span>Link 4</span></a></li>
<li><a href="#" ><span>Link 5</span></a></li>
<li><a href="#" ><span>Link 6</span></a></li>
<li><a href="#" ><span>Link 7</span></a></li>

ganti kode (#) dengan halaman link sobat dan ganti Link1, Link2, Link3 dan seterusnya dengan titel halaman jika ingin menambahkan atau menghapus sebuah tab, sobat tinggal menambahkan atau menghapus bagian baris kode berikut:
<li><a href="#" ><span>Link n</span></a></li>

4. Terakhir jangan lupa simpan dan simpan. Lihat hasilnya pada blog.


MBT Navigation Menu #1

Black-Orange
MBT Navigation Menu #2
Purple-White-Navigation

MBT Navigation Menu #3
Boxed 1
MBT Navigation Menu #4
 LIGHT-GREY
MBT Navigation Menu #5
Bulleted-top-Navigation
Tabs Menu #6
Tab Menu I
Tabs Menu #7
 Tab Menu G
Tabs Menu #8
 Tab Menu F
Tabs Menu #9
 ZDnet Emulation
Tabs Menu #10
 Tab Menu E
Tabs Menu #11
 Tab Menu D
Tabs Menu #12
Tab Menu 12
Tabs Menu #13
 Tab Menu 11
Tabs Menu #14
Tab Menu 10
Tabs Menu #15
 Tab Menu 9
Tabs Menu #16
 Tab Menu 6
Tabs Menu #17
 Tab Menu 8
Tabs Menu #18
Tab Menu 7
Tabs Menu #19
Tab Menu K
Tabs Menu #20
Tab Menu 4
Tabs Menu #21
 Tab Menu 3
Tabs Menu #22
 Tab Menu 2
Square
Tabs Menu #23 
Tabs Menu #24
Horizontal Buttons
Tabs Menu #25
Tab Menu H
Tabs Menu #26
 Tab Menu 1
Tabs Menu #27
 Tab Menu A
Tab Menu 5
Tabs Menu #28
Tabs Menu #29
 Tab Menu B
Tab Menu J
Tabs Menu #30
Thanks to My Blogger Trick - Sumber

Dropdown Menu (Navigasi Horizontal) dengan CSS3

“Salam persahabatan”,
mungkin seperti itulah salam pembuka atau salam penutup dari sang empu tutorial ini. Anda mungkin kenal, bahkan mungkin juga telah menjadi salah satu sahabatnya dalam GFC.



Gambar 1. Screenshot dropdown menu horizontal dengan CSS3.

Trik blogger ini mungkin agak berbeda dengan posting aslinya1 (sama caranya), karena menu horizontal di sini tidak menggunakan image & ditambahkan form pencarian — mempercantik search button dengan CSS3 oleh Rudy — di kanannya.

Letakkan kode CSS3 berikut di atas ]></b:skin>.

/*-- NAV --*/
nav {
width:100%;
background:#585858;
font:14px Sans-Serif;
letter-spacing:0.03em;
position:relatif;
overflow:hidden;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 2px 4px rgba(0,0,0, .4);
-moz-box-shadow: 0 2px 4px rgba(0,0,0, .4);
}
/* main level */
#menu-nav{
width:500px;
float:left;
margin:0;
padding: 7px 6px 0;
position:absolute;
}
#menu-nav li {
line-height:1.5em;
float:left;
list-style:none;
margin:0 auto;
padding:0 5px 8px;
position:relatif;
}
#menu-nav a, #menu-nav a:visited {
color:#e7e5e5;
text-decoration:none;
padding:  3px 16px;
border:solid 1px transparent;
display:block;
margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
text-shadow: 0 1px 1px rgba(0,0,0, .3);
}
#nav a:hover {
background: #000;
color: #fff;
}
/* main level link hover */
#menu-nav a.current, #menu-nav li:hover > a {
background:#E6E6E6;
color:#444444;
text-decoration:none;
border:outset 1px #f2f2f2;
-webkit-box-shadow: 0 1px 1px #585858;
-moz-box-shadow: 0 1px 1px #585858;
box-shadow: 0 1px 1px #585858;
text-shadow: 0 1px 0 rgba(255,255,255, 1);
}
/* sub levels link hover */
#menu-nav ul li:hover a, #menu-nav li:hover li a {
color:#666666;
background:none;
border:none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#menu-nav ul a:hover {
background: #0078ff !important;
color: #fafafa !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 0 #dddddd;
}
/* dropdown */
#menu-nav li:hover > ul {
display: block;
z-index:1;
}
/* level 2 list */
#menu-nav ul {
display: none;
margin: 0;
padding: 0;
width: 180px;
position: absolute;
top: 40px;
left:auto;
background:#f2f2f2;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .3);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .3);
box-shadow: 0 1px 3px rgba(0,0,0, .3);
}
#menu-nav ul li {
float: none;
margin: 0;
padding: 0;
}
#menu-nav ul a {
text-shadow: 0 1px 0 #fafafa;
}
/* level 3+ list */
#menu-nav ul ul {
left: 90px;
top: auto;
position: absolute;
}
/* rounded corners of first and last link */
#menu-nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#menu-nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#menu-nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#menu-nav {
display: inline-block;
}
html[xmlns] #menu-nav {
display: block;
}
* html #menu-nav {
height: 1%;
}

/*-- SEARCH --*/
#search {
width: 240px;
float: right;
margin: 0;
padding: 3px 8px; }

.searchform {
display: inline-block;
zoom: 1; /* ie7 hack for display:inline-block */
*display: inline;
border: solid 1px #5e6366;
padding: 3px 5px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);
background: #71787b;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */
}

.searchform input {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}

.searchform .searchfield {
background: #d5d5d5;
padding: 6px 6px 6px 8px;
width: 180px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}

.searchform .searchbutton {
color: #fff;
border: solid 1px #494949;
font-size: 11px;
height: 27px;
width: 27px;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
background: #555;
background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));
background: -moz-linear-gradient(top, #9e9e9e, #454545);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */
}
Sesuaikan kode yang berwarna merah (width) dengan lebar blog Anda. Kemudian silakan mengganti kode - kode yang berhubungan dengan pewarnaan, baik menggunakan hex triplet (ex: #ff0000), color name (ex: red), RGB {ex: rgb(255, 0, 0)}, atau RGBA {ex: rgba(255, 0, 0, 0.5)}.

Kemudian letakkan kode HTML seperti yang tampak di bawah ini, di sekitar elemen header blog Anda (bisa di atas, di dalam, maupun di bawah elemen header tersebut).

<nav>
<ul id='menu-nav'>
<b:if cond='data:blog.url != "#"'>
<li><a href='#' title='Beranda'>Home</a></li>
<b:else/>
<li><a class='current' href='#' title='Anda sekarang berada di halaman Beranda'>Home</a></li>
</b:if>
<b:if cond='data:blog.url != "#"'>
<li><a href='#' title='Tentang Penulis'>About</a></li>
<b:else/>
<li><a class='current' href='#' title='Anda sekarang berada di halaman Tentang Penulis'>About</a></li>
</b:if>
<li><a href='#'>Untuk Percobaan</a>
    <ul>
    <li><a href='#'>kosong</a></li>
    <li><a href='#'>kosong</a>
        <ul>
        <li><a href='#'>kosong</a>
            <ul>
            <li><a href='#'>kosong</a></li>
            <li><a href='#'>kosong</a></li>
            </ul>
        </li>
        <li><a href='#'>kosong</a></li>
        <li><a href='#'>kosong</a></li>
        <li><a href='#'>kosong</a>
            <ul>
            <li><a href='#'>kosong</a></li>
            <li><a href='#'>kosong</a></li>
            <li><a href='#'>kosong</a></li>
            <li><a href='#'>kosong</a></li>
            </ul>
        </li>
        </ul>
    </li>
    <li><a href='#'>kosong</a></li>
    <li><a href='#'>kosong</a></li>
    </ul>
</li>
<b:if cond='data:blog.url != "#"'>
<li><a href='#' title='Daftar Isi'>Sitemap</a></li>
<b:else/>
<li><a class='current' href='#' title='Anda sekarang berada di halaman Daftar Isi'>Sitemap</a></li>
</b:if>
</ul>

<div id='search'>
<form action='/search' class='searchform' method='get'>
<input class='searchfield' id='q' name='q' type='text' value=''/>
<input class='searchbutton' type='submit' value='Go'/>
</form>
</div>

</nav>
Ganti kode yang diberi tanda ‘kres’ (#) dengan alamat tautan yang Anda tuju (ex: http://optimasi-blog.blogspot.com/2005/05/about-optimasi-blog.html).
Mau lihat tampilannya, klik di sini. Sumber
Berikut kode 30 tab menu navigasi horizontal

Posting Komentar

Blogger