AGUNG TUTORIAL

Belajar Bordir Wilcom dan Tajima Mesin SWF, VBA Macro Excel, Design Grafis CorelDraws, Video Editing, Download Software-software, Solusi Masalah Error Komputer, Jaringan dan Internet, Analisis Jaringan, Analisis Problem Hardware dan sebagainya

12/03/2018

BUAT MENU DROP DOWN KEREN RESPONSIVE HANYA DENGAN ADD WIDGET

Artikel ini merupakan artikel kelanjut BUAT MENU DROP DOWN KEREN HANYA DENGAN ADD WIDGET. Pada pembahasan sebelumnya dijelaskan bahwa Menu Drop Down yang dibuat hanya cocok pada saat tampil ketika menggunakan komputer. Lalu menu seperti apa yang cocok untuk menu yang ditampilkan pada saat menggunakan Handphone?? Yaitu dengan menggunakan Menu Flat Drop Down Responsive. Menu ini dapat digunakan dalam dua kondisi dilihat dengan komputer maupun handphone.












Adapun untuk memasang menu dropdown yang dibagikan pada artikel ini,
  1. Login terlebih dahulu ke Dashboard Blogspot.
  2. Masuk ke Menu Tata Letak atau Thema.
  3. Ganti url ("#") dan Judul Menu  pada kode HTML/JAVASCRIPT yang admin bagikan.
  4. Add Gadget dan pilih HTML/JavaScript.
  5. Pasang hasilnya di atas atau di bawah head (terserah anda).

Code yang ditambahkan pada Widget atau Gadget adalah 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://www.agungpanduan.com

2 komentar:

  1. Bisa diaplikasikan segera nih... tapi untuk blog yang masih berstatus review adsense ..ok gak ya
    ?

    BalasHapus
  2. Kalau enggak pakai itemprop ngaruh gak min ?
    Misalnya langsung kayak gini,
    Sub Menu

    BalasHapus