Home » Blog Design » Cara Membuat Fixed Menu Footer Dengan CSS3 Terbaru

Cara Membuat Fixed Menu Footer Dengan CSS3 Terbaru

Posted by Artikel-Tutor Hari Ini On 0 comments

Pagi ini kita akan belajar membuat menu Footer Fixed dengan meggunakan CSS3. Kenapa CSS3? ini agar tampilan menu lebih bergaya dinamis, dan lebih terlihat bentuk Button-nya, juga supaya lebih ringan dibuka.

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

> 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/AVvXsEjeE3vmz-wOMzFmDXbPhn9qqArt5BpBglA6Yrf18KRC9UA-lEs8kzTazZOI8D5-dXyIn0QEqj_0ZjgJskoDdfjQzw-tKd_r-U8T6P-uBMitbnjteMIKWkz0SWiYxmqqDsidlXKE__6gmiY/s1600/delicious.png)no-repeat;
     background-position: 0 -1px;
}
.facebook {
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyMg523w63e1hEg8OntPI8GFpxXrf_34-tHNVfr9baNnCosE2cQ_4XajNu_y7vVyAdGYabsBHbhtQTrdsfO-VahU4LoG4WOi0m3LiZmj0zETg_gWJ_34sBwq_R2Bv4sCh85Ww-dXAMW_E/s1600/facebook.png)no-repeat;
     background-position: 0 -1px;
}
.stumbleupon {
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhih0g9I6jHovSPTnBZhlEVtJsjaCoaCl8F9Vro7ufIpcSmbwVCVfN57gGDYqsxvw5EY081wjbulejK7LhJ8e0AcLdVxB6vl0-VJjsCu0uSMbMaJxDBMTMoAsQoV7P6nV7R8VJcYayj0d8/s1600/stumbleupon.png)no-repeat;
     background-position: 0 -1px;
}
.twitter {
     background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGlmSwCXQJ3EhbdH0xK3MMoz66D8jn9B15eD8Ed8CgqiJr7VuMtDaSUzXOD4iy5FOhjrmS3MtKxZUkeJWpmkdauhQz4_hj2l6MpjNWRbpgDlyrhs5Yjd6Ogew0FpiC1qE4jV-U8y29H3w/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>

>Terakhir klik

Sekian tutorialnya, salam.
Semoga artikel Cara Membuat Fixed Menu Footer Dengan CSS3 Terbaru bermanfaat bagi Anda.

Jika artikel ini bermanfaat,bagikan kepada rekan melalui:

Cara Membuat Fixed Menu Footer Dengan CSS3 Terbaru

Artikel terkait:

Post a Comment

Populer

Kategori