maap seperti biasa tanpa improvisasi langsung saja : login blogger - rancangan - edit HTML
klo berminat ini ane share dikit :
step 1 : copas kode berikut dan letkkan di bwah <head>
<script type="text/javascript" src="http://longfield22.googlecode.com/files/jquery.js"></script>
<script type="text/javascript" src="http://longfield22.googlecode.com/files/keypress_nav.js"></script>
step 2 : copas kode berikut dan letakkan di atas ]]></b:skin> atau anda boleh sedkit merombak bagian body {
body
{
margin: 0;
padding: 0;
font-family: "Lucida Grande", "Lucida Sans", sans-serif;
font-size: 100%;
background: #333;
background-image:url(pattern.jpg);
}
/* Header
-------------------------------------------------- */
#header
{
width: 460px;
margin: 0 auto;
font-size: .75em;
font-family: "Helvetica Neue", Helvetica, sans-serif;
}
#header h1
{
color: #fff;
font-weight: normal;
margin: 30px 0 3px 0;
letter-spacing: .04em;
}
#header ul
{
list-style: none;
margin: 0;
padding: 0;
}
#header ul li
{
float: left;
text-align: left;
}
#header ul li a
{
display: block;
color: #ffff66;
text-decoration: none;
text-transform: uppercase;
margin-right: 20px;
}
#header ul li a:hover
{
text-decoration: underline;
color: #ffcc66;
}
/* Containers
-------------------------------------------------- */
.container
{
width: 400px;
height: 800px;
margin: 30px auto;
padding: 10px 20px;
border: 10px solid #fff;
color: #fff;
font-size: .75em;
line-height: 2em;
}
.container h2
{
padding: 5px 10px;
width: 200px;
}
.container ul
{
list-style-position: inside;
margin: 0;
padding: 0;
}
.container ul li { margin-bottom: 10px; }
.container a { color: #fff; }
.container a:hover
{
background: #fff;
color: #555;
}
#home { background: #000000; }
#home h2 { background: #ffffff; }
#about { background: #000000; }
#about h2 { background: #ffffff; }
#contact { background: #ffffff; }
#contact h2 { background: #000000; }
#awards { background: #ffffff; }
#awards h2 { background: #000000; }
#links { background: #ffffff; }
#links h2 { background: #000000; }
/* Footer
-------------------------------------------------- */
#footer
{
width: 460px;
margin: 0 auto;
margin-bottom: 0;
font-family: "Helvetica Neue", Helvetica, sans-serif;
}
#footer p
{
color: #aaa;
font-size: .75em;
text-transform: uppercase;
letter-spacing: .04em;
margin: 0;
}
#footer a
{
text-decoration: none;
color: #ffff66;
}
#footer a:hover
{
text-decoration: underline;
color: #ffcc66;
}
/* Self-Clearning Rules
-------------------------------------------------- */
ul#navigation:after
{
content: ".";
display: block;
visibility: hidden;
clear: both;
height: 0;
}
* html ul#navigation { height: 1px; }
ul#navigation { min-height: 1px; }
step 3 : lalu untuk bagian div anda bisa ganti class pada menu anda atau hanya untk sekdar jadi tab view anda rombak sedikit tab view lama anda dan simple kata bisa anda letakkan di bawah <body>
<div id="header">
<h1>jQuery Keypress Navigation</h1>
<ul id="navigation">
<li><a href="#home">Home ( a )</a></li>
<li><a href="#about">About ( s )</a></li>
<li><a href="#contact">Contact ( d )</a></li>
<li><a href="#awards">Awards ( f )</a></li>
<li><a href="#links">Links ( g )</a></li>
</ul>
</div>
<div id="home" class="container">
<h2>Welcome!</h2>
<img src="http://www.abload.de/img/han-seung-yeon_hannah_28vq.jpg"/></img>
</div>
<div id="about" class="container">
<h2>About Me</h2>
<img src="http://www.abload.de/img/han-seung-yeon_hannah_28vq.jpg"/></img>
</div>
<div id="contact" class="container">
<h2>No Spam Please</h2>
<img src="http://www.abload.de/img/han-seung-yeon_hannah_28vq.jpg"/></img>
</div>
<div id="awards" class="container">
<h2>Awards, So Many ...</h2>
<img src="http://www.abload.de/img/han-seung-yeon_hannah_28vq.jpg"/></img>
</div>
<div id="links" class="container">
<h2>Cool Sites</h2>
<img src="http://www.abload.de/img/han-seung-yeon_hannah_28vq.jpg"/></img>
</div>
dan anda bisa ganti <img src="............................. dengan konten anda
save template anda dan liat hasilnya
Selamat mencoba!!!
0 komentar:
Post a Comment