Cara Membuat Menu Float Fixed di Bagian Footer Dengan CSS3 2012

Beranda / tutorial / Cara Membuat Menu Float Fixed di Bagian Footer Dengan CSS3 2012

Cara Membuat Menu Float Fixed di Bagian Footer Dengan CSS3 2012

Notifikasi Penting

Maaf, UnlimitSoft mengalami sedikit masalah internal, dan tidak terupdate. Dipindahkan sementara ke www.Newsinfopedia.org

Siang ini menjelang sore, kita akan belajar membuat menu Footer Fixed dengan meggunakan CSS3. Dan menurut saya ini adalah menu yang ringan-ringan saja, juga bagus dan elegan dengan blog. Kenapa menggunakan CSS3? ini agar tampilan menu lebih bergaya dinamis, dan lebih terlihat bentuk tombolnya, juga agar loading tidak berat.

Baiklah, mari kita menuju tempat eksekusi. Pertama login ke Blogger kalian. (Blogger dengan tampilan baru)

Maaf tidak ada DEMO.
> Klik tab 'Template' > 'Edit HTML' > 'Proceed'
> Cari kode : ]]></b:skin>
> Lalu tambahkan Script berikut diatasnya :

#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/AVvXsEgh4sAiXYzW4NM3MdKhUT3t7sYwbUgACHVVM4tN2zzyBiIHZUuMw0XoBuk99PT2rxoI5wiN705NMk72BKNLpcPYs2H1e0MwfCDxRESGIHDa4BI3GkADUoIgADWW8zkov3grLN76ByaZt1k/s1600/delicious.png)no-repeat;
     background-position: 0 -1px;
}
.facebook {
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMHm5KQ6DiHs5f9TSLxDDU34SAsFum_j0pz82SoS0yIJIcFiEAZzlfThB9DS6Y8G8gr6c_aQVFfaIwFmKra81vACY1PI9JZdvY6jo0H3cr0MYOfAr5x6MrilPtPyEMr0YYYLPm7-F4q80/s1600/facebook.png)no-repeat;
     background-position: 0 -1px;
}
.stumbleupon {
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdmcOrF8R-1TrxyNx7vMQXL9wDEMqng-CPs3qqmFKB0YtNBUQRO4P3yIpJFJ-F_vmKlm1165GeII61am39zJFgR217K3JxOmbYJoa408cKgD4i0d0BrYdw7P99S3NzCk54dV4qEghQF5E/s1600/stumbleupon.png)no-repeat;
     background-position: 0 -1px;
}
.twitter {
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0nBjotpkXSapm55tig3GklKpDE1QPgj0v8lqop9SNH4BqNSZXXFpLnTV3R2UdqDpbo7ryhCCqmgVuvK2DvkZT47ps5DkzQFEU0XqkhqUaqIueyhh9L5G1B_xz9ny2UVzCDgtapzEkX3k/s1600/twitter.png)no-repeat;
     background-position: 0 -1px;
}

> Cari lagi kode </body>, dan masukan Script ini diatas tag tersebut :

<div id='menu_footer'> <ul id='footer_menu'>
 <li class='imgmenu'>
<a href='#'>Home</a></li>

<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>
 <ul id='social_icons'>

 <li>
<a href='#'><img alt='' src='http://2.bp.blogspot.com/-NygdyapXfJA/T3gG1lJB1-I/AAAAAAAAAFY/UwPnES_pLAg/s1600/twitter.png'/>Twitter</a></li> <li><a href='#'><img alt='' src='http://2.bp.blogspot.com/-2ePfpVW_2ns/T3gGu3VlY1I/AAAAAAAAAEw/lMPHXCnQPMk/s1600/digg.png'/>Digg</a></li> <li><a href='#'><img alt='' src='http://2.bp.blogspot.com/-Mb22rlTFtTs/T3gGxnYnH3I/AAAAAAAAAFA/H-E2Xy1Mvv0/s1600/flickr.png'/>Flickr</a></li> <li><a href='#'><img alt='' src='http://2.bp.blogspot.com/-l1msgXw1ZBk/T3gGwOPZWXI/AAAAAAAAAE4/sUPiaOA5j2c/s1600/facebook.png'/>Facebook</a></li>
</ul>
</div>

Teks berwarna Merah silakan kalian edit atau ubah sesuai kesukaan kalian.

Dan langkah terakhir, klik

Sekian tutorialnya, semoga bermanfaat bagi kawan-kawan blogger sekalian.

[boot] Membuat menu float fixed pada blog, cara membuat menu fixed footer, cara membuat menu fixed pada footer blog, membuat menu melayang fixed footer, cara membuat menu melayang dibagian footer blog, cara membuat menu fixed float di footer blog.