skip to main
|
skip to sidebar
TEMPLATE
MENU NAVIGASI
TEMPLATE
ANIMASI
ANIME 01
SOCIAL INTELLIGENCE
MY ONE
BLOG BY PHOTO
ICE BREAKER
CUENTA CUENTOS
ADVENTURE
MINICARD
WARCRAFT
DESIGN STUDIO
HIP HOP
HOME
FABULOUS LAS VEGAS
GRUNGE LONDON
POP STAR
CALENDAR NEW YORK
BROCHURE MELBOURNE
POSTAGE SYDNEY
SIMPLE CHINA
CRUISES
TRAVEL
PROBAMA
RECIPE BOOK
MUSIK
SOUTH EAST VIEW
3 MENU IN BLUE
TAMING LIST
ERIC MEYERS
HORIZONTAL BUTTONS
ZD NET EMULATION
JAM GARUDA
JAM PARTAI
BURUNG TWITTER
KEMBANG API
JAM SPONGEBOB
JAM WANITA BERJILBAB
ASMAUL HUSNA
KALENDER ISLAMI
JAM ISLAMI
KALENDER ISLAMI
SAKURA
SELANCAR
ROBUSTA
SUNSET FARM
GROUND
NEW CAST
MY RECIPE
RECIPE BOOK
WINDS OF TASTE
REAL TEX
SHOPPING CART
PERFUME
PHOTO GALLERY
PHOTO GALLERY DARK
ELLEGANCE GALLERY
VIDEO BLOG
FOCUS POINT
TEQUILAS FLAMEJANTES
PIN UP
FLY NET 02
5 KOLOM
6 KOLOM
8 KOLOM
5,6,8 KOLOM
FLY NET 02
MACAM-MACAM MENU NAVIGASI
Posted 02.00
by
cak hari
in
ERIC'S MEYER TABBED NAVBAR
COPY KODE DIBAWAH INI:
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN"><br /> <br /> <br /> <br /> Eric Meyer's tabbed navbar Preview<br /> <br /> <br /> <br /> <style type="text/css"><br /> <br /> <!--<br /> <br /> /* CSS Tabs */<br /> <br /> #navlist {<br /> <br /> padding: 3px 0;<br /> <br /> margin-left: 0;<br /> <br /> border-bottom: 1px solid #778;<br /> <br /> font: bold 12px Verdana, sans-serif;<br /> <br /> }<br /> <br /> #navlist li {<br /> <br /> list-style: none;<br /> <br /> margin: 0;<br /> <br /> display: inline;<br /> <br /> }<br /> <br /> #navlist li a {<br /> <br /> padding: 3px 0.5em;<br /> <br /> margin-left: 3px;<br /> <br /> border: 1px solid #778;<br /> <br /> border-bottom: none;<br /> <br /> background: #DDE;<br /> <br /> text-decoration: none;<br /> <br /> }<br /> <br /> #navlist li a:link { color: #448; }<br /> <br /> #navlist li a:visited { color: #667; }<br /> <br /> #navlist li a:hover {<br /> <br /> color: #000;<br /> <br /> background: #AAE;<br /> <br /> border-color: #227;<br /> <br /> }<br /> <br /> #navlist li a#current {<br /> <br /> background: white;<br /> <br /> border-bottom: 1px solid white;<br /> <br /> }<br /> <br /> --><br /> <br /> </style><br /> <br /> <br /> <br /> <br /> <br /> <h4>Eric Meyer's tabbed navbar</h4><br /> <br /> <div id="navcontainer"><br /> <br /> <ul id="navlist"><br /> <br /> <!-- CSS Tabs --><br /> <br /> <li><a id="current" href="Home.html">Home</a></li><br /> <br /> <li><a href="Products.html">Products</a></li><br /> <br /> <li><a href="Services.html">Services</a></li><br /> <br /> <li><a href="Support.html">Support</a></li><br /> <br /> <li><a href="Order.html">Order</a></li><br /> <br /> <li><a href="News.html">News</a></li><br /> <br /> <li><a href="About.html">About</a></li><br /> <br /> </ul><br /> <br /> </div><br /> <br /> <br /> <br /> </!doctype>
ZDnet Emulation
COPY KODE DIBAWAH INI:
<style> #navcontainer { float:left; width:100%; background:#fff; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6659A7; border-top:1px solid #6659A7; } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #6659A7; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #666; background-color: #fff; } </style> <div id="navcontainer"><ul id="navlist"><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> </ul></div>
HORIZONTAL BUTTONS
COPY KODE DIBAWAH INI:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"><br /> <br /> <html><br /> <head><br /> <title>Horizontal Buttons Preview</title><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /> <style type="text/css"> <!-- /* CSS Tabs */ #navcontainer { background: #f0e7d7; margin: 0 auto; padding: 1em 0 0 0; font-family: georgia, serif; text-transform: lowercase; } /* to stretch the container div to contain floated list */ #navcontainer:after { content: "."; display: block; line-height: 1px; font-size: 1px; clear: both; } ul#navlist { list-style: none; padding: 0; margin: 0 auto; width: 80%; font-size: 0.8em; } ul#navlist li { display: block; float: left; width: 15%; margin: 0; padding: 0; } ul#navlist li a { display: block; width: 100%; padding: 0.5em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; } --> </style><br /> </style><br /> </head><br /> <br /> <body><br /> <h4>Horizontal Buttons</h4><br /> <div id="navcontainer"> <ul id="navlist"> <!-- CSS Tabs --> <li id="active"><a id="current" href="Home.html">Home</a></li> <li><a href="Products.html">Products</a></li> <li><a href="Services.html">Services</a></li> <li><a href="Support.html">Support</a></li> <li><a href="Order.html">Order</a></li> <li><a href="News.html">News</a></li> <li><a href="About.html">About</a></li> </ul> </div> </body><br /> </html>
MENU LAINNYA
KLIK BOX BIRU DIATAS:
<a href="http://mashari-dominan.blogspot.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="30" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifcUcEnwgzef4tZn0VhbYcxF5TfoJkf8UVrll58PHH3pMQffsk00KvNfYChX2s3LTpN2AdEMckf6_3B_fjf2QWJ87wJqDYIX4kNclQNwDjk8wZ2QApD6S1tSV_T8U5uVOestseuBgL7kc/s200/cak+hari+templates.PNG" width="230" /></a>
3D Menu InBlue
COPY KODE DIBAWAH INI:
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN"><br /> <br /> 3D Imenu in blue Preview<br /> <style type="text/css"><br /> <!--<br /> /* CSS Tabs */<br /> #navlist {<br /> color: white;<br /> background: #17a;<br /> border-bottom: 0.2em solid #17a;<br /> border-right: 0.2em solid #17a;<br /> padding: 0 1px;<br /> margin-left: 0;<br /> width: 20em;<br /> font: normal 10px Verdana, sans-serif;<br /> }<br /> <br /> <br /> #navlist li {<br /> list-style: none;<br /> margin: 0;<br /> font-size: 1em;<br /> }<br /> <br /> <br /> #navlist a {<br /> display: block;<br /> text-decoration: none;<br /> margin-bottom: 0.5em;<br /> margin-top: 0.5em;<br /> color: white;<br /> background: #39c;<br /> border-width: 1px;<br /> border-style: solid;<br /> border-color: #5bd #035 #068 #6cf;<br /> border-left: 1em solid #fc0;<br /> padding: 0.25em 0.5em 0.4em 0.75em;<br /> }<br /> <br /> <br /> #navlist a#current { border-color: #5bd #035 #068 #f30; }<br /> <br /> <br /> #navlist a {<br /> width: 99%;<br /> /* only necessary for Internet Explorer */<br /> }<br /> <br /> <br /> #navlist a {<br /> voice-family: "\"}\"";<br /> voice-family: inherit;<br /> width: 9.6em;<br /> /* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */<br /> }<br /> <br /> <br /> #navcontainer>#navlist a {<br /> width: auto;<br /> /* only necessary if you use the hacks above for the Internet Explorer */<br /> }<br /> <br /> <br /> #navlist a:hover, #navlist a#current:hover {<br /> background: #28b;<br /> border-color: #069 #6cf #5bd #fc0;<br /> padding: 0.4em 0.35em 0.25em 0.9em;<br /> }<br /> <br /> <br /> #navlist a:active, #navlist a#current:active {<br /> background: #17a;<br /> border-color: #069 #6cf #5bd white;<br /> padding: 0.4em 0.35em 0.25em 0.9em;<br /> }<br /> --><br /> </style><br /> <br /> <br /> <br /> <br /> <br /> <br /> <h4>3D Imenu in blue</h4><br /> <br /> <br /> <div id="navcontainer"><br /> <ul id="navlist"><br /> <!-- CSS Tabs --><br /> <li><a id="current" href="Home.html">Home</a></li><br /> <li><a href="Products.html">Products</a></li><br /> <li><a href="Services.html">Services</a></li><br /> <li><a href="Support.html">Support</a></li><br /> <li><a href="Order.html">Order</a></li><br /> <li><a href="News.html">News</a></li><br /> <li><a href="About.html">About</a></li><br /> <br /> <br /> </ul><br /> </div><br /> <br /> </!doctype>
TAMING LIST
COPY KODE DIBAWAH INI:
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN"><br /> <br /> <br /> <br /> Taming List Preview<br /> <br /> <style type="text/css"><br /> <!--<br /> /* CSS Tabs */<br /> #button {<br /> width: 20em;<br /> border-right: 1px solid #000;<br /> padding: 0 0 1em 0;<br /> margin-bottom: 1em;<br /> font-family: Tahoma, Arial, sans-serif;<br /> /*'Trebuchet MS', 'Lucida Grande', Verdana, Arial, sans-serif;*/<br /> font-size : 10px;<br /> background-color: #90bade;<br /> color: #333;<br /> }<br /> <br /> #button ul {<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br /> border: none;<br /> }<br /> <br /> #button li {<br /> border-bottom: 1px solid #90bade;<br /> margin: 0;<br /> list-style: none;<br /> list-style-image: none;<br /> }<br /> <br /> #button li a {<br /> display: block;<br /> padding: 5px 5px 5px 0.5em;<br /> border-left: 10px solid #1958b7;<br /> border-right: 10px solid #508fc4;<br /> background-color: #2175bc;<br /> color: #fff;<br /> text-decoration: none;<br /> width: 100%;<br /> }<br /> <br /> html>body #button li a {<br /> width: auto;<br /> }<br /> <br /> #button li a:hover {<br /> border-left: 10px solid #1c64d1;<br /> border-right: 10px solid #5ba3e0;<br /> background-color: #2586d7;<br /> color: #fff;<br /> }<br /> <br /> #button li #active {<br /> border-left: 10px solid #1c64d1;<br /> border-right: 10px solid #5ba3e0;<br /> background-color: #2586d7;<br /> color: #fff;<br /> }<br /> --><br /> </style><br /> <br /> <br /> <br /> <h4>Taming List</h4><br /> <br /> <div id="button"><br /> <ul><br /> <!-- CSS Tabs --><br /> <li><a id="active" href="Home.html">Home</a></li><br /> <li><a href="Products.html">Products</a></li><br /> <li><a href="Services.html">Services</a></li><br /> <li><a href="Support.html">Support</a></li><br /> <li><a href="Order.html">Order</a></li><br /> <li><a href="News.html">News</a></li><br /> <li><a href="About.html">About</a></li><br /> <br /> </ul><br /> </div><br /> <br /> </!doctype>
0 comment(s) to...
“MACAM-MACAM MENU NAVIGASI”
0 komentar:
Posting Komentar
Posting Lebih Baru
Posting Lama
Langganan:
Posting Komentar (Atom)
ANIMASI
JAM GARUDA
JAM PARTAI
BURUNG TWITTER TERBANG
KEMBANG API
LCD TEXT GENERATOR
JAM SPONGEBOB
ASMAUL HUSNA
HOME
ENTRI BARU
RANCANGAN
EDIT HTML
EDIT ENTRI
DASHBOARD
MINIMA
HALAMAN UTAMA
CAK HARI BLOG
MACAM2 TEMPLATE
MENU NAVIGASI
MACAM2 ANIMASI
UPLOAD LPSE
DASHBOARD
MELODY GUITAR ROCK
DATABASE RT/RW
GAMBAR2 PLESETAN
Diberdayakan oleh
Blogger
.
Categories
ANIMASI
(1)
.
.
Home
Posts RSS
Comments RSS
Edit
Edit
Edit
Get the feed in RSS
0 komentar:
Posting Komentar