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 :
> Cari lagi kode </body>, dan masukan Script ini diatas tag tersebut :
<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>
<!-- 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>
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.