Cara Mudah Memasang Navigasi Menu Responsive untuk Blogger

Cara Mudah Memasang Navigasi Menu Responsive untuk Blogger

Cara Mudah Memasang Navigasi Menu Responsive untuk Blogger. Desain menunya seperti ini untik tampilan desktop.

Navigasi Menu Responsive untuk Blogger


1. Layout > Add a Gadget > HTML/Javascript
2. Masukkan kode
3. Pastikian ada kode jQuery di template

KODENYA:

<style>
/*CSS*/
@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;
border-radius: 4px;
border: 1px solid #2698e9;
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: 20px 25px 21px 25px;
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: 18px;
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: 18px;
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;
}
/*HTML*/
</style>
<div id='cssmenu'>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Customization</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
/*JAVASCRIPT*/
<script>
(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>

CARA LAIN

Jika Cara Mudah Memasang Navigasi Menu Responsive untuk Blogger di atas tidak berfungsi, maka lakukan langkah berikut ini:

- Klik Tema > Edit HTML

1. Copas kode CSS menu responsive berikut ini di atas kode </head>

<style>
/*CSS*/
@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;
border-radius: 4px;
border: 1px solid #2698e9;
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: 20px 25px 21px 25px;
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: 18px;
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: 18px;
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;
}
/*HTML*/
</style>

2. Copas kode HTML menu responsive berikut ini di bawah kode <div id="header"> ... </div>

<div id='cssmenu'>
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Customization</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

3. Copas kode JavaScript berikut ini di atas kode </body>

<script>
(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>

Save!

See the Pen
Navigasi Menu Responsive Blogger
by CB Blogger (@cbblogger)
on CodePen.

Thanks for reading Cara Mudah Memasang Navigasi Menu Responsive untuk Blogger | Labels: Desain Blog edit this post
0 Komentar untuk "Cara Mudah Memasang Navigasi Menu Responsive untuk Blogger"

1. Komentar spam, link aktif, dan alamat blog tidak akan muncul.
2. Tidak semua pertanyaan sempat/bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *