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/AVvXsEh8dfBqgiCeX0BwyzweCMKG-RIEzWzsFSyV6SouGELwitT2pjERuy20G-ewSviC5o2izp2F0Rlbg_oSKMhPRNPQqAFppFGmN6M4mgot9-90cxwKlBDkOGuPPohv2-3qwVEpI6bW5wNVWOE/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/AVvXsEhqC4D2-V1XIubU8KW7U5u0nBy0oHIw2WU9BHzGSiSrt6BPg3JlehT7H1DK-ZJIdNbSBaWaoGSs1cx-bV3cAuGevDS9VPeonzLPktGL5D0Y-wYJT8enV79lzxdtK4_OjN4AbpmQjtYK-x0/s75/sb77-image1.jpg);}
ul#menu-fly li:nth-child(2) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmB_uR4-4qfPv26jlWoTtRAXANbOVxdkDnsDN-J1YIqeqb66MMLF4GJY6GaEYOhya82PrWTehlzwoiLPKSXR0rLYGvVplM4yDASen6bJSAHrz17FZTNpPpuA3_MNkhl9RCxEerYdW9hlc/s75/sb77-image2.png);
}
ul#menu-fly li:nth-child(3) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid78uJ9mxkeKPwsJvAj59OH0NPnyAo-hgWQjmWWl6bd32jUVKfH10LvAME8E2mDEfrUTwG-ZFIrFUCMgKbpr0kg3ddXTYRyQvih9nZKqlpDtlen-LkTriizFS0NVW-OnduI8t2WcD6VsI/s75/sb77-image3.png);
}
ul#menu-fly li:nth-child(4) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2m5N5pRzJeW79flVi4PcWuAtsgzWmucq5EmihNycAppQyyTooj2vfrzS6JPnY-5xbsSAgkI9h0OCx0HTPnM3YLvhUUyCVBxCTq0MuAHRCQfxN91oluFuCoN6-Z_c4R62tkx4iRvgLKhs/s75/sb77-image4.jpg);
}
ul#menu-fly li:nth-child(5) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE-BApZWfGAPDL7tOpERE7tKcJnbesWW0IO-EBwQ0LLZlwuGrsmoB9i7wJnJBAA08NAEqNlraRQq6cBmblMClsO2wZQaMehdRePzeEoIYrCpd_ZRvmb7u0KO8BkqG2KbNO-MPWXoKtv4g/s75/sb77-image5.png);
}
ul#menu-fly li:nth-child(6) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjltcWObCmW03urNdIoNYOWMZI7h84MQwE7azi8N7RMlLAiiIz1HYbrOrL0V78xOCNUJ1HGmKQOfcQrKr84fnBvHboT-O2FQLmw7bo7JVIWz-lfmE_9Y7-bT-Xvk_vxd0V_r865_EtAzcM/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/AVvXsEj_KdsiLD8C5XCIxeQ8t-oc75kRAmi5D9Jhvbh07rvkrAJl-Cco9HEeYz6bytbpcznx-8W8GQ-ce95WY-g0e7H2Vy002HCQphQwaHHgO11qSt-02wjJQyGYRW7GfJkc_qutx3sGyRui9Aho/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/AVvXsEh8dfBqgiCeX0BwyzweCMKG-RIEzWzsFSyV6SouGELwitT2pjERuy20G-ewSviC5o2izp2F0Rlbg_oSKMhPRNPQqAFppFGmN6M4mgot9-90cxwKlBDkOGuPPohv2-3qwVEpI6bW5wNVWOE/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/AVvXsEhqC4D2-V1XIubU8KW7U5u0nBy0oHIw2WU9BHzGSiSrt6BPg3JlehT7H1DK-ZJIdNbSBaWaoGSs1cx-bV3cAuGevDS9VPeonzLPktGL5D0Y-wYJT8enV79lzxdtK4_OjN4AbpmQjtYK-x0/s75/sb77-image1.jpg);}
ul#menu-fly li:nth-child(2) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmB_uR4-4qfPv26jlWoTtRAXANbOVxdkDnsDN-J1YIqeqb66MMLF4GJY6GaEYOhya82PrWTehlzwoiLPKSXR0rLYGvVplM4yDASen6bJSAHrz17FZTNpPpuA3_MNkhl9RCxEerYdW9hlc/s75/sb77-image2.png);
}
ul#menu-fly li:nth-child(3) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid78uJ9mxkeKPwsJvAj59OH0NPnyAo-hgWQjmWWl6bd32jUVKfH10LvAME8E2mDEfrUTwG-ZFIrFUCMgKbpr0kg3ddXTYRyQvih9nZKqlpDtlen-LkTriizFS0NVW-OnduI8t2WcD6VsI/s75/sb77-image3.png);
}
ul#menu-fly li:nth-child(4) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2m5N5pRzJeW79flVi4PcWuAtsgzWmucq5EmihNycAppQyyTooj2vfrzS6JPnY-5xbsSAgkI9h0OCx0HTPnM3YLvhUUyCVBxCTq0MuAHRCQfxN91oluFuCoN6-Z_c4R62tkx4iRvgLKhs/s75/sb77-image4.jpg);
}
ul#menu-fly li:nth-child(5) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE-BApZWfGAPDL7tOpERE7tKcJnbesWW0IO-EBwQ0LLZlwuGrsmoB9i7wJnJBAA08NAEqNlraRQq6cBmblMClsO2wZQaMehdRePzeEoIYrCpd_ZRvmb7u0KO8BkqG2KbNO-MPWXoKtv4g/s75/sb77-image5.png);
}
ul#menu-fly li:nth-child(6) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjltcWObCmW03urNdIoNYOWMZI7h84MQwE7azi8N7RMlLAiiIz1HYbrOrL0V78xOCNUJ1HGmKQOfcQrKr84fnBvHboT-O2FQLmw7bo7JVIWz-lfmE_9Y7-bT-Xvk_vxd0V_r865_EtAzcM/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/AVvXsEj_KdsiLD8C5XCIxeQ8t-oc75kRAmi5D9Jhvbh07rvkrAJl-Cco9HEeYz6bytbpcznx-8W8GQ-ce95WY-g0e7H2Vy002HCQphQwaHHgO11qSt-02wjJQyGYRW7GfJkc_qutx3sGyRui9Aho/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>
Artikel Terkait
A M A R A J E N