Blog Budak Bungo: Cara Membuat Menu Hidden di Blog

Pertama anda harus Login terlebih dahulu ke akun Bloger anda
Kemudian ke Rancangan -> Edit Html
kemudian cari kode ]]></b:skin> salin kode berikut di bawah ini ...

ul#navigation {
position:fixed; margin:0px;
padding:0px;
top:0px; right:10px;
list-style:none;
z-index:999999;
width:820px;
font:normal 11px Arial,Sans-Serif;
-webkit-animation:2s fxhompinav ease-in-out;
-moz-animation:2s fxhompinav ease-in-out;
-ms-animation:2s fxhompinav ease-in-out;
animation:2s fxhompinav ease-in-out;
} ul#navigation li {
width:103px;
display:inline;
float:left;
margin:0 0 0 2px;
}
ul#navigation li a {
display:block; float:left;
margin-top:-78px;
width:100px;
height:22px;
background-color:#9E242C;
background-repeat:no-repeat;
background-position:50% 150px;
border:3px solid #303030;
-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
-khtml-border-bottom-right-radius:10px;
-khtml-border-bottom-left-radius:10px;
border-radius:0px 0px 10px 10px;
color:#ccc;
text-decoration:none;
text-align:center;
text-shadow:0 1px 1px #000;
padding-top:85px;
-webkit-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
-moz-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
-o-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
}
ul#navigation li a:hover {
margin-top:-3px;
background-position:50% 10px;
color:#fff; position:relative;
}
ul#navigation li a:hover:after {
content:""; width:0px;
height:0px;
position:absolute;
top:100%;
left:45%;
margin-top:-10px;
border-width:5px;
border-style:solid;
border-color:transparent transparent #e6e6e6 transparent;
}
ul#navigation li:nth-child(1) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkjL88jlM6YXLJeuygwBhF29KS7j0I9qwG4B9sqNHQhdjEZFYnJlh84AYQNpGMVzM7RFDNNhyJG8n-BHUl9DGCh70iPLwSdaZ1AmPtMQELpON0lOtOM2-j0RZB-q3uxBlDxOPD34ZOQus/s1600/home.png);
}
ul#navigation li:nth-child(2) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieJfzqXYkpfppwZRha42sFq-Ac2mzAqO7ENHGxJJ-xVOKu3TEuKY99LySfjCnD1r1GS5MdBjhePb2yZ2Qyi7lFpMawOpSe38b58jtcK35kY2rarmMjeemwxVUA60H2gdtiQuVHFTBfqFw/s1600/user.png);
}
ul#navigation li:nth-child(3) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgelomxXtJwqqXIhoZp20KCkriN-9leTYz7_dKbQnsY2VNXpxKNBzVjcp_SIzVynJ7JLU2-ZM5iV_KByaw5Kg6c81gGaqgrwZRwknNFglvXGCfYbP1eaks3YMXJaFPbRoqsdTSG4mdx6Xk/s1600/mail.png);
}
ul#navigation li:nth-child(4) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCExQecnrZatkyOfonZH4WhIr2MUIUJo-cb_HTUNIAwn5BczM3Uw1UWqE1ilaZXDlGVp3BmTNp8LzT32Fj9iQ32jzYHZ12zEZhrvmtPWey2Mhezb6XeyGoP00n-KK0d05xaR-wDf49RR4/s1600/rss.png);
} ul#navigation li:nth-child(5) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3rQ8_PxiDG7q-y3R1JAcYwEBKnsFUutIhizK4DuSLno_Vc245siXvbfwgjrqjzBclPz0Ts8sFkv1P4gzjiXEKqgBnhM2onHtzDVpGF_TkjP9Ou2OBtHMNeIFmNTwEgKtCGylyNZo8sEk/s1600/link.png);
}
ul#navigation li:nth-child(6) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPuk_nbSWAbd1r8YQ2miy3WetJvLrYj-BL8_07NTEjKOvNvy3k0z9qE3-fC-C0zg6e_YY_CXILPCyqDKqzjrpBkhcWCNedNry_-d__yjW1bS8QEqhdE85sQ6eMOnjNdCFzd2SaiSXIXnM/s1600/color.png);
}
@-webkit-keyframes fxhompinav {
from{margin-right:-1000px;} to {margin-right:0px;}
}
@-moz-keyframes fxhompinav {
from{margin-right:-1000px;} to {margin-right:0px;}
}
@-ms-keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;}
}
@keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;}
}

Selanjutnya cari kode dan letakan kode dibawah ini danletakan diatasnya :

LALU SIMPAN TEMPLE ANDA

Blog Budak Bungo

Pages

Wednesday, 6 March 2013

Cara Membuat Menu Hidden di Blog

No comments:

Post a Comment