Saya membuat artikel ini karna ada yang request minta di buatkan tutorial design tentang cara membuat footer plus back to top dan plus menu nya.
Screenshot :
Nah.. Kalau gitu kita langsung saja ke tutorial nya :
Letakan kode di bawah ini di atas ]]><b:skin>
#footer-wrapper{background:#1669aa;color:#fff;line-height:1;padding:0 0 15px 0;text-align:center}
#footer{margin:0 auto;max-width:758px}
#footer a {color:#fff;text-decoration:none;}
#footer a:hover {color:#fff;}
#footer .footer-nav {background:rgba(255,255,255,.1);}
#footer .footer-nav ul{max-width:100%;margin:0 auto;padding:15px;text-align:center}
#footer .footer-nav li{display:inline;text-align:center;list-style:none;margin:0;padding:6px 8px;border-radius:4px;transition:all .3s}
#footer .footer-nav li:hover{background:rgba(0,0,0,.15);}
#footer .footer-nav li a{position:relative;color:#fff;text-transform:capitalize;font-weight:700;padding:0;margin:0}
#footer .footer-nav li a:hover{color:#fff;}
#backtotop{position:relative;display:table;clear:both;text-align:center;margin:15px auto}
.backtotop {color:#fff;}
#backtotop span{display:block;background:rgba(0,0,0,0.15);width:36px;height:36px;line-height:36px;border-radius:5px;cursor:pointer;transition:all .3s}
#backtotop span:hover {background:rgba(0,0,0,0.25);}
Lalu letakan kode di bawah ini di atas </body> atau di atas </head> juga bisa
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var str=location.href.toLowerCase();$('.main-nav ul li a').each(function(){if(str.indexOf(this.href.toLowerCase())>-1){$("li.highlight").removeClass("highlight");$(this).parent().addClass("highlight")}})})
$(function(){var pull=$('#pull');menu=$('.main-nav ul');menuHeight=menu.height();$(pull).on('click',function(e){e.preventDefault();menu.slideToggle()});$(window).resize(function(){var w=$(window).width();if(w>320&&menu.is(':hidden')){menu.removeAttr('style')}})});$('.backtotop').click(function(){$('html,body').animate({scrollTop:0},400);return false;});
//]]>
</script>
Sekarang letaka kode di bawah ini di atas copyright
<div id='footer-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPFooter'>
<div id='footer'>
<div class='footer-nav'><ul>
<li><a href='#' title='About Us'>About</a></li>
<li><a href='#' title='Contact us'>Contact</a></li>
<li><a href='#' title='Our Sitemap'>Sitemap</a></li>
<li><a href='#' title='Disclaimer'>Disclaimer</a></li>
<li><a href='#' title='Privacy Policy'>Privacy Policy</a></li>
</ul>
</div>
<div class='backtotop' id='backtotop' title='Back to top'><span><i class='fa fa-chevron-up'/></span></div>
Demo
Klik Demo lalu scroll ke bawah.
Keterangan : sesuaikan lebar/width nya dengan template yg anda gunakan dan ganti tanda # dengan link menu anda.
Sekian dari cara membuat footer plus back to top plus menu nya, selamat mencoba dan semoga bisa bermanfaat.