LIHAT PENAMPAKAN MENU PALING ATAS DARI POSTING YANG SEDANG ANDA BUKA INIKode yang digunakan untuk membuat Menu Fly Swing adalah, silahkan anda kreasikan sendiri :
<html>
<head>
<style type="text/css">
body {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR_dXJXCood560XEzIEGA7RsLucN7PuR4t2aFhgf_eMe2x6cM5CcyPONUpUZTRQYMF2Fq3vZwtkHDpWYhvT7YhPtkbhNaX8WyeCACwYD6Y_ieq9zdwJeP7zQIs_o0554n7Av8nH7bSWRg/s1600/1d.jpg) no-repeat center center;color:#660000;top:-3.5em;}
ul#menu-fly {
position:fixed;
margin:0px;
padding:0px;
top:0px;
right:5px;
list-style:none;
z-index:999999;
width:840px;
font:normal 11px Arial,Sans-Serif;
-webkit-animation:2s flyout ease-in-out;
-moz-animation:2s flyout ease-in-out;
-ms-animation:2s flyout ease-in-out;
animation:2s flyout ease-in-out;
}
ul#menu-fly li {
width:103px;
display:inline;
float:left;
margin:0 0 0 2px;
}
ul#menu-fly li a {
display:block;
float:left;
margin-top:-78px;
width:100px;
height:22px;
background:black;
background-repeat:no-repeat;
background-position:50% 150px;
border:2px solid #e6e6e6;
-webkit-box-shadow:0 1px 2px rgba(11, 83, 148,.5);
-moz-box-shadow:0 1px 2px rgba(11, 83, 148,.5);
box-shadow:0 1px 2px rgba(11, 83, 148,.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#menu-fly li a:hover {
margin-top:-4px;
background-position:50% 10px;
color:lime;
font:bold 13px/normal Georgia;
position:relative;
}
ul#menu-fly 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#menu-fly li:nth-child(1) a {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxuuXIDk3n_BUVyXjJGVy1F2iF5S1YNZsqeasS4wgCaoiV1OrX8xo3Fgmr3sJfY5e19G-WlyLmp9IQrMtVKBwTFlzxzl4q2w9ik7Rhso_AK7NrmDC-zr62IHm_67Ir_U9tIhE6faqlNnY/s75/sb77-image1.jpg);}
ul#menu-fly li:nth-child(2) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibeFxIfql_bFMhj_MxJgU5InnaBFPYwub45tY9i0kfgh7w4AtebiyW18nNC6NIV0BqoRbdbk326BlkvE6ah6CSCgkFRqWX0xR847leB8fyDs78Kn-CCz6XiH2EF8qxDMqeGcxmDtrG6k8/s75/sb77-image2.png);
}
ul#menu-fly li:nth-child(3) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg39r3d5l7FbSL24ISqH8uDaNgoEFL1mgt-xCdBAG1ETh-jw6DDU5Qp0LSxKCT7u9LIroElNPxF-TUlYK1q2vnkMWWUF9rgzOa6mkiFA3k-ZXjbM6w11w3CNALd9HO3SYOrVTkufg5kav0/s75/sb77-image3.png);
}
ul#menu-fly li:nth-child(4) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7LieiDjeZW0vjzTUZ5wRqcqofLd65eWbrTt0hoZWRMv8vFrWjHeAIQoWeuM5Tqz99lyxsQYdw4TlMn5duOyUuwp7Kc4kGsib5BDY-QYFVSEsjBS2oK63MAd09IMeFIIAvfbgijxUHWgM/s75/sb77-image4.jpg);
}
ul#menu-fly li:nth-child(5) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuKV92lJn3czb_UzouULo7TDS-ZPwInVM9lsYc9rlgFWhMMWx1T_HntEkWQFSdUAyLPV1EY_hTIOjkno4TsHIxAJwmQGUnNkxi8aviB3AAN_WCiVtA9TpFGF1TH0YX7G3BQv0En3xlIfg/s75/sb77-image5.png);
}
ul#menu-fly li:nth-child(6) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPJZHOecisI-LK5T6QcFnWcLrJfFd0trH_vaO2SX_kyi7_snZJqfSW2Q4Md_SEhsKLc5EXwbWQms-WLuytaKOHwIDHX3Ve9j6Q4HbPYfsk_0D9u6Ge6bxN5cTxlPfT4Ajj6heBjgJoF-E/s75/sb77-image6.jpg);
}
@-webkit-keyframes flyout {
from{margin-right:-1000px;}
to {margin-right:0px;}
}
@-moz-keyframes flyout {
from{margin-right:-1000px;}
to {margin-right:0px;}
}
@-ms-keyframes flyout {
from{margin-right:-1000px;}
to {margin-right:0px;}
}
@keyframes flyout {
from{margin-right:-1000px;}
to {margin-right:0px;}
}
.arrow {margin:-1.3em 0 0 33%}
</style><br />
</head>
<body>
<ul id='menu-fly'><li><a href='#'>Daftar Menu</a></li>
<li><a href='#'>Home</a></li>
<li><a href='#'>Tips Blog</a></li>
<li><a href='#'>Widget</a></li>
<li><a href='#'>CSS</a></li>
<li><a href='#'>Gambar</a></li>
</ul>
<br /><br /><br />
<div class="arrow" align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjolwZ8lthU22t6wyaKO4EPCN_zbFpaFEM8ePzvlbMu2xtJN_ij3zcZn6fpVUQI6LVI41CUM_4i6PEdawt0u6GTvvq5JQApFPMW38sNlTb8RDxxR-PDF7tdpNMuVZ0xhweQ5NhrVhzoiC2c/s1600/back+to+top10.gif"/> LIHAT PENAMPAKAN MENU PALING ATAS DARI POSTING YANG SEDANG ANDA BUKA INI</div>
<div style='clear: both;'></div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'><span class='post-icons'>
</span>
</div>
<div class='post-footer-line post-footer-line-2'></div>
<div class='post-footer-line post-footer-line-3'></div>
</div>
<div class='comments' id='comments'>
<a name='comments'></a>
<div id='backlinks-container'>
<div id='Blog1_backlinks-container'>
</div>
</div>
</div>
</body>
</html>
<head>
<style type="text/css">
body {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR_dXJXCood560XEzIEGA7RsLucN7PuR4t2aFhgf_eMe2x6cM5CcyPONUpUZTRQYMF2Fq3vZwtkHDpWYhvT7YhPtkbhNaX8WyeCACwYD6Y_ieq9zdwJeP7zQIs_o0554n7Av8nH7bSWRg/s1600/1d.jpg) no-repeat center center;color:#660000;top:-3.5em;}
ul#menu-fly {
position:fixed;
margin:0px;
padding:0px;
top:0px;
right:5px;
list-style:none;
z-index:999999;
width:840px;
font:normal 11px Arial,Sans-Serif;
-webkit-animation:2s flyout ease-in-out;
-moz-animation:2s flyout ease-in-out;
-ms-animation:2s flyout ease-in-out;
animation:2s flyout ease-in-out;
}
ul#menu-fly li {
width:103px;
display:inline;
float:left;
margin:0 0 0 2px;
}
ul#menu-fly li a {
display:block;
float:left;
margin-top:-78px;
width:100px;
height:22px;
background:black;
background-repeat:no-repeat;
background-position:50% 150px;
border:2px solid #e6e6e6;
-webkit-box-shadow:0 1px 2px rgba(11, 83, 148,.5);
-moz-box-shadow:0 1px 2px rgba(11, 83, 148,.5);
box-shadow:0 1px 2px rgba(11, 83, 148,.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#menu-fly li a:hover {
margin-top:-4px;
background-position:50% 10px;
color:lime;
font:bold 13px/normal Georgia;
position:relative;
}
ul#menu-fly 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#menu-fly li:nth-child(1) a {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxuuXIDk3n_BUVyXjJGVy1F2iF5S1YNZsqeasS4wgCaoiV1OrX8xo3Fgmr3sJfY5e19G-WlyLmp9IQrMtVKBwTFlzxzl4q2w9ik7Rhso_AK7NrmDC-zr62IHm_67Ir_U9tIhE6faqlNnY/s75/sb77-image1.jpg);}
ul#menu-fly li:nth-child(2) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibeFxIfql_bFMhj_MxJgU5InnaBFPYwub45tY9i0kfgh7w4AtebiyW18nNC6NIV0BqoRbdbk326BlkvE6ah6CSCgkFRqWX0xR847leB8fyDs78Kn-CCz6XiH2EF8qxDMqeGcxmDtrG6k8/s75/sb77-image2.png);
}
ul#menu-fly li:nth-child(3) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg39r3d5l7FbSL24ISqH8uDaNgoEFL1mgt-xCdBAG1ETh-jw6DDU5Qp0LSxKCT7u9LIroElNPxF-TUlYK1q2vnkMWWUF9rgzOa6mkiFA3k-ZXjbM6w11w3CNALd9HO3SYOrVTkufg5kav0/s75/sb77-image3.png);
}
ul#menu-fly li:nth-child(4) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7LieiDjeZW0vjzTUZ5wRqcqofLd65eWbrTt0hoZWRMv8vFrWjHeAIQoWeuM5Tqz99lyxsQYdw4TlMn5duOyUuwp7Kc4kGsib5BDY-QYFVSEsjBS2oK63MAd09IMeFIIAvfbgijxUHWgM/s75/sb77-image4.jpg);
}
ul#menu-fly li:nth-child(5) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuKV92lJn3czb_UzouULo7TDS-ZPwInVM9lsYc9rlgFWhMMWx1T_HntEkWQFSdUAyLPV1EY_hTIOjkno4TsHIxAJwmQGUnNkxi8aviB3AAN_WCiVtA9TpFGF1TH0YX7G3BQv0En3xlIfg/s75/sb77-image5.png);
}
ul#menu-fly li:nth-child(6) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPJZHOecisI-LK5T6QcFnWcLrJfFd0trH_vaO2SX_kyi7_snZJqfSW2Q4Md_SEhsKLc5EXwbWQms-WLuytaKOHwIDHX3Ve9j6Q4HbPYfsk_0D9u6Ge6bxN5cTxlPfT4Ajj6heBjgJoF-E/s75/sb77-image6.jpg);
}
@-webkit-keyframes flyout {
from{margin-right:-1000px;}
to {margin-right:0px;}
}
@-moz-keyframes flyout {
from{margin-right:-1000px;}
to {margin-right:0px;}
}
@-ms-keyframes flyout {
from{margin-right:-1000px;}
to {margin-right:0px;}
}
@keyframes flyout {
from{margin-right:-1000px;}
to {margin-right:0px;}
}
.arrow {margin:-1.3em 0 0 33%}
</style><br />
</head>
<body>
<ul id='menu-fly'><li><a href='#'>Daftar Menu</a></li>
<li><a href='#'>Home</a></li>
<li><a href='#'>Tips Blog</a></li>
<li><a href='#'>Widget</a></li>
<li><a href='#'>CSS</a></li>
<li><a href='#'>Gambar</a></li>
</ul>
<br /><br /><br />
<div class="arrow" align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjolwZ8lthU22t6wyaKO4EPCN_zbFpaFEM8ePzvlbMu2xtJN_ij3zcZn6fpVUQI6LVI41CUM_4i6PEdawt0u6GTvvq5JQApFPMW38sNlTb8RDxxR-PDF7tdpNMuVZ0xhweQ5NhrVhzoiC2c/s1600/back+to+top10.gif"/> LIHAT PENAMPAKAN MENU PALING ATAS DARI POSTING YANG SEDANG ANDA BUKA INI</div>
<div style='clear: both;'></div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'><span class='post-icons'>
</span>
</div>
<div class='post-footer-line post-footer-line-2'></div>
<div class='post-footer-line post-footer-line-3'></div>
</div>
<div class='comments' id='comments'>
<a name='comments'></a>
<div id='backlinks-container'>
<div id='Blog1_backlinks-container'>
</div>
</div>
</div>
</body>
</html>
