Cara Menciptakan Hidangan Material Design Di Blog Dengan Tombol Show Hide Di Pojok Atas

Diposkan oleh fezarzone September 05, 2018 Post a Comment

Beberapa tahun sebelumnya kita disuguhkan dengan Flat Design Cara Membuat Menu Material Design di Blog dengan Tombol Show Hide di Pojok Atas

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 ialah tidak membutuhkan banyak tenaga dalam membuatnya. banyak yang menganggap bahwa, dengan tampilan minimalis tersebut akan sangat meringankan waktu load alasannya ialah elemen designnya lebih sedikit. Keunikan dan fasilitas 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 instruksi <body dengan memakai CTRL+F sehabis ketemu maka pastekan instruksi dibawah ini sempurna di bawah instruksi <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/AVvXsEhphWzqbC9pciMY7cYyTMLkDiIUoVuvh8HCvJOp0q3E84D0p08MgjJPfNYz8dpStFmv8_GH0aNHOK64tyu475PD5uxFbCl5V8GzsiSEBKCGCJRXlP-MC5M5JIYUm3RVHcrwknXdYg9yNfw/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 instruksi ]]></b:skin> atau </style> dan letakan instruksi dibawah ini sempurna diatas instruksi ]]></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 instruksi </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 instruksi dibawah ini di daerah yang diinginkan, kalau bingun tempatkan saja instruksi berikut dibawah instruksi <body

<a class='toggleMenu ripple' href='javascript:;'><i class='fa fa-bars'></i></a>

Menambahkan Efek Waves dan Ripple

kalau anda ingin menambahkan efek wafes dan ripple maka silahkan ikuti langkah-langkah berikut:

1. salin instruksi CSS dibawah ini dan tempatkan di atas instruksi ]]></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 instruksi javascript dibawah ini sempurna diatas instruksi </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 ketika di klik.
waves-light: untuk menambahkan warna efek gelombang menjadi terang.
ripple: untuk menambah efek elemen ketika diklik.

Untuk memakai waves-light harus mempunyai waves-effect jadi contohnya: class='waves-effect waves-light'
alhasil 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.

Blogger Cara Membangun Blog Yang Baik Cara Mempercantik Blog Google