Formulir Kontak

Nama

Email *

Pesan *

Cara Membuat Menu Float Fixed Di Blog

Aizzan Blog --Siang sobat semuanya, semoga disiang hari ini kita diberi semangat untuk tetap menjalani ibadah puasa di bulan ramadhan 2013 ini. Postingan kali ini saya akan membahas tentang cara membuat menu float fixed di blog, menu tersebut tidak akan menghilang pada blog sobat walaupun sobat scroll kebawah. Untuk keunggulan dari fitur ini yaitu salahsatunya ringan dalam loading dan masih banyak lagi, maka dari itu silahkan sobat untuk mencobanya. Dibawah ini adalah screenshot dari menu float fixed di blog :

Aizzan Blog:  Cara Membuat Menu Float Fixed Di Blog
Aizzan Blog:  Cara Membuat Menu Float Fixed Di Blog

Langsung saja untuk tutorialnya bisa dilihat dibawah ini :
1. Login ke blogger sobat
2. Pergi ke template
3. Backup dulu data sobat sebelum di edit
4. Kemudian klik edit HTML
5. Cari kode ]]></b:skin>, lebih cepat tekan Ctrl + F
6. Masukkan kode dibawah ini tepat diatas kode ]]></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(http://4.bp.blogspot.com/-MVwn6NTSgDw/T1nJBKZdyHI/AAAAAAAAAVM/ptqhX7e1qaw/s1600/delicious.png)no-repeat;
background-position: 0 -1px;
}
.facebook {
background: url(http://4.bp.blogspot.com/-VJ_GKDl6E2U/T1nJB3vcBAI/AAAAAAAAAVU/5ZXOfg9rmT4/s1600/facebook.png)no-repeat;
background-position: 0 -1px;
}
.stumbleupon {
background: url(http://4.bp.blogspot.com/-cOsk53MyROs/T1nJDAVgceI/AAAAAAAAAVc/oELs9UIF024/s1600/stumbleupon.png)no-repeat;
background-position: 0 -1px;
}
.twitter {
background: url(http://3.bp.blogspot.com/-4ea3_AKT8K4/T1nJDlCnBJI/AAAAAAAAAVg/5P-pDAaPtfE/s1600/twitter.png)no-repeat;
background-position: 0 -1px;
}
7. Cari kode </body>, lebih cepat tekan Ctrl + F
8. Kemudian masukkan kode dibawah ini tepat diatas kode </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>
Keterangan :
  • Sobat bisa mengganti tulisan Home, Service, Portfolio, Friends, Blog, Testimonials, dan Contact dengan yang diinginkan
  •  Ganti tanda '#' dengan url sobat yang bersangkutan

9. Setelah selesai silahkan di simpan dan lihat hasilnya

Itulah cara membuat menu float fixes di bawah blog, kalau sobat ada pertanyaan maupun saran silahkan kirim lewat komentar maupun kotak formulir kontak yang ada disebelah kanan artikel, semoga bermanfaat bagi semuanya
Previous
Next Post »
0 Komentar