Artikel ini merupakan artikel kelanjut BUAT MENU DROP DOWN KEREN HANYA DENGAN ADD WIDGET. Pada pembahasan sebelumnya dijelaskan bahwa Menu Drop Down yang dibentuk hanya cocok pada ketika tampil ketika memakai komputer. Lalu hidangan menyerupai apa yang cocok untuk hidangan yang ditampilkan pada ketika memakai Handphone?? Yaitu dengan memakai Menu Flat Drop Down Responsive. Menu ini sanggup dipakai dalam dua kondisi dilihat dengan komputer maupun handphone.
Adapun untuk memasang hidangan dropdown yang dibagikan pada artikel ini,
- Login terlebih dahulu ke Dashboard Blogspot.
- Masuk ke Menu Tata Letak atau Thema.
- Ganti url ("#") dan Judul Menu pada instruksi HTML/JAVASCRIPT yang admin bagikan.
- Add Gadget dan pilih HTML/JavaScript.
- Pasang jadinya di atas atau di bawah head (terserah anda).
Code yang ditambahkan pada Widget atau Gadget yakni sebagai berikut,
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js' type="text/javascript"></script> <div id='cssmenu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'> <ul> <li><a href='#' itemprop='url' title='menu'><span itemprop='name'>Home</span></a></li> <li class='active'><a href='#' itemprop='url' title='menu'><span itemprop='name'>Embroidery</span></a> <ul> <li><a href='#' itemprop='url' title='menu'><span itemprop='name'>Wilcom</span></a> <ul> <li><a href='#' itemprop='url' title='menu'><span itemprop='name'>SWF</span></a></li> <li><a href='#' itemprop='url' title='menu'><span itemprop='name'>CNY</span></a></li> </ul> </li> <li><a href='#' itemprop='url' title='menu'><span itemprop='name'>Tajima</span></a> <ul> <li><a href='#' itemprop='url' title='menu'><span itemprop='name'>SWF</span></a></li> <li><a href='#' itemprop='url' title='menu'><span itemprop='name'>CNY</span></a></li> </ul> </li> </ul> </li> <li><a href='#' itemprop='url' title='menu'><span itemprop='name'>About</span></a></li> <li><a href='#' itemprop='url' title='menu'><span itemprop='name'>Contact</span></a></li> </ul> </div> <SCRIPT> eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('2 D(n){c 2(){c 3.x(2(){$(3).8("d",2(n){"15"==$("#g-9").P("Z")&&($(n.r).y("k-9")||(a.Y.Q=$(n.r).X("Q")))})}),n.10(3)}}!2(n){n.p.U=2(o){f t=n(3),e=n.11({B:"V",h:"w",I:!1},o);c 3.x(2(){c t.M(\'<S 14="g-9">\'+e.B+"</S>"),n(3).6("#g-9").8("d",2(){n(3).K("g-E");f o=n(3).13("4");o.y("5")?o.A().q("5"):(o.l().m("5"),"w"===e.h&&o.6("4").l())}),t.6("H 4").12().m("z-N"),J=2(){t.6(".z-N").M(\'<L W="k-9"></L>\'),t.6(".k-9").8("d",2(){n(3).K("k-E"),n(3).v("4").y("5")?n(3).v("4").q("5").A():n(3).v("4").m("5").l()})},"R"===e.h?J():t.m("w"),e.I===!0&&t.P("17","1j"),u=2(){n(a).T()>O&&t.6("4").l(),n(a).T()<=O&&t.6("4").A().q("5")},u(),n(a).8("1l",u)})}}(b),2(n,o,t,e){n.p.j=2(e){c"1h"1k o||F.1m||F.16.1n().1o(/1i 1f 19 7/i)?(3.x(2(){f o=!1;n(3).8("d",2(t){f e=n(3);e[0]!=o[0]&&(t.18(),o=e)}),n(t).8("d 1g 1a",2(t){1b(f e=!0,i=n(t.r).1e(),s=0;s<i.1d;s++)i[s]==o[0]&&(e=!1);e&&(o=!1)})}),3):!1}}(b,a,G),b.p.j=D(b.p.j),2(n){n(G).1c(2(){n("#C").U({B:"V",h:"R"}),n("#C H:z(4)").j()})}(b);',62,87,'||function|this|ul|open|find||on|button|window|jQuery|return|click||var|menu|format||doubleTapToGo|submenu|show|addClass|||fn|removeClass|target|||resizeFix|siblings|dropdown|each|hasClass|has|hide|title|cssmenu|doubleTapToGoDecorator|opened|navigator|document|li|sticky|multiTg|toggleClass|span|prepend|sub|768|css|href|multitoggle|div|width|menumaker|Menu|class|attr|location|display|apply|extend|parent|next|id|block|userAgent|position|preventDefault|os|MSPointerDown|for|ready|length|parents|phone|touchstart|ontouchstart|windows|fixed|in|resize|msMaxTouchPoints|toLowerCase|match'.split('|'),0,{})) </SCRIPT> <STYLE> #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{font-family:Montserrat,sans-serif;background:#333333} #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-center ul ul{text-align:left} #cssmenu.align-right > ul > li{float:right} #cssmenu > ul > li > a{padding:17px;font-size:12px;letter-spacing:1px;text-decoration:none;color:#dddddd;font-weight:700;text-transform:uppercase} #cssmenu > ul > li:hover > a{color:#ffffff} #cssmenu > ul > li.has-sub > a{padding-right:30px} #cssmenu > ul > li.has-sub > a:after{position:absolute;top:22px;right:11px;width:8px;height:2px;display:block;background:#dddddd;content:''} #cssmenu > ul > li.has-sub > a:before{position:absolute;top:19px;right:14px;display:block;width:2px;height:8px;background:#dddddd;content:'';-webkit-transition:all .25s ease;-moz-transition:all .25s ease;-ms-transition:all .25s ease;-o-transition:all .25s ease;transition:all .25s ease} #cssmenu > ul > li.has-sub:hover > a:before{top:23px;height:0} #cssmenu ul ul{position:absolute;left:-9999px} #cssmenu.align-right ul ul{text-align:right} #cssmenu ul ul li{height:0;-webkit-transition:all .25s ease;-moz-transition:all .25s ease;-ms-transition:all .25s ease;-o-transition:all .25s ease;transition:all .25s ease} #cssmenu li:hover > ul{left:auto} #cssmenu.align-right li:hover > ul{left:auto;right:0} #cssmenu li:hover > ul > li{height:35px} #cssmenu ul ul ul{margin-left:100%;top:0} #cssmenu.align-right ul ul ul{margin-left:0;margin-right:100%} #cssmenu ul ul li a{border-bottom:1px solid rgba(150,150,150,0.15);padding:11px 15px;width:170px;font-size:12px;text-decoration:none;color:#dddddd;font-weight:400;background:#333333} #cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a{border-bottom:0} #cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover{color:#ffffff} #cssmenu ul ul li.has-sub > a:after{position:absolute;top:16px;right:11px;width:8px;height:2px;display:block;background:#dddddd;content:''} #cssmenu.align-right ul ul li.has-sub > a:after{right:auto;left:11px} #cssmenu ul ul li.has-sub > a:before{position:absolute;top:13px;right:14px;display:block;width:2px;height:8px;background:#dddddd;content:'';-webkit-transition:all .25s ease;-moz-transition:all .25s ease;-ms-transition:all .25s ease;-o-transition:all .25s ease;transition:all .25s ease} #cssmenu.align-right ul ul li.has-sub > a:before{right:auto;left:14px} #cssmenu ul ul > li.has-sub:hover > a:before{top:17px;height:0} @media all and (max-width:768px),only screen and (-webkit-min-device-pixel-ratio:2) and (max-width:1024px),only screen and (min--moz-device-pixel-ratio:2) and (max-width:1024px),only screen and (-o-min-device-pixel-ratio:2/1) and (max-width:1024px),only screen and (min-device-pixel-ratio:2) and (max-width:1024px),only screen and (min-resolution:192dpi) and (max-width:1024px),only screen and (min-resolution:2dppx) and (max-width:1024px){#cssmenu{width:100%}#cssmenu ul{width:100%;display:none}#cssmenu.align-center > ul{text-align:left}#cssmenu ul li{width:100%;border-top:1px solid rgba(120,120,120,0.2)}#cssmenu ul ul li,#cssmenu li:hover > ul > li{height:auto}#cssmenu ul li a,#cssmenu ul ul li a{width:100%;border-bottom:0}#cssmenu > ul > li{float:none}#cssmenu ul ul li a{padding-left:25px}#cssmenu ul ul ul li a{padding-left:35px}#cssmenu ul ul li a{color:#dddddd;background:none}#cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a{color:#ffffff}#cssmenu ul ul,#cssmenu ul ul ul,#cssmenu.align-right ul ul{position:relative;left:0;width:100%;margin:0;text-align:left}#cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before{display:none}#cssmenu #menu-button{display:block;padding:17px;color:#dddddd;cursor:pointer;font-size:12px;text-transform:uppercase;font-weight:700}#cssmenu #menu-button:after{position:absolute;top:22px;right:17px;display:block;height:4px;width:20px;border-top:2px solid #dddddd;border-bottom:2px solid #dddddd;content:''}#cssmenu #menu-button:before{position:absolute;top:16px;right:17px;display:block;height:2px;width:20px;background:#dddddd;content:''}#cssmenu #menu-button.menu-opened:after{top:23px;border:0;height:2px;width:15px;background:#ffffff;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}#cssmenu #menu-button.menu-opened:before{top:23px;background:#ffffff;width:15px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}#cssmenu .submenu-button{position:absolute;z-index:99;right:0;top:0;display:block;border-left:1px solid rgba(120,120,120,0.2);height:46px;width:46px;cursor:pointer}#cssmenu .submenu-button.submenu-opened{background:#262626}#cssmenu ul ul .submenu-button{height:34px;width:34px}#cssmenu .submenu-button:after{position:absolute;top:22px;right:19px;width:8px;height:2px;display:block;background:#dddddd;content:''}#cssmenu ul ul .submenu-button:after{top:15px;right:13px}#cssmenu .submenu-button.submenu-opened:after{background:#ffffff}#cssmenu .submenu-button:before{position:absolute;top:19px;right:22px;display:block;width:2px;height:8px;background:#dddddd;content:''}#cssmenu ul ul .submenu-button:before{top:12px;right:16px}#cssmenu .submenu-button.submenu-opened:before{display:none}} </STYLE> Semoga Bermanfaat dan
Terima Kasih telah berkunjung di https://agungpanduan.blogspot.co.id
0 Response to "Buat Sajian Drop Down Keren Responsive Hanya Dengan Add Widget"
Posting Komentar