Buat
Menu Float Fixed Di Footer Blog – Apakah itu menu float fixed? Menu float fixet adalah semacam menu tab yang berada di bagian footer. Menu float fixed disini nampak ringan dan tidak memberatkan blog. Keunggulan yang lain adalah menu ini terlihat lebih elegan dan lebih dinamis. Oke, langsung saja, berikut langkah-langkahnya.
1. Login di akun Blogger anda.
2. Lalu silahkan menuju ke Template > Edit HTML > Lanjutkan.
3. Cari kode ]]></b:skin> (Ctrl+F) dan letakan kode berikut tepat di atasnya.
#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/AVvXsEhC4yBi9efbWhxkfWR4M48Tyc5YFrUHAWqh4Hq-zNd2J1X4l5BgG1xGVtkmmHpHRkTLbgqwa517ZvUQtJideg95ywkn8BgVn80cViADaeiKpdvHmtLn0UfLuL_gfbLrkRiyaFb5kLkuUMo/s1600/delicious.png)no-repeat; background-position: 0 -1px;}.facebook
{ background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwI8WlXC8MXoRdZlHljEjIyiXN8IyUEMp-xIgd9fN96m3pPoMYT3ZqobVe5Lt5C-U9En3lEp5KcgWJayMU7XA9Ow6j2O2ok5rgLQW8HxNhrmGU4WDX5A4-ExM8TtYYV4Gq_Dc6jdQjjxc/s1600/facebook.png)no-repeat; background-position: 0 -1px;}.stumbleupon
{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWB_41udicPRdfA9BNc8tFDgFK5rsgOrTmbxd9Zf9SHXMGR8IBNnMzRrJu6EHVdorBNYo3Sb3dxvLk3Z3LgZLHUGvf3LybFdP7P89GtLpclSxwTgvPgtfi7GjF1XbHHqEYdOgviTvI4wc/s1600/stumbleupon.png)no-repeat; background-position: 0 -1px;}.twitter
{ background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBol1ImiPstBwVpLXPiv37wvELL9cx_LgCahSrKfgFgjR9rrPx0gelCbai8pWJF15lBbU17ffGD-hepXmZl4pdUVWBA4EyeNYvAn_Xs6gudUA7zUXUIoxQ1EputZ5XhrzBjA67dn8ceNY/s1600/twitter.png)no-repeat; background-position: 0 -1px;}
4. Kemudian, cari kode </body> (Ctrl+F) dan letakan kode berikut di atas </body>.
<div id='menu_footer'> <ul
id='footer_menu'><!-- Begin Footer Menu --> <li class='imgmenu'> <a href='URL'><span>Home</span></a></li>
<!-- This Item is an Image, the "span" is hidden via CSS --> <li><a href='URL'>About</a></li>
<li>
<a href='URL'>Join us</a></li> <li>
<a href='URL'>Login</a></li> <li>
<a href='URL'>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='URL'><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='URL'><img
alt='' src='http://2.bp.blogspot.com/-2ePfpVW_2ns/T3gGu3VlY1I/AAAAAAAAAEw/lMPHXCnQPMk/s1600/digg.png'/><span>Digg</span></a></li> <li><a
href='URL'><img
alt='' src='http://2.bp.blogspot.com/-Mb22rlTFtTs/T3gGxnYnH3I/AAAAAAAAAFA/H-E2Xy1Mvv0/s1600/flickr.png'/><span>Flickr</span></a></li> <li><a href='URL'><img
alt='' src='http://2.bp.blogspot.com/-l1msgXw1ZBk/T3gGwOPZWXI/AAAAAAAAAE4/sUPiaOA5j2c/s1600/facebook.png'/><span>Facebook</span></a></li>
</ul> </div>
Keterangan:
Warna hijau: Ganti dengan alamat url pada tab yang tertera.
Warna biru: Ganti dengan nama tab yang sesuai dengan yang tertera.
Warna merah: Bisa diganti dengan gambar icon-icon susuka hati anda.
5. Langkah terakhir, Simpan Template.
>>Selamat Mencoba<<<
Anda telah membaca artikel tentang Buat Menu Float Fixed Di Footer Blog dengan url http://superrefreshing.blogspot.com/2013/05/buat-menu-footer.html. Anda boleh menyebarluaskan atau mengcopy artikel Buat Menu Float Fixed Di Footer Blog ini dengan catatan mencantumkan link sumbernya.
