Home
Cara Membuat Fixed Floating Menu, adalah sebuah menu yang mengambang yang mengikuti alur scroll saat mouse meng scrolling halaman. Menu ini akan selalu mengikuti alur scroll.
Kali ini kita akan membahas cara membuat fixed floating menu, dimana arti fixed disini adalah "tetap", jadi menu mengambang kali ini bersifat tetap, dan kita akan membuatnya dibawah halaman persis di dekat footer.
Langkah Pertama : Buka Blog kalian, kemudian Pilih Template, lalu edit html, dan jangan lupa untuk mencentang Expand Template
Langkah Kedua : CTRL+F (Pengguna firefox), buat yang belum tau ini adalah fitur pencarian yang akan tampil persis di kiri bawah monitor kalian. Kemudian kalian cari tag berikut ini]]></b:skin>. Lalu kalian copy paste script berikut ini kemudian kalian letakan diatas tag]]></b:skin>
#menu_footer { /* This will make your footer stay where it is */
background: none repeat scroll 0 0 #1D1D1D;
border: 1px solid rgba(0, 0, 0, 0.3);
bottom: 0;
font-family: Arial, Helvetica, sans-serif;
height: 40px;
left: 50%;
margin: 0 auto 0 -490px;
padding: 0 10px;
position: fixed;
text-shadow: 1px 1px 1px #000000;
width: 960px;
}
/* border curves */
#menu_footer {
-moz-border-radius: 10px 10px 0px 0px;
-webkit-border-radius: 10px 10px 0px 0px;
border-radius: 10px 10px 0px 0px;
}
/* hover effect */
#smenu_footer:hover {
background: none repeat scroll 0 0 #2b2a2a;
}
/* shadow for the footer*/
#menu_footer {
-moz-box-shadow:0px 0px 11px #191919;
-webkit-box-shadow:0px 0px 11px #191919;
box-shadow:0px 0px 11px #191919;
}
#footer_menu {
margin: 0;
padding: 0;
width:auto;
}
#footer_menu li {
list-style: none;
float: left;
font-size:12px;
padding: 12px 14px 14px 14px;
border-right:1px solid rgba(0, 0, 0, 0.4);
background: rgba(0, 0, 0, 0.1);
}
#footer_menu .imgmenu {
padding:5px 8px 3px 14px;
float:left;
background:url("http://4.bp.blogspot.com/-3mNzW5lhuNc/T3gGyxQm9zI/AAAAAAAAAFI/a1Mugnbpnsw/s1600/home.png") 13px 5px no-repeat;
width:36px;
height:30px;
border:none;
border-right:1px solid rgba(0, 0, 0, 0.4);
cursor:pointer;
}
#footer_menu li:hover {
background:#202020; /* Fallback color for old browsers */
background: rgba(0, 0, 0, 0.3);
}
#footer_menu .imgmenu:hover {
background:url("http://3.bp.blogspot.com/-2fJv567iCbo/T3gGz_ytb8I/AAAAAAAAAFQ/pWL3htZzogw/s1600/home_hover.png") 13px 5px no-repeat;
}
#footer_menu li a {
display: block;
color: #cccccc;
text-decoration: none;
}
#footer_menu li a:hover {
color: #ffffff;
}
#footer_menu li span {
display:none;
}
#menu_footer #social_icons {
float:right; /* social icons positions */
width:auto;
margin:5px 15px 0px;
padding:0px;
overflow:hidden;
}
#menu_footer #social_icons li {
margin-right:12px; /* 12px is the space between each one of them */
float:left;
width:24px;
padding:0px;
height:32px;
list-style:none;
_margin-right:0px; /* this is for IE6 only */
}
#social_nav_horizontal {
margin-left: 100px;
font-family: Futura, Verdana, Sans-Serif;
font-size: 18px;
color: #8E9090;
height: 100px;
}
#social_nav_horizontal h3 {
display: inline;
padding: 0 10px;
border-bottom: dashed 1px #ccc;
}
#social_nav_horizontal ul {
margin: 0;
padding: 0;
margin-top: 20px;
}
#social_nav_horizontal ul li {
float: left;
padding: 5px 0 0 5px;
margin-left: 5px;
list-style-type: none;
}
#social_nav_horizontal ul li a {
padding: 4px 0 0 28px;
height: 32px;
color: #999;
text-decoration: none;
line-height: 1.45em;
}
#social_nav_horizontal ul li a:hover {
color: #6DCAFF;
text-decoration: underline;
}
.delicious {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7X25hPCAIgG_ClTS18tr-3gyBXlJGswoIXkt-FFqe5zLihHNOn8ETvuSkfM8sdrulHzeBdxPMUWA6w-Q2SBLkPcyYLpQQaU0GngB24jFilD6LZdY4Y4ENrN8J7hVai1X3tYqgJxtq-BQ/s1600/delicious.png)no-repeat;
background-position: 0 -1px;
}
.facebook {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCzGZgt6aHmsicZLRUGs7xruVYsrsfjYA8j644dwo9macoZUpQQT3dxUwRSns3Im9EfcBRLVttOA2nSTEIlx_KreVbvjNRrH8H_DLMuFJrMzb5M1nZpqjrVbOiRVZILhEuEj1pmyAhybQ/s1600/facebook.png)no-repeat;
background-position: 0 -1px;
}
.stumbleupon {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDPd4LiSbJn9LYups6c-RjdqrzQbgn5hd8L2zYKvdVmqulszWp4dkO-kvEBta6WE-GpeH3Za08tgfYggWylS81fIfyYCKyGnDAJxRmz4Jzdrp9ICx3mESshnE0vhoKxmGUbya6TGRTGPI/s1600/stumbleupon.png)no-repeat;
background-position: 0 -1px;
}
.twitter {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1QGUKc4gA20yaQXsobPOz_mYc2ZK_DwaYN0BaOckHZSdApZUg3Bhvp4r8jirN7OofN5nzNLekk5m7oxglMWVoETUWKsBIrONQJU-OkgHi1HYyDim5dyRV4RoTOemDp14eGif1Kk_jgmU/s1600/twitter.png)no-repeat;
background-position: 0 -1px;
}
Langkah ketiga : Kalian cari tag </body> , kemudian copy paste script berikut di bawah ini dan letakkan diatas tag </body>
<div id='menu_footer'> <ul id='footer_menu'>
<!-- Begin Footer Menu --> <li class='imgmenu'>
<a href='#'><span>Home</span></a></li>
<!-- This Item is an Image, the "span" is hidden via CSS -->
<li><a href='#'>Services</a></li> <li>
<a href='#'>Portfolio</a></li> <li>
<a href='#'>Friends</a></li> <li>
<a href='#'>Blog</a></li> <li>
<a href='#'>Testimonials</a></li> <li>
<a href='#'>Contact</a></li> </ul>
<!-- End Social Icons --> <ul id='social_icons'>
<!-- Social Icons -->
<!-- The span is the text appearing on hover, use the tooltip class in the link --> <li>
<a href='#'><img alt='' src='http://2.bp.blogspot.com/-NygdyapXfJA/T3gG1lJB1-I/AAAAAAAAAFY/UwPnES_pLAg/s1600/twitter.png'/><span>Twitter</span></a></li> <li><a href='#'><img alt='' src='http://2.bp.blogspot.com/-2ePfpVW_2ns/T3gGu3VlY1I/AAAAAAAAAEw/lMPHXCnQPMk/s1600/digg.png'/><span>Digg</span></a></li> <li><a href='#'><img alt='' src='http://2.bp.blogspot.com/-Mb22rlTFtTs/T3gGxnYnH3I/AAAAAAAAAFA/H-E2Xy1Mvv0/s1600/flickr.png'/><span>Flickr</span></a></li> <li><a href='#'><img alt='' src='http://2.bp.blogspot.com/-l1msgXw1ZBk/T3gGwOPZWXI/AAAAAAAAAE4/sUPiaOA5j2c/s1600/facebook.png'/><span>Facebook</span></a></li>
</ul>
</div>
0 Comments
:))
;))
;;)
:D
;)
:p
:((
:)
:(
:X
=((
:-o
:-/
:-*
:|
8-}
:)]
~x(
:-t
b-(
:-L
x(
:-q
=))
