 |
| Menu Blog Material |
Beberapa tahun sebelumnya kita disuguhkan dengan Flat Design. Desain tampilan simple dan elegan milik perusahaan raksasa microsoft yang pertama kali mengenalkan flat design pada produk handphone. Flat Design memang banyak mengubah style design, karena tidak membutuhkan banyak tenaga dalam membuatnya. banyak yang menganggap bahwa, dengan tampilan minimalis tersebut akan sangat meringankan waktu load karena elemen designnya lebih sedikit. Keunikan dan kemudahan yang ditawarkan tentu menjadi perhatian dunia, pengembangan design perlahan menuju pada bagaimana untuk memangkas elemen yang memberatkan menjadi komponen yang ringan namun tetap menarik.
Menu dan Tampilan Material Design
Google Material Design, perusahaan raksasa ini juga tidak mau ketinggalan dalam menciptakan design dan trendnya sendiri. Seolah berangkat dari kesuksesan flat design Microsoft, Google juga sedang gencar memproyeksikan design barunya disetiap element produknya. berbeda dengan microsoft, google mengenalkan metode baru dalam mendesain tampilan, bukan sekedar flat design namun tetap dengan mempertimbangkan media 3 dimensi x,y,z, meskipun style desain masih terkesan flat tapi ditambah dengan animasi elemen pada posisi saat hover, dan saat diklik, jadi akan mudah membedakan elemen mana yang berada di atas dan bawah, elemen tombol dengan elemen biasa semuanya dibedakan dengan tampilan sederhana namun tetap cantik.Membuat Menu Material Design Show Hide
Untuk menambahkan menu material design di blog seperti biasa, yaitu:
1. Masuk Blogger
2. Menu template
3. Edit HTML
4. selanjutnya cari kode <body dengan menggunakan CTRL+F setelah ketemu maka pastekan kode dibawah ini tepat di bawah kode <body
<div class='darkshadow'></div>
<nav class='dropdowns' itemprop='mainEntity' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<div class='wrapper'>
<div class='profilemenu'>
<img alt='Admin' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZe3at86RW81V8FIEQpzvUbVopLkDFMDT_iLYKl9WUteAoZThxV2WpcwOHeM_MZ9J7tRB_ET_ljVvruDa01ZsexJmjBbDsWhVVMugvIaXap3RDqz1LU3-Uq5Uwdwy_mqmsqU1l42NGpNY/s1600/noimage.png' title='Admin'/>
<h3>Nama Admin</h3>
<a class='ripple' href='javascript:;' id='info2'><i class='fa fa-caret-down'></i></a>
<p>emailkamu@gmail.com</p>
<ul id='nav-menu1'>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Google+</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Facebook</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Twitter</span></a></li>
</ul>
</div>
<ul class='nav nav-menu2'>
<li><a class='waves-effect' href='/' itemprop='url' expr:title='data:blog.title'><span itemprop='name'><i class='fa fa-home'></i> Home</span></a></li>
<li class='sub-menu'>
<a class='dropdown waves-effect' href='javascript:;' title='Ranking'><i class='fa fa-trophy'></i> Ranking</a>
<ul class='sub'>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Players</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Groups</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url'><span itemprop='name'>Company</span></a></li>
</ul>
</li>
<li><a class='waves-effect' href='#' itemprop='url' title='News'><span itemprop='name'><i class='fa fa-newspaper-o'></i> News</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url' title='Inbox'><span itemprop='name'><i class='fa fa-inbox'></i> Inbox</span></a></li>
<h2>Submenu</h2>
<li><a class='waves-effect' href='#' itemprop='url' title='Settings'><span itemprop='name'><i class='fa fa-gear'></i> Settings</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url' title='My File'><span itemprop='name'><i class='fa fa-file'></i> My File</span></a></li>
<li><a class='waves-effect' href='#' itemprop='url' title='Upload'><span itemprop='name'><i class='fa fa-cloud-upload'></i> Upload</span></a></li>
</ul>
</div>
</nav>5. Cari kode ]]></b:skin> atau </style> dan letakan kode dibawah ini tepat diatas kode ]]></b:skin> atau </style>
/* Material Design Navigation */
.toggleMenu{color:#fff;padding:10px;font-size:25px;float:left;margin-right:20px}h1{color:#fff;font-size:20px;font-weight:400;margin:12px 0 0}
.dropdowns{font:normal normal 14px Roboto,Arial,sans-serif;background:#fff;overflow:auto;position:fixed;z-index:99;bottom:0;width:300px;left:-400px;transition:all .7s ease-in-out;top:0;border-top:1px solid #ddd;line-height:48px;box-shadow:0 5px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
.nav-menu2{list-style:none;margin:0;*zoom:1;float:left;padding:0}
.nav-menu2:before,.nav-menu2:after{content:" ";display:table}
.nav-menu2:after{clear:both}.sub-menu{transition:all .5s ease-in-out}
.nav-menu2 ul{list-style:none;margin:0;width:auto;white-space:nowrap}
.nav-menu2 a{display:block;padding:0 15px}
.nav-menu2 li{position:relative;margin:0}
.nav-menu2 > li{float:left;width:100%}
.nav-menu2 > li > a{display:block;height:48px;line-height:48px;color:#666}
.nav-menu2 > li:hover > a{background:#E6E6E6}
.nav-menu2 li ul{background:#fff;display:none;-webkit-transition:all .25s ease-out;-moz-transition:all .25s ease-out;-ms-transition:all .25s ease-out;-o-transition:all .25s ease-out;transition:all .25s ease-out;padding:0}
.nav-menu2 li li ul{left:100%;top:-1px}
.nav-menu2 li li a.click ul{visibility:visible;opacity:10}
.nav-menu2 li li a{display:block;color:#666;position:relative;padding-left:53px;line-height:40px}
.nav-menu2 li li a:hover{background:#f0f0f0}
.nav-menu2 li li li a{background:#fff;z-index:20;color:#333}
.nav-menu2 li .dropdown:after{content:"\f105";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit;position:absolute;top:0;right:20px;color:#444}
.nav-menu2 li .dropdown.open:after{content:"\f107";font-family:FontAwesome;font-style:normal;font-weight:400;text-decoration:inherit}
.nav-menu2 li .dropdown:hover:after{color:#000}
.nav-menu2 li i{font-size:18px;width:35px}.nav li a.click{opacity:1}
.nav-menu2 h2{font-size:14px;font-weight:normal!important;padding:0 20px;margin:0;overflow:hidden;border-top:1px solid #ddd;color:#999}
.dropdowns h3,.dropdowns p{padding:0;margin:0;font-weight:400!important}
.dropdowns .profilemenu{padding:10px;background:#f8f8f8;border-bottom:1px solid #ddd;line-height:2}
.dropdowns h3{font-size:14px}.nav-menu2 p{font-size:13px}
.dropdowns img{width:70px;height:70px;border-radius:100%}
#info2{float:right;border-radius:100%;padding:0 10px;color:#999}
#info2:hover{background:#ddd}
#nav-menu1{visibility:hidden;position:absolute;background:#fff;list-style:none;right:30px;top:135px;padding:0;width:0;height:0;transition:all .5s cubic-bezier(0.07, 0.68, 0.35, 1.04);z-index:9;overflow:hidden;box-shadow:0 5px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
#nav-menu1 li{width:100%}
#nav-menu1 li a{padding:8px 15px;width:100%;font-weight:300;color:#666}
#nav-menu1 li a:hover{background:#e1e1e1}
#nav-menu1.shows{visibility:visible;width:200px;height:130px}
.dropdowns.shows{left:0;opacity:1}
.darkshadow{visibility:hidden;opacity:0;position:fixed;top:0;background:rgba(0, 0, 0, 0.59);left:0;right:0;bottom:0;margin:0;z-index:97;transition:all .4s ease-in-out}
.darkshadow.shows{visibility:visible;opacity:1}6. tempatkan javascrip di bawah ini tepat diatas kode </body>
<script type='text/javascript'>
$(document).ready(function(){$("#info2").click(function(){$("#nav-menu1").toggleClass("shows");});});
$(document).ready(function(){$(".toggleMenu").click(function(){$(".dropdowns").toggleClass("shows");});});
$(document).ready(function(){$(".darkshadow").click(function(){$(".dropdowns").removeClass("shows");});});
$(document).ready(function(){$(".darkshadow").click(function(){$(".darkshadow").removeClass("shows");});});
$(document).ready(function(){$(".toggleMenu").click(function(){$(".darkshadow").toggleClass("shows");});});
//<![CDATA[
// Sub Nav
var Script=function(){jQuery('.nav-menu2 .sub-menu > a').click(function(){var last=jQuery('.sub-menu.open',$('.nav-menu2'));last.removeClass("open");jQuery('.dropdown').addClass("open");jQuery('.dropdown',last).removeClass("open");jQuery('.sub',last).slideUp(300);var sub=jQuery(this).next();if(sub.is(":visible")){jQuery('.dropdown',jQuery(this)).removeClass("open");jQuery(this).parent().removeClass("open");sub.slideUp(300)}else{jQuery('.dropdown',jQuery(this)).addClass("open");jQuery(this).parent().addClass("open");sub.slideDown(300)}var o=($(this).offset());diff=300-o.top;if(diff>0)$(".nav-menu2").scrollTo("-="+Math.abs(diff),500);else $(".nav-menu2").scrollTo("+="+Math.abs(diff),500)})}();
//]]>
</script>7. Untuk tombol menu pemanggilnya silahkan tempatkan kode dibawah ini di tempat yang diinginkan, jika bingun tempatkan saja kode berikut dibawah kode <body
<a class='toggleMenu ripple' href='javascript:;'><i class='fa fa-bars'></i></a>Menambahkan Efek Waves dan Ripple
jika anda ingin menambahkan efek wafes dan ripple maka silahkan ikuti langkah-langkah berikut:
1. salin kode CSS dibawah ini dan tempatkan di atas kode ]]></b:skin> atau </style>
/* Material Design Effect */
.waves-effect{position:relative;cursor:pointer;display:inline-block;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;vertical-align:middle;z-index:1;will-change:opacity, transform;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;-ms-transition:all .3s ease-out;transition:all .3s ease-out}
.waves-effect .waves-ripple{position:absolute;border-radius:50%;width:20px;height:20px;margin-top:-10px;margin-left:-10px;opacity:0;background:rgba(0,0,0,0.2);-webkit-transition:all 0.7s ease-out;-moz-transition:all 0.7s ease-out;-o-transition:all 0.7s ease-out;-ms-transition:all 0.7s ease-out;transition:all 0.7s ease-out;-webkit-transition-property:-webkit-transform, opacity;-moz-transition-property:-moz-transform, opacity;-o-transition-property:-o-transform, opacity;transition-property:transform, opacity;-webkit-transform:scale(0);-moz-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);pointer-events:none}
.waves-effect.waves-light .waves-ripple{background-color:rgba(255,255,255,0.45)}
.waves-notransition{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none !important;transition:none !important}
.waves-circle{-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-mask-image:-webkit-radial-gradient(circle, white 100%, black 100%)}
.waves-input-wrapper{border-radius:0.2em;vertical-align:bottom;width:100%}
.waves-input-wrapper .waves-button-input{position:relative;top:0;left:0;z-index:1}
.waves-circle{text-align:center;width:2.5em;height:2.5em;line-height:2.5em;border-radius:50%;-webkit-mask-image:none}
.waves-block{display:block}
a.waves-effect .waves-ripple{z-index:-1}
.ripple{display:inline-block;text-decoration:none;overflow:hidden;position:relative;z-index:0}
.ink{display:block;position:absolute;background:rgba(255,255,255,0.4);border-radius:100%;-webkit-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0)}.animate{-webkit-animation:ripple .55s linear;-moz-animation:ripple .55s linear;-ms-animation:ripple .55s linear;-o-animation:ripple .55s linear;animation:ripple .55s linear}
@-webkit-keyframes ripple{100%{opacity:0;-webkit-transform:scale(2.5)}}
@-moz-keyframes ripple{100%{opacity:0;-moz-transform:scale(2.5)}}
@-o-keyframes ripple{100%{opacity:0;-o-transform:scale(2.5)}}
@keyframes ripple{100%{opacity:0;transform:scale(2.5)}}2. tempatkan kode javascript dibawah ini tepat diatas kode </body
<script src='https://googledrive.com/host/0B495PN79xGJ6R0k1ajA4d3MxTXM'></script>
<script type='text/javascript'>
//<![CDATA[
// Effect
$(function() {
var ink, d, x, y;
$(".ripple").click(function(e) {
if ($(this).find(".ink").length === 0) {
$(this).prepend("<span class='ink'></span>");
}
ink = $(this).find(".ink");
ink.removeClass("animate");
if (!ink.height() && !ink.width()) {
d = Math.max($(this).outerWidth(), $(this).outerHeight());
ink.css({
height: d,
width: d
});
}
x = e.pageX - $(this).offset().left - ink.width() / 2;
y = e.pageY - $(this).offset().top - ink.height() / 2;
ink.css({
top: y + 'px',
left: x + 'px'
}).addClass("animate");
});
});
//]]>
</script>script pada google drive diatas silahkan anda hosting sendiri di google drive sendiri untuk mengantisipasi eror. baca cara hosting javascript
Simpan template anda dan lihat hasilnya.
untuk menambahkan wafes efek pada suatu konten di blog anda, maka anda hanya perlu menambahkan class pada tag HTML.
contohnya: class='namaclass'
keterangan:
waves-effect: untuk menambah effect gelombang saat di klik.
waves-light: untuk menambahkan warna efek gelombang menjadi terang.
ripple: untuk menambah efek elemen saat diklik.
Untuk menggunakan waves-light harus memiliki waves-effect jadi contohnya: class='waves-effect waves-light'
hasilnya akan menjadi:
<a class='waves-effect waves-light' href='link'>button</a>
begitulah cara membuat material menu diblog. cara ini saya dapat dari blog idblanter.