Hai para Sahabat Blogger...
kali ini. saya akan membahas tentang cara CARA membuat MENU yang keren dan menarik buat aku pribadi. Dan aku ngak tau' apa MENU INI menarik buat anda juga? atau tidak?
Okey.. Langsung ajha ke target yuck..
Silahkan anda BUKA MENU Dibawa INI biar anda bisa lihat Atau MENU apa saja yang aku dapatkan buat anda..
Nah sudah lihat kan dan udah ngerti kan. . . ? seperti itulah maksud Simple menu fixed top. sekarang mari kita terapkan di blog anda ( bagi yang mau ).
1. Log in ke blog anda
2. Klik Rancangan / Template
3. Klik Edit HTML
4. Cari kode ]]></b:skin>
5. Masukan kode Css di bawah ini di atas kode ]]></b:skin>
6. Setelah itu cari kode <body> dan setelah ketemu silahkan simpan kode HTML di bawah ini di bawah kode <body>
<div id="nav">
<ul>
<li><a href="Link Anda">Asdharsyaputra</a></li>
<li><a href="Link Anda">Keren</a></li>
<li><a href="Link Anda">la</a></li>
<li><a href="Link Anda">Contoh Menu</a></li>
</ul>
</div>
kali ini. saya akan membahas tentang cara CARA membuat MENU yang keren dan menarik buat aku pribadi. Dan aku ngak tau' apa MENU INI menarik buat anda juga? atau tidak?
Okey.. Langsung ajha ke target yuck..
Silahkan anda BUKA MENU Dibawa INI biar anda bisa lihat Atau MENU apa saja yang aku dapatkan buat anda..
Nah sudah lihat kan dan udah ngerti kan. . . ? seperti itulah maksud Simple menu fixed top. sekarang mari kita terapkan di blog anda ( bagi yang mau ).
1. Log in ke blog anda
2. Klik Rancangan / Template
3. Klik Edit HTML
4. Cari kode ]]></b:skin>
5. Masukan kode Css di bawah ini di atas kode ]]></b:skin>
#nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #f2f2f2;
border-bottom: 1px solid #DDD;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
#nav ul {
list-style: none;
width: 800px;
margin: 0 auto;
padding: 0
}
#nav li {
float: left
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc;
font: 13px Arial, sans-serif
}
#nav li:first-child a {
border-left: 1px solid #ccc
}
#nav li a:hover {
color: #c00;
background-color: #fff
}
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
background-color: #f2f2f2;
border-bottom: 1px solid #DDD;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
#nav ul {
list-style: none;
width: 800px;
margin: 0 auto;
padding: 0
}
#nav li {
float: left
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc;
font: 13px Arial, sans-serif
}
#nav li:first-child a {
border-left: 1px solid #ccc
}
#nav li a:hover {
color: #c00;
background-color: #fff
}
6. Setelah itu cari kode <body> dan setelah ketemu silahkan simpan kode HTML di bawah ini di bawah kode <body>
<div id="nav">
<ul>
<li><a href="Link Anda">Asdharsyaputra</a></li>
<li><a href="Link Anda">Keren</a></li>
<li><a href="Link Anda">la</a></li>
<li><a href="Link Anda">Contoh Menu</a></li>
</ul>
</div>
<ul class='v2' id='topnav'>
<li><a href='/' title='HOME'>HOME</a></li>
<li><a href='#' title='MENU 1'>JUDUL LINK</a></li>
<li><a href='#' title='MENU 2'>UDUL LINK</a></li>
<li><a href='#' title='MENU 3'>UDUL LINK</a></li>
<li><a href='#' title='MENU 4'>UDUL LINK</a></li>
</ul>
<script type='text/javascript'>
$(document).ready(function() {
$('#topnav li').prepend('<span/>'); //Throws an empty span tag right before the a tag
$('#topnav li').each(function() { //For each list item...
var linkText = $(this).find('a').html(); //Find the text inside of the a tag
$(this).find('span').show().html(linkText); //Add the text in the span tag
});
$('#topnav li').hover(function() { //On hover...
$(this).find('span').stop().animate({
marginTop: '-40' //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out...
$(this).find('span').stop().animate({
marginTop: '0' //Move the span back to its original state (0px)
}, 250);
});
});
</script>
<style>
ul#topnav {
margin: 10px 0 20px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 100%;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff;
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}
ul#topnav.v2 span{
background: #555;
}
ul#topnav.v2 a{
color: #555;
background: #CCC;
}
</style>
<li><a href='/' title='HOME'>HOME</a></li>
<li><a href='#' title='MENU 1'>JUDUL LINK</a></li>
<li><a href='#' title='MENU 2'>UDUL LINK</a></li>
<li><a href='#' title='MENU 3'>UDUL LINK</a></li>
<li><a href='#' title='MENU 4'>UDUL LINK</a></li>
</ul>
<script type='text/javascript'>
$(document).ready(function() {
$('#topnav li').prepend('<span/>'); //Throws an empty span tag right before the a tag
$('#topnav li').each(function() { //For each list item...
var linkText = $(this).find('a').html(); //Find the text inside of the a tag
$(this).find('span').show().html(linkText); //Add the text in the span tag
});
$('#topnav li').hover(function() { //On hover...
$(this).find('span').stop().animate({
marginTop: '-40' //Find the span tag and move it up 40 pixels
}, 250);
} , function() { //On hover out...
$(this).find('span').stop().animate({
marginTop: '0' //Move the span back to its original state (0px)
}, 250);
});
});
</script>
<style>
ul#topnav {
margin: 10px 0 20px;
padding: 0;
list-style: none;
font-size: 1.1em;
clear: both;
float: left;
width: 100%;
}
ul#topnav li{
margin: 0;
padding: 0;
overflow: hidden;
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
padding: 10px 20px;
float: left;
text-decoration: none;
color: #fff;
text-transform: uppercase;
clear: both;
height: 20px;
line-height: 20px;
background: #1d1d1d;
}
ul#topnav a { color: #7bc441; }
ul#topnav span {
display: none;
}
ul#topnav.v2 span{
background: #555;
}
ul#topnav.v2 a{
color: #555;
background: #CCC;
}
</style>
Menu yang bertemakan kegelapan ( bukan ajaran sesat ya ) hehhee tapi menu yang berwarna gelap seperti apa bentuk nya ya kira - kira seperti gambar di bawah ini.
1. Masuk ke blog anda.
2. Klik Rancangan / Template
3. Klik Edit HTML
4. Cari kode ]]></b:skin>
5. Simpan kode di bawah ini di atas kode ]]></b:skin>
6. Tekan CTRL + F atau F3 lalu cari kode ini (Header1), kode langkapnya seperti ini
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nama Bllog (Header)' type='Header'/>
</b:section>
</div>
7. Lihat kode </div> di bawah kode </div> itu simpan kode di bawah ini
<ul id="navigation">
<li><a href="LINK">BERANDA</a></li>
<li><a href="LINK">KODE WARNA</a></li>
<li><a href="LINK">DAFTAR ISI</a></li>
<li><a href="LINK">KONTAK</a></li>
</ul>
Jadi nanti seperti ini kodenya,
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nama Blog (Header)' type='Header'/>
</b:section>
</div>
<ul id="navigation">
<li><a href="LINK">BERANDA</a></li>
<li><a href="LINK">KODE WARNA</a></li>
<li><a href="LINK">DAFTAR ISI</a></li>
<li><a href="LINK">KONTAK</a></li>
</ul>
Nah Ngerti kan kalau udah silahkan klik Pratinjau jika menunya sudah muncul klik SIMPAN, menu ini akan muncul di bawah header.
2. Klik Rancangan / Template
3. Klik Edit HTML
4. Cari kode ]]></b:skin>
5. Simpan kode di bawah ini di atas kode ]]></b:skin>
#navigation {
background: #353535; /* Old browsers */
background: -moz-linear-gradient(top, #353535 0%, #2c2c2c 50%, #222222 51%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#353535), color-stop(50%,#2c2c2c), color-stop(51%,#222222)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #353535 0%,#2c2c2c 50%,#222222 51%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #353535 0%,#2c2c2c 50%,#222222 51%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #353535 0%,#2c2c2c 50%,#222222 51%); /* IE10+ */
background: linear-gradient(top, #353535 0%,#2c2c2c 50%,#222222 51%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#222222',GradientType=0 ); /* IE6-9 */
border: 1px solid #222;
box-shadow:0 1px 2px #000, inset 0 1px 0 #4a4a4a, inset 0 -1px 0 #4a4a4a;
-moz-box-shadow:0 1px 2px #000, inset 0 1px 0 #4a4a4a, inset 0 -1px 0 #4a4a4a;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.6), inset 0 1px 0 #4a4a4a, inset 0 -1px 2px #2e2e2e;
display:inline-block;
color:#2d2e2e;
list-style: none;
margin:0;
overflow: hidden;
padding:0;
}
#navigation li {
float: left;
border-right: solid 1px #111;
height: 34px;
}
#navigation li a:link, #navigation li a:visited {
border-right: solid 1px #343434;
color: #9c9c9c;
display: block;
font: bold 12px Arial, sans-serif;
letter-spacing:.1em;
height: 34px;
line-height: 35px;
padding: 0 25px;
text-shadow:0 -1px 0 #111;
text-decoration: none;
text-transform:uppercase;outline: none;
}
#navigation li a:hover {
color: #abc5d9;
text-shadow: 0 0 6px rgba(69,166,248,.9);
-webkit-transition:text-shadow .2s ease-in;
-moz-transition:text-shadow .3s ease-in;
-o-transition:text-shadow .3s ease-in;
transition:text-shadow .3s ease-in;
}
#navigation li a:active {
background-color:#242424;
border-right:1px solid #1a1a1a;
-webkit-box-shadow:inset 1px 2px 2px rgba(0,0,0,.4);
}
#navigation li.last, #navigation a.last, #navigation li a:link.last {
border:none;
}
background: #353535; /* Old browsers */
background: -moz-linear-gradient(top, #353535 0%, #2c2c2c 50%, #222222 51%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#353535), color-stop(50%,#2c2c2c), color-stop(51%,#222222)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #353535 0%,#2c2c2c 50%,#222222 51%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #353535 0%,#2c2c2c 50%,#222222 51%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #353535 0%,#2c2c2c 50%,#222222 51%); /* IE10+ */
background: linear-gradient(top, #353535 0%,#2c2c2c 50%,#222222 51%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#222222',GradientType=0 ); /* IE6-9 */
border: 1px solid #222;
box-shadow:0 1px 2px #000, inset 0 1px 0 #4a4a4a, inset 0 -1px 0 #4a4a4a;
-moz-box-shadow:0 1px 2px #000, inset 0 1px 0 #4a4a4a, inset 0 -1px 0 #4a4a4a;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.6), inset 0 1px 0 #4a4a4a, inset 0 -1px 2px #2e2e2e;
display:inline-block;
color:#2d2e2e;
list-style: none;
margin:0;
overflow: hidden;
padding:0;
}
#navigation li {
float: left;
border-right: solid 1px #111;
height: 34px;
}
#navigation li a:link, #navigation li a:visited {
border-right: solid 1px #343434;
color: #9c9c9c;
display: block;
font: bold 12px Arial, sans-serif;
letter-spacing:.1em;
height: 34px;
line-height: 35px;
padding: 0 25px;
text-shadow:0 -1px 0 #111;
text-decoration: none;
text-transform:uppercase;outline: none;
}
#navigation li a:hover {
color: #abc5d9;
text-shadow: 0 0 6px rgba(69,166,248,.9);
-webkit-transition:text-shadow .2s ease-in;
-moz-transition:text-shadow .3s ease-in;
-o-transition:text-shadow .3s ease-in;
transition:text-shadow .3s ease-in;
}
#navigation li a:active {
background-color:#242424;
border-right:1px solid #1a1a1a;
-webkit-box-shadow:inset 1px 2px 2px rgba(0,0,0,.4);
}
#navigation li.last, #navigation a.last, #navigation li a:link.last {
border:none;
}
6. Tekan CTRL + F atau F3 lalu cari kode ini (Header1), kode langkapnya seperti ini
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nama Bllog (Header)' type='Header'/>
</b:section>
</div>
7. Lihat kode </div> di bawah kode </div> itu simpan kode di bawah ini
<ul id="navigation">
<li><a href="LINK">BERANDA</a></li>
<li><a href="LINK">KODE WARNA</a></li>
<li><a href="LINK">DAFTAR ISI</a></li>
<li><a href="LINK">KONTAK</a></li>
</ul>
Jadi nanti seperti ini kodenya,
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nama Blog (Header)' type='Header'/>
</b:section>
</div>
<ul id="navigation">
<li><a href="LINK">BERANDA</a></li>
<li><a href="LINK">KODE WARNA</a></li>
<li><a href="LINK">DAFTAR ISI</a></li>
<li><a href="LINK">KONTAK</a></li>
</ul>
Nah Ngerti kan kalau udah silahkan klik Pratinjau jika menunya sudah muncul klik SIMPAN, menu ini akan muncul di bawah header.
<div class='widget-content'>
<style type="text/css">
.daftar_posting{list-style:none;margin-left:-5px;font-family:Droid Serif;font-size:16px;color:lime;text-align:left;}
.daftar_posting a{color:light blue;border-top:0px dotted white;border-bottom:0px dotted white;background:transparent url(http://i49.tinypic.com/27ziu80/gubhugreyot/images/bgRPli.gif) no-repeat 0 50%;padding-left:15px;}
.daftar_posting a:hover{color:white;}
</style>
<div style="margin:0px; padding:4px;border:2px solid #eee;background:#000;">
<div style="overflow:auto;background:#000;height:215px;">
<div style="width:590px;">
<script style="text/javascript">
var numposts = 1000;
var showpostsummary = false;
var standardstyling = true;
function showrecentposts(json) {document.write('<ol class="daftar_posting">');
for (var i = 0; i < numposts; i++) { document.write('<li>');
var entry = json.feed.entry[i]; var posttitle = entry.title.$t;
var posturl; if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href; break;}}
posttitle = posttitle.link(posturl);
if ("content" in entry) { var postcontent = entry.content.$t;}
else
if ("summary" in entry) { var postcontent = entry.summary.$t;}
else var postcontent = ""; var re = /<S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (!standardstyling) document.write('<div class="bbrecpost">');
if (standardstyling) document.write(posttitle);
if (!standardstyling) document.write('</div><div class="bbrecpostsum"">');
if (showpostsummary == true) { if (standardstyling) document.write('<br/>');
if (postcontent.length < numchars) { if (standardstyling) document.write('<i>');
document.write(postcontent); if (standardstyling) document.write('</i>');}
else { if (standardstyling) document.write('<i>');
postcontent = postcontent.substring(0, numchars); var quoteEnd = postcontent.lastIndexOf(" ");
if (standardstyling) document.write('</i>');}}
if (!standardstyling) document.write('</div>'); if (standardstyling) document.write('<br/>');
document.write('</li>');}
document.write('</ol>');
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('<br/>');}
</script>
<script src="MASUKAN LINK ANDA/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
</div>
</div>
</div></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type='text/javascript' src='https://sites.google.com/site/jeritanblog/javascript/jquery.lazyload.mini.js?ver=1.5.0'></script>
<script type="text/javascript">
jQuery(document).ready(function($){
if (navigator.platform == "iPad") return;
jQuery("img").lazyload({
effect:"fadeIn",
placeholder: "http://img838.imageshack.us/img838/2931/loadingpagebudaknakal.jpg"
});
});
</script>
<style type="text/css">
.daftar_posting{list-style:none;margin-left:-5px;font-family:Droid Serif;font-size:16px;color:lime;text-align:left;}
.daftar_posting a{color:light blue;border-top:0px dotted white;border-bottom:0px dotted white;background:transparent url(http://i49.tinypic.com/27ziu80/gubhugreyot/images/bgRPli.gif) no-repeat 0 50%;padding-left:15px;}
.daftar_posting a:hover{color:white;}
</style>
<div style="margin:0px; padding:4px;border:2px solid #eee;background:#000;">
<div style="overflow:auto;background:#000;height:215px;">
<div style="width:590px;">
<script style="text/javascript">
var numposts = 1000;
var showpostsummary = false;
var standardstyling = true;
function showrecentposts(json) {document.write('<ol class="daftar_posting">');
for (var i = 0; i < numposts; i++) { document.write('<li>');
var entry = json.feed.entry[i]; var posttitle = entry.title.$t;
var posturl; if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href; break;}}
posttitle = posttitle.link(posturl);
if ("content" in entry) { var postcontent = entry.content.$t;}
else
if ("summary" in entry) { var postcontent = entry.summary.$t;}
else var postcontent = ""; var re = /<S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (!standardstyling) document.write('<div class="bbrecpost">');
if (standardstyling) document.write(posttitle);
if (!standardstyling) document.write('</div><div class="bbrecpostsum"">');
if (showpostsummary == true) { if (standardstyling) document.write('<br/>');
if (postcontent.length < numchars) { if (standardstyling) document.write('<i>');
document.write(postcontent); if (standardstyling) document.write('</i>');}
else { if (standardstyling) document.write('<i>');
postcontent = postcontent.substring(0, numchars); var quoteEnd = postcontent.lastIndexOf(" ");
if (standardstyling) document.write('</i>');}}
if (!standardstyling) document.write('</div>'); if (standardstyling) document.write('<br/>');
document.write('</li>');}
document.write('</ol>');
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('<br/>');}
</script>
<script src="MASUKAN LINK ANDA/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
</div>
</div>
</div></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type='text/javascript' src='https://sites.google.com/site/jeritanblog/javascript/jquery.lazyload.mini.js?ver=1.5.0'></script>
<script type="text/javascript">
jQuery(document).ready(function($){
if (navigator.platform == "iPad") return;
jQuery("img").lazyload({
effect:"fadeIn",
placeholder: "http://img838.imageshack.us/img838/2931/loadingpagebudaknakal.jpg"
});
});
</script>
<style type="text/css">
#toc-outer {
font:normal 11px/14px Arial,Sans-Serif;
color:black;
text-align:left;
margin:0px auto;
}
#loadingscript {
font-weight:bold;
font-size:20px;
text-align:center;
}
#loadingscript, .itemposts {
margin:0px 0px 2px;
height:auto;
overflow:hidden;
display:block;
background-color:#FDC20E;
border:1px solid #FC9B05;
padding:10px;
}
.itemposts h6 {
margin:0px 0px 10px;
font:normal 14px/16px Arial,Sans-Serif;
text-transform:uppercase;
color:black;
padding:0px 10px;
height:24px;
line-height:24px;
background-color:#FC9B05;
position:relative;
overflow:hidden;
}
.itemposts h6 a {
color:black;
text-decoration:none;
}
.itemposts h6:after {
content:"";
width:0px;
height:0px;
border:12px solid transparent;
border-top-color:black;
border-right-color:black;
position:absolute;
top:0px;
right:0px;
}
.itemposts img {
display: none
}
.itemposts .iteminside {
display: none
}
.itemposts .itemfoot {
clear:both;
padding:5px 10px 5px 20px;
margin:10px 0px 0px;
background-color:#222;
color:white;
font-style:italic;
position:relative;
overflow:hidden;
}
.itemposts .itemfoot:after {
content:"";
width:0px;
height:0px;
border:10px solid transparent;
border-left-color:#E52117;
border-top-color:#E52117;
position:absolute;
top:0px;
left:0px;
}
.itemposts .itemfoot a.itemrmore {
font-weight:bold;
color:#4B9540;
float:right;
text-decoration:none;
}
.itemposts .itemfoot a.itemrmore:hover {
text-decoration:underline;
}
#itempager {
padding:30px 0px;
background-color:black;
background-image:-webkit-repeating-linear-gradient(-45deg, #FDC20E 15px, #FDC20E 15px, #FDC20E 30px, black 30px, black 45px);
background-image:-moz-repeating-linear-gradient(-45deg, #FDC20E 15px, #FDC20E 15px, #FDC20E 30px, black 30px, black 45px);
background-image:-ms-repeating-linear-gradient(-45deg, #FDC20E 15px, #FDC20E 15px, #FDC20E 30px, black 30px, black 45px);
background-image:-o-repeating-linear-gradient(-45deg, #FDC20E 15px, #FDC20E 15px, #FDC20E 30px, black 30px, black 45px);
background-image:repeating-linear-gradient(-45deg, #FDC20E 15px, #FDC20E 15px, #FDC20E 30px, black 30px, black 45px);
border:4px solid #ccc;
}
#pagination, #totalposts {
display:block;
color:white;
text-shadow:0px 1px 0px black;
font:bold 10px Verdana,Arial,Sans-Serif;
padding:0px;
text-align:center;
background-color:#FDC20E;
padding:10px 15px;
}
#pagination {border-top:4px solid black;}
#totalposts {border-bottom:4px solid black;border-top:1px solid #FC9B05;}
#pagination span, #pagination a {
color:white;
display:inline;
margin:0 1px;
padding:3px 5px;
text-indent:0px;
background-color:#316F27;
text-decoration:none;
text-shadow:none;
}
#pagination a:hover {background-color:#666;}
#pagination span.actual {background-color:black;}
#pagination span.hidden {display:none;}
</style>
<script type="text/javascript">
showPostDate = true;
showComments = true;
idMode = true;
sortByLabel = false;
var labelSorter = "JQuery",
loadingText = "Loading...",
totalPostLabel = "Jumlah posting:",
jumpPageLabel = "Halaman",
commentsLabel = "Komentar",
rmoreText = "Lihat",
prevText = "Sebelumnya",
nextText = "Berikutnya",
siteUrl = "MASUKAN LINK ANDA DISINI",
postsperpage = 5,
numchars = 0,
imgBlank = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg";
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/blogger-archive-with-pagination.js" type="text/javascript">
</script>
#toc-outer {
font:normal 11px/14px Arial,Sans-Serif;
color:black;
text-align:left;
margin:0px auto;
}
#loadingscript {
font-weight:bold;
font-size:20px;
text-align:center;
}
#loadingscript, .itemposts {
margin:0px 0px 2px;
height:auto;
overflow:hidden;
display:block;
background-color:#FDC20E;
border:1px solid #FC9B05;
padding:10px;
}
.itemposts h6 {
margin:0px 0px 10px;
font:normal 14px/16px Arial,Sans-Serif;
text-transform:uppercase;
color:black;
padding:0px 10px;
height:24px;
line-height:24px;
background-color:#FC9B05;
position:relative;
overflow:hidden;
}
.itemposts h6 a {
color:black;
text-decoration:none;
}
.itemposts h6:after {
content:"";
width:0px;
height:0px;
border:12px solid transparent;
border-top-color:black;
border-right-color:black;
position:absolute;
top:0px;
right:0px;
}
.itemposts img {
display: none
}
.itemposts .iteminside {
display: none
}
.itemposts .itemfoot {
clear:both;
padding:5px 10px 5px 20px;
margin:10px 0px 0px;
background-color:#222;
color:white;
font-style:italic;
position:relative;
overflow:hidden;
}
.itemposts .itemfoot:after {
content:"";
width:0px;
height:0px;
border:10px solid transparent;
border-left-color:#E52117;
border-top-color:#E52117;
position:absolute;
top:0px;
left:0px;
}
.itemposts .itemfoot a.itemrmore {
font-weight:bold;
color:#4B9540;
float:right;
text-decoration:none;
}
.itemposts .itemfoot a.itemrmore:hover {
text-decoration:underline;
}
#itempager {
padding:30px 0px;
background-color:black;
background-image:-webkit-repeating-linear-gradient(-45deg, #FDC20E 15px, #FDC20E 15px, #FDC20E 30px, black 30px, black 45px);
background-image:-moz-repeating-linear-gradient(-45deg, #FDC20E 15px, #FDC20E 15px, #FDC20E 30px, black 30px, black 45px);
background-image:-ms-repeating-linear-gradient(-45deg, #FDC20E 15px, #FDC20E 15px, #FDC20E 30px, black 30px, black 45px);
background-image:-o-repeating-linear-gradient(-45deg, #FDC20E 15px, #FDC20E 15px, #FDC20E 30px, black 30px, black 45px);
background-image:repeating-linear-gradient(-45deg, #FDC20E 15px, #FDC20E 15px, #FDC20E 30px, black 30px, black 45px);
border:4px solid #ccc;
}
#pagination, #totalposts {
display:block;
color:white;
text-shadow:0px 1px 0px black;
font:bold 10px Verdana,Arial,Sans-Serif;
padding:0px;
text-align:center;
background-color:#FDC20E;
padding:10px 15px;
}
#pagination {border-top:4px solid black;}
#totalposts {border-bottom:4px solid black;border-top:1px solid #FC9B05;}
#pagination span, #pagination a {
color:white;
display:inline;
margin:0 1px;
padding:3px 5px;
text-indent:0px;
background-color:#316F27;
text-decoration:none;
text-shadow:none;
}
#pagination a:hover {background-color:#666;}
#pagination span.actual {background-color:black;}
#pagination span.hidden {display:none;}
</style>
<script type="text/javascript">
showPostDate = true;
showComments = true;
idMode = true;
sortByLabel = false;
var labelSorter = "JQuery",
loadingText = "Loading...",
totalPostLabel = "Jumlah posting:",
jumpPageLabel = "Halaman",
commentsLabel = "Komentar",
rmoreText = "Lihat",
prevText = "Sebelumnya",
nextText = "Berikutnya",
siteUrl = "MASUKAN LINK ANDA DISINI",
postsperpage = 5,
numchars = 0,
imgBlank = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg";
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/blogger-archive-with-pagination.js" type="text/javascript">
</script>
<script type="text/javascript">
showPostDate = true;
showComments = true;
idMode = true;
sortByLabel = false;
var labelSorter = "JQuery",
loadingText = "Loading...",
totalPostLabel = "Jumlah posting:",
jumpPageLabel = "Halaman",
commentsLabel = "Komentar",
rmoreText = "Selengkapnya ►",
prevText = "Sebelumnya",
nextText = "Berikutnya",
siteUrl = "MAKUKAN LINK ANDA DISINI",
postsperpage = 10,
numchars = 64,
imgBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM4k-4tAVtPp13rFgokO-DPw3U4JiVBNEqvh3IwWcY5J3TfyZEBnqPxhKujLWE4qsc3mUpDC3k8IYb_spLD1HUUujNE2Fiw_ASqn2oHHcrX4eAuEk7OnYt7XvSJUymGYlaB_XdYdABubU/s320/girl-xinh-goi-cam17.jpg";
</script> <script src="http://reader-download.googlecode.com/files/blogger-toc-with-pagination-v1.js" type="text/javascript">
</script> <style type="text/css">
#toc-outer {
font: normal 11px/14px Arial, Sans-Serif;
color: #666;
text-align: left;
margin: 0 auto;
padding: 15px;
background-color: white;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6)
}
#loadingscript {
background: #F6EFBB url(http://reader-download.googlecode.com/files/ajax-loader.gif) no-repeat 50% 46%;
padding: 10px;
font: bold 20px Georgia, Serif;
color: black;
height: 400px;
text-indent: -9999px;
-webkit-box-shadow: inset 0 0 0 5px #EAE0AD;
-moz-box-shadow: inset 0 0 0 5px #EAE0AD;
box-shadow: inset 0 0 0 5px #EAE0AD
}
.itemposts {
margin: 0 auto;
height: auto;
background-color: white;
overflow: hidden;
display: block
}
.itemposts h6 {
margin: 0 auto;
font: bold 14px/14px arial, Sans-Serif;
background-color: #EEE;
border-top: 1px solid #AAA;
padding: 10px 15px;
text-transform: uppercase;
color: white
}
.itemposts h6::before {
content: '';
position: absolute;
margin-left: -13px;
margin-top: -18px;
padding: 2px;
background: #FFF;
border: 5px solid #888;
border-radius: 100px;
-moz-border-radius: 100px;
-wbekit-border-radius: 100px;
}
.itemposts h6 a, .itemposts h6 a:visited {
color: #666;
text-decoration: none;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
margin-left: 10px;
}
.itemposts h6 a:hover {
color: #333;
}
.itemposts img {
float: left;
height: 72px;
width: 72px;
margin: 2px 10px 2px 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background-color: #fafafa;
border: 1px solid #dcdcdc;
padding: 4px
}
.itemposts .iteminside {
display: none
}
.itemposts .itemfoot {
clear: both;
display: none;
}
.itemposts .itemfoot a.itemrmore {
font-weight: bold;
color: #895F30;
float: right;
text-decoration: none
}
.itemposts .itemfoot a.itemrmore:hover {
color: #9BB009;
text-decoration: underline
}
#itempager {
background-color: #F2F0F1;
padding: 30px 0;
border-top: 1px solid #E5E5E5;
-webkit-box-shadow: inset 0 1px 0 white;
-moz-box-shadow: inset 0 1px 0 white;
box-shadow: inset 0 1px 0 white
}
#pagination, #totalposts {
color: #999;
font: bold 10px Verdana, Arial, Sans-Serif;
padding: 0;
margin-bottom: 10px;
text-align: center
}
#pagination span, #pagination a {
border: 1px solid #e5e5e5;
color: white;
display: inline;
margin: 0 1px;
padding: 2px 5px;
text-indent: 0;
background-color: #8899D0;
text-decoration: none
}
#pagination span.actual, #pagination a:hover {
background-color: #7483BC
}
#pagination span.hidden {
display: none
}
</style>
showPostDate = true;
showComments = true;
idMode = true;
sortByLabel = false;
var labelSorter = "JQuery",
loadingText = "Loading...",
totalPostLabel = "Jumlah posting:",
jumpPageLabel = "Halaman",
commentsLabel = "Komentar",
rmoreText = "Selengkapnya ►",
prevText = "Sebelumnya",
nextText = "Berikutnya",
siteUrl = "MAKUKAN LINK ANDA DISINI",
postsperpage = 10,
numchars = 64,
imgBlank = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM4k-4tAVtPp13rFgokO-DPw3U4JiVBNEqvh3IwWcY5J3TfyZEBnqPxhKujLWE4qsc3mUpDC3k8IYb_spLD1HUUujNE2Fiw_ASqn2oHHcrX4eAuEk7OnYt7XvSJUymGYlaB_XdYdABubU/s320/girl-xinh-goi-cam17.jpg";
</script> <script src="http://reader-download.googlecode.com/files/blogger-toc-with-pagination-v1.js" type="text/javascript">
</script> <style type="text/css">
#toc-outer {
font: normal 11px/14px Arial, Sans-Serif;
color: #666;
text-align: left;
margin: 0 auto;
padding: 15px;
background-color: white;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6)
}
#loadingscript {
background: #F6EFBB url(http://reader-download.googlecode.com/files/ajax-loader.gif) no-repeat 50% 46%;
padding: 10px;
font: bold 20px Georgia, Serif;
color: black;
height: 400px;
text-indent: -9999px;
-webkit-box-shadow: inset 0 0 0 5px #EAE0AD;
-moz-box-shadow: inset 0 0 0 5px #EAE0AD;
box-shadow: inset 0 0 0 5px #EAE0AD
}
.itemposts {
margin: 0 auto;
height: auto;
background-color: white;
overflow: hidden;
display: block
}
.itemposts h6 {
margin: 0 auto;
font: bold 14px/14px arial, Sans-Serif;
background-color: #EEE;
border-top: 1px solid #AAA;
padding: 10px 15px;
text-transform: uppercase;
color: white
}
.itemposts h6::before {
content: '';
position: absolute;
margin-left: -13px;
margin-top: -18px;
padding: 2px;
background: #FFF;
border: 5px solid #888;
border-radius: 100px;
-moz-border-radius: 100px;
-wbekit-border-radius: 100px;
}
.itemposts h6 a, .itemposts h6 a:visited {
color: #666;
text-decoration: none;
text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
margin-left: 10px;
}
.itemposts h6 a:hover {
color: #333;
}
.itemposts img {
float: left;
height: 72px;
width: 72px;
margin: 2px 10px 2px 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
background-color: #fafafa;
border: 1px solid #dcdcdc;
padding: 4px
}
.itemposts .iteminside {
display: none
}
.itemposts .itemfoot {
clear: both;
display: none;
}
.itemposts .itemfoot a.itemrmore {
font-weight: bold;
color: #895F30;
float: right;
text-decoration: none
}
.itemposts .itemfoot a.itemrmore:hover {
color: #9BB009;
text-decoration: underline
}
#itempager {
background-color: #F2F0F1;
padding: 30px 0;
border-top: 1px solid #E5E5E5;
-webkit-box-shadow: inset 0 1px 0 white;
-moz-box-shadow: inset 0 1px 0 white;
box-shadow: inset 0 1px 0 white
}
#pagination, #totalposts {
color: #999;
font: bold 10px Verdana, Arial, Sans-Serif;
padding: 0;
margin-bottom: 10px;
text-align: center
}
#pagination span, #pagination a {
border: 1px solid #e5e5e5;
color: white;
display: inline;
margin: 0 1px;
padding: 2px 5px;
text-indent: 0;
background-color: #8899D0;
text-decoration: none
}
#pagination span.actual, #pagination a:hover {
background-color: #7483BC
}
#pagination span.hidden {
display: none
}
</style>
Mau tahu cara membuat menu melayang ini? Ikuti langkah-langkah berikut ini:
1.Klik Rancangan/Tata Letak lalu Klik Tambah Gadget dan pilih HTML/JavaScript
<script src="http://sidebarmenu.googlecode.com/files/sidebarprototype.js" type="text/javascript"></script>
<script src="http://sidebarmenu.googlecode.com/files/sidebareffets.js" type="text/javascript"></script>
<script src="http://sidebarmenu.googlecode.com/files/sidebarmenu.js" type="text/javascript"></script>
<style>
body{
font-size:75%;
}
a{
outline: none;
}
a:active{
outline: none;
}
#sideBar{
text-align:left;
}
#sideBar h2{
color:#F0FFFF;
font-size:110%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold !important;
}
#sideBar h2 span{
font-size:125%;
font-weight:normal !important;
}
#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#sideBar li{
margin:0px 5px 5px 10px;
padding: 0 0 0 10px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
color:#FFFFFF;
}
#sideBar li a{
width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0 0 0 20px;
width:100%;
}
#sideBar li a:hover{
color:#FFFF00;
text-decoration:underline;
}
#sideBar{
position: fixed;
width: auto;
height: auto;
top: 140px;
left:0px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj85e7ddr23cX-bmcooEOLgmJfIEk-EnXUUtee1TmVDM4b5EXR9fGBn5bhJ-gVduBfRj_LV_vEOs8HiihobewrwHtyfauQEYPBN6u1ni2uqFvvvr6bWEGPPiLzHZcVaiQr2qbrzR9nkwzM-/s320/left.collapse.border.png);
background-position:top right;
background-repeat:repeat-y;
}
#sideBarTab{
float:left;
height:137px;
width:28px;
}
#sideBarTab img{
border:0px solid #FFFFFF;
}
#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:320px;
}
#sideBarContentsInner{
width:200px;
}</style>
<div id="sideBar">
<div id="sideBarContents" style="display:none;">
<div id="sideBarContentsInner">
<h2>Left<span>Menu</span></h2>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
</ul>
</div> </div>
<a id="sideBarTab" href="#"><img alt="sideBar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPzQ_RFA_ZD08xllg-oorwqqWhKTnYPmBuyFpUWHm2X6A-yJ4he6n7qOQbaen4aZkDte2H-fy571-Cn5X-YTdCL24SWOfPA0o47MPYjPGzxNsb2VcP9bP9HYq54fqqBj7UuOekvruUhZHX/s320/sidebarcollapse.png" title="sideBar" /></a>
</div>
<script src="http://sidebarmenu.googlecode.com/files/sidebareffets.js" type="text/javascript"></script>
<script src="http://sidebarmenu.googlecode.com/files/sidebarmenu.js" type="text/javascript"></script>
<style>
body{
font-size:75%;
}
a{
outline: none;
}
a:active{
outline: none;
}
#sideBar{
text-align:left;
}
#sideBar h2{
color:#F0FFFF;
font-size:110%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold !important;
}
#sideBar h2 span{
font-size:125%;
font-weight:normal !important;
}
#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#sideBar li{
margin:0px 5px 5px 10px;
padding: 0 0 0 10px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
color:#FFFFFF;
}
#sideBar li a{
width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0 0 0 20px;
width:100%;
}
#sideBar li a:hover{
color:#FFFF00;
text-decoration:underline;
}
#sideBar{
position: fixed;
width: auto;
height: auto;
top: 140px;
left:0px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj85e7ddr23cX-bmcooEOLgmJfIEk-EnXUUtee1TmVDM4b5EXR9fGBn5bhJ-gVduBfRj_LV_vEOs8HiihobewrwHtyfauQEYPBN6u1ni2uqFvvvr6bWEGPPiLzHZcVaiQr2qbrzR9nkwzM-/s320/left.collapse.border.png);
background-position:top right;
background-repeat:repeat-y;
}
#sideBarTab{
float:left;
height:137px;
width:28px;
}
#sideBarTab img{
border:0px solid #FFFFFF;
}
#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:320px;
}
#sideBarContentsInner{
width:200px;
}</style>
<div id="sideBar">
<div id="sideBarContents" style="display:none;">
<div id="sideBarContentsInner">
<h2>Left<span>Menu</span></h2>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
</ul>
</div> </div>
<a id="sideBarTab" href="#"><img alt="sideBar" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPzQ_RFA_ZD08xllg-oorwqqWhKTnYPmBuyFpUWHm2X6A-yJ4he6n7qOQbaen4aZkDte2H-fy571-Cn5X-YTdCL24SWOfPA0o47MPYjPGzxNsb2VcP9bP9HYq54fqqBj7UuOekvruUhZHX/s320/sidebarcollapse.png" title="sideBar" /></a>
</div>
3.Silahkan ganti kode berikut sesuai dengan keinginan Anda:
<a href="#">Link One</a>
<a href="#">Link Two</a>
<a href="#">Link Three</a>
<a href="#">Link Four</a>
Keterangan:
# = Alamat Link
Link One/Two/Three/Four= Nama Link
4. Simpan
Selamat Mencoba dan semoga bermanfaat. Good luck guys. ^_^
Berikut cara membuat menu daun.
1. Login ke Blog kamu.
2. Pilih Add Gadget, pilih HTML JavaScript. Copy kode dibawah ini
<style type="text/css">
nav {
width: 960px;
height: 100px;
margin: 120px auto;
text-align: center;
}
.top-menu li {
display: inline-block;
text-align: center;
margin: 30px 5px;
position: relative;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
.top-menu li:hover {
margin: 30px 20px;
}
.top-menu li:active {
margin: 30px 33px;
}
.top-menu li a {
width: 100px;
height: 100px;
z-index: 9999;
position: absolute;
top: 35px;
font-weight: bold;
display: block;
text-decoration: none;
font-size: 20px;
color: #fff;
text-shadow: 0px 1px 1px rgba(0,0,0,0.4), 0px 4px 6px rgba(0,0,0,0.1), 0px 9px 11px rgba(0,0,0,0.1);
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
}
.top-menu li:active a {
font-size: 26px;
top: 30px;
text-shadow: none;
}
.top-menu li div.menu-item {
width: 100px;
height: 100px;
display: block;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-webkit-border-top-left-radius: 100px;
-webkit-border-bottom-right-radius: 100px;
-moz-border-radius-topleft: 100px;
-moz-border-radius-bottomright: 100px;
border-top-left-radius: 100px;
border-bottom-right-radius: 100px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.top-menu li:hover div.menu-item{
-webkit-border-top-left-radius: 80px;
-webkit-border-bottom-right-radius: 80px;
-moz-border-radius-topleft: 80px;
-moz-border-radius-bottomright: 80px;
border-top-left-radius: 80px;
border-bottom-right-radius: 80px;
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-o-transform: rotate(225deg);
}
.top-menu li:active div.menu-item{
-webkit-border-top-left-radius: 50px;
-webkit-border-bottom-right-radius: 50px;
-moz-border-radius-topleft: 50px;
-moz-border-radius-bottomright: 50px;
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
}
#home { background: #41D05F; }
#cataloge { background: #E42B2B;}
#price { background: #ff8400; }
#about { background: #a800ff; }
#contact { background: #49a7f3; }
</style>
<nav>
<ul class="top-menu">
<li><a href=#>Home</a><div class="menu-item" id="home"></div></li>
<li><a href=#>Catalog</a><div class="menu-item" id="cataloge"></div></li>
<li><a href=#>Price</a><div class="menu-item" id="price"></div></li>
<li><a href=#>About</a><div class="menu-item" id="about"></div></li>
<li><a href=#>Contact</a><div class="menu-item" id="contact"></div></li>
</ul>
</nav>
nav {
width: 960px;
height: 100px;
margin: 120px auto;
text-align: center;
}
.top-menu li {
display: inline-block;
text-align: center;
margin: 30px 5px;
position: relative;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}
.top-menu li:hover {
margin: 30px 20px;
}
.top-menu li:active {
margin: 30px 33px;
}
.top-menu li a {
width: 100px;
height: 100px;
z-index: 9999;
position: absolute;
top: 35px;
font-weight: bold;
display: block;
text-decoration: none;
font-size: 20px;
color: #fff;
text-shadow: 0px 1px 1px rgba(0,0,0,0.4), 0px 4px 6px rgba(0,0,0,0.1), 0px 9px 11px rgba(0,0,0,0.1);
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
}
.top-menu li:active a {
font-size: 26px;
top: 30px;
text-shadow: none;
}
.top-menu li div.menu-item {
width: 100px;
height: 100px;
display: block;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-webkit-border-top-left-radius: 100px;
-webkit-border-bottom-right-radius: 100px;
-moz-border-radius-topleft: 100px;
-moz-border-radius-bottomright: 100px;
border-top-left-radius: 100px;
border-bottom-right-radius: 100px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.top-menu li:hover div.menu-item{
-webkit-border-top-left-radius: 80px;
-webkit-border-bottom-right-radius: 80px;
-moz-border-radius-topleft: 80px;
-moz-border-radius-bottomright: 80px;
border-top-left-radius: 80px;
border-bottom-right-radius: 80px;
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
-o-transform: rotate(225deg);
}
.top-menu li:active div.menu-item{
-webkit-border-top-left-radius: 50px;
-webkit-border-bottom-right-radius: 50px;
-moz-border-radius-topleft: 50px;
-moz-border-radius-bottomright: 50px;
border-top-left-radius: 50px;
border-bottom-right-radius: 50px;
}
#home { background: #41D05F; }
#cataloge { background: #E42B2B;}
#price { background: #ff8400; }
#about { background: #a800ff; }
#contact { background: #49a7f3; }
</style>
<nav>
<ul class="top-menu">
<li><a href=#>Home</a><div class="menu-item" id="home"></div></li>
<li><a href=#>Catalog</a><div class="menu-item" id="cataloge"></div></li>
<li><a href=#>Price</a><div class="menu-item" id="price"></div></li>
<li><a href=#>About</a><div class="menu-item" id="about"></div></li>
<li><a href=#>Contact</a><div class="menu-item" id="contact"></div></li>
</ul>
</nav>
Suka dengan postingan ini.?
Ditulis Oleh : asdharsyaputra di label Trik Blogger : Facebook Aku
Artikel Cara membuat menu keren di blog ini ditulis oleh asdharsyaputra pada hari Minggu, 24 Juni 2012. Terimakasih atas kunjungan Anda pada blog ini. Kritik dan saran tentang Cara membuat menu keren di blog dapat Anda sampaikan melalui kotak komentar dibawah ini. Dan jangan lupa di like yea kawan. Terima Kasih...
Backlink Please !
| URL |
| Code For Forum |
| HTML Code |
Di Like Dulu Gan Sebelum Pergi..!!
Kritik Dan Saran Sobat Sangat Membantu Blog ini Dalam Menulis Artikel Berikutnya
Nama : Asdhar Syaputra