cara terbaru membuat navigasi mobile friendly dan speed desktop responsive keren terbaru kang mastah

Cara Membuat Navigasi Menu desktop dan mobile Responsive Keren untuk Blogger.

ASSALAMU ALAIKUM WR WB-kali ini saya akan share tentang C"ara Membuat Navigasi Menu mobile dan desktop Responsive Keren untuk Blogger",yang merupakan hal yang di antara seribu cara lain yg penting cara membuat navigasi agar mobile friendly dan speed desktop ini sangatlah penting bagi para blogger pemula yg seperti saya

Tampilannya seperti gambar di bawah ini. Keren 'kan? Demo selengkapnya bisa dicek di sumber.

Cara Membuat Navigasi Menu Responsive Keren untuk Blogger

1.langkah pertama silahkan buka dashbord blogger anda,
2.menuju menu tema/template
3.edit HTML
4.kemudian kalian cari kode </head pada html tersebut
5.letakkan kode css berikut tepat di atas kode </head>

KODE CSS & JAVASCRIPT MENU RESPONSIVE
Simpan di atas kode </head>

<style>
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
width: auto;
font-family: 'Source Sans Pro', sans-serif;
line-height: 1;
background: #6bb9f0;
background: -webkit-linear-gradient(bottom, #54aeee, #82c4f2);
background: -ms-linear-gradient(bottom, #54aeee, #82c4f2);
background: -moz-linear-gradient(bottom, #54aeee, #82c4f2);
background: -o-linear-gradient(bottom, #54aeee, #82c4f2);
background: linear-gradient(to top, #54aeee, #82c4f2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), inset 0 -2px 0px #46a7ec, inset 0 1px 0 #90cbf4;

}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > a {
padding: 10px 15px 11px 15px;
font-size: 15px;
text-decoration: none;
color: #fcfefb;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
#cssmenu > ul > li:first-child > a {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
#cssmenu.align-center > ul > li:first-child > a {
border-radius: 0;
}
#cssmen.align-right > ul > li:first-child > a {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
color: #444444;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
background: rgba(125, 125, 125, 0.04);
}
#cssmenu > ul > li:after {
content: '';
position: absolute;
top: 12px;
right: 0;
display: block;
height: 20px;
width: 1px;
opacity: .15;
background: rgba(0, 0, 0, 0.7);
background: linear-gradient(to top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000000, rgba(0, 0, 0, 0));
}
#cssmenu.align-right > ul > li:after {
right: auto;
left: -1px;
}
#cssmenu > ul > li:before {
content: '';
position: absolute;
top: 12px;
right: -1px;
display: block;
height: 20px;
width: 1px;
opacity: .35;
background: rgba(255, 255, 255, 0.8);
background: linear-gradient(to top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0));
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0));
background: -ms-linear-gradient(top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0));
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.01), #ffffff, rgba(255, 255, 255, 0.01));
background: -o-linear-gradient(top, rgba(0, 0, 0, 0), #ffffff, rgba(0, 0, 0, 0));
}
#cssmenu.align-right > ul > li:before {
right: auto;
left: 0px;
}
#cssmenu > ul > li:last-child:after,
#cssmenu > ul > li:last-child:before {
display: none;
}
#cssmenu.small-screen {
width: 100%;
}
#cssmenu.small-screen > ul,
#cssmenu.small-screen.align-center > ul {
width: 100%;
text-align: left;
}
#cssmenu.small-screen > ul > li,
#cssmenu.small-screen.align-center {
float: none;
display: block;
border-top: 1px solid rgba(100, 100, 100, 0.1);
}
#cssmenu.small-screen > ul > li > a {
padding: 18px 25px;
}
#cssmenu.small-screen > ul > li:after,
#cssmenu.small-screen > ul > li:before {
display: none;
}
#cssmenu.small-screen #menu-button {
display: block;
padding: 18px 25px 19px 25px;
cursor: pointer;
font-size: 15px;
text-decoration: none;
color: #fcfefb;
}
#cssmenu.small-screen #menu-button.menu-opened {
color: #444444;
}
#cssmenu.small-screen #menu-button:after {
content: "";
position: absolute;
right: 25px;
top: 20px;
display: block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border-top: 2px solid #fcfefb;
border-bottom: 2px solid #fcfefb;
width: 18px;
height: 3px;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
border-top: 2px solid #444444;
border-bottom: 2px solid #444444;
}
#cssmenu.small-screen #menu-button:before {
content: "";
position: absolute;
right: 25px;
top: 30px;
display: block;
width: 18px;
height: 2px;
background: #fcfefb;
}
#cssmenu.small-screen #menu-button.menu-opened:before {
background: #444444;
}
</style>
<script>//<![CDATA[
(function($) {
$.fn.menumaker = function(options) {

var cssmenu = $(this), settings = $.extend({
title: "Menu",
format: "dropdown",
breakpoint: 768,
sticky: false
}, options);
return this.each(function() {
cssmenu.find('li ul').parent().addClass('has-sub');
if (settings.format != 'select') {
cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
$(this).find("#menu-button").on('click', function(){
$(this).toggleClass('menu-opened');
var mainmenu = $(this).next('ul');
if (mainmenu.hasClass('open')) {
mainmenu.hide().removeClass('open');
}
else {
mainmenu.show().addClass('open');
if (settings.format === "dropdown") {
mainmenu.find('ul').show();
}
}
});
multiTg = function() {
cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
cssmenu.find('.submenu-button').on('click', function() {
$(this).toggleClass('submenu-opened');
if ($(this).siblings('ul').hasClass('open')) {
$(this).siblings('ul').removeClass('open').hide();
}
else {
$(this).siblings('ul').addClass('open').show();
}
});
};
if (settings.format === 'multitoggle') multiTg();
else cssmenu.addClass('dropdown');
}
else if (settings.format === 'select')
{
cssmenu.append('<select style="width: 100%"/>').addClass('select-list');
var selectList = cssmenu.find('select');
selectList.append('<option>' + settings.title + '</option>', {
"selected": "selected",
"value": ""});
cssmenu.find('a').each(function() {
var element = $(this), indentation = "";
for (i = 1; i < element.parents('ul').length; i++)
{
indentation += '-';
}
selectList.append('<option value="' + $(this).attr('href') + '">' + indentation + element.text() + '</option');
});
selectList.on('change', function() {
window.location = $(this).find("option:selected").val();
});
}
if (settings.sticky === true) cssmenu.css('position', 'fixed');
resizeFix = function() {
if ($(window).width() > settings.breakpoint) {
cssmenu.find('ul').show();
cssmenu.removeClass('small-screen');
if (settings.format === 'select') {
cssmenu.find('select').hide();
}
else {
cssmenu.find("#menu-button").removeClass("menu-opened");
}
}
if ($(window).width() <= settings.breakpoint && !cssmenu.hasClass("small-screen")) {
cssmenu.find('ul').hide().removeClass('open');
cssmenu.addClass('small-screen');
if (settings.format === 'select') {
cssmenu.find('select').show();
}
}
};
resizeFix();
return $(window).on('resize', resizeFix);
});
};
})(jQuery);
(function($){
$(document).ready(function(){
$(document).ready(function() {
$("#cssmenu").menumaker({
title: "Menu",
format: "dropdown"
});
});
});
})(jQuery);
//]]>
</script>

KODE HTML MENU RESPONSIVE
Simpan di bawah kode header. Jika akan ditampilkan di atas header, simpan di atas kode header. Kode header biasanya diakhir dengan kode 

<div id='cssmenu'>
<ul>
<li class='active'><a href='/'>Home</a></li>
<li><a href='/p/about.html'>About</a></li>
<li><a href='/p/static-page.html'>Static Page</a></li>
<li><a href='#' target='_blank'>Tutorials</a></li>
<li><a href='#'>Customization</a></li>
</ul>
</div>

Demikian Cara Membuat Navigasi Menu Responsive Keren untuk Blogger. Barangkali menu blog Anda saat ini kurang keren dan mau diganti silahkan gunakan cara ini
demikian dari saya kurang lebihnya mohon maaf wassalamu alaikum wr wb