 |
| 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, alasannya yaitu tidak membutuhkan banyak tenaga dalam membuatnya. banyak yang menganggap bahwa, dengan tampilan minimalis tersebut akan sangat meringankan waktu load alasannya yaitu elemen designnya lebih sedikit. Keunikan dan akomodasi 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 membuat 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 gres 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 ketika hover, dan ketika diklik, jadi akan gampang 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 sajian material design di blog menyerupai biasa, yaitu:
1. Masuk Blogger
2. Menu template
3. Edit HTML
4. selanjutnya cari isyarat <body dengan memakai CTRL+F sesudah ketemu maka pastekan isyarat dibawah ini sempurna di bawah isyarat <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/AVvXsEhY55HvTnpoKZEgdo_Ynsy6EVdisv335ZZCXK3zctELO5glZKR2wldl6udVQArMlqyaM6CRpU7EG8_X2nuOLJqnhcL9yxYAClmr5ASVi50jqc5THkSAzX7I3grJhNE-SLmIC36IZRaaB1Q/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 isyarat ]]></b:skin> atau </style> dan letakan isyarat dibawah ini sempurna diatas isyarat ]]></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 sempurna diatas isyarat </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 sajian pemanggilnya silahkan tempatkan isyarat dibawah ini di kawasan yang diinginkan, jikalau bingun tempatkan saja isyarat berikut dibawah isyarat <body
<a class='toggleMenu ripple' href='javascript:;'><i class='fa fa-bars'></i></a>Menambahkan Efek Waves dan Ripple
jikalau anda ingin menambahkan pengaruh wafes dan ripple maka silahkan ikuti langkah-langkah berikut:
1. salin isyarat CSS dibawah ini dan tempatkan di atas isyarat ]]></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 isyarat javascript dibawah ini sempurna diatas isyarat </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 pengaruh 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 ketika di klik.
waves-light: untuk menambahkan warna pengaruh gelombang menjadi terang.
ripple: untuk menambah pengaruh elemen ketika diklik.
Untuk memakai waves-light harus mempunyai waves-effect jadi contohnya: class='waves-effect waves-light'
akhirnya akan menjadi:
<a class='waves-effect waves-light' href='link'>button</a>
begitulah cara membuat material sajian diblog. cara ini aku sanggup dari blog idblanter.
Buat lebih berguna, kongsi:
