Cara Membuat Menu Di blog Dengan Sangat Mudah Terbaru

KODE ATAS
Cara Membuat Menu Di blog Dengan Sangat Mudah Terbaru

Toturialblogcom : Trik kali ni saya akan membagikan cara membuat menu di blogger dengan cara mudah dan peraktis tentunya bisa di gunakan pada blog atau website ,bagi anda yang belum membuat menu di blog segeralah anda bikin dengan cara yang sangat mudah ,anda bisa melihat pada menu yang ada di blog saya anggap saja itu sebagai demonya , lumannya bagus dan lebih menu Seo friendly ,karan menu ini berasal dari Mas Sugeng ,jadi saya akan shree menu ini ke pada anda semunya ,agar blog anda kelitan lebih bagus dan memudahkan bagi pengunjung untuk memilih judul yang dia cari .yu tunnggu apa yu kita langsung aja Toturialnya di bawah ini Cara Membuat Menu Di blog Dengan Sangat Mudah Terbaru .


1 Anda Login Ke Blogger anda masaing masing
2 Dan anda pilih menu Teamplate dan pilih Edit Html 
3 Kemudain anda Tekan CTRL+F dan anda carai kode yang ber nama kode ]]></b:skin> atau kode </style> dan copy kan kode di bawah di atasnya kode  ]]></b:skin>


    /* NAVIGATION MENU 2 */
    .toggleMenu{display:none;background:#E73138;padding:0 15px;height:48px;line-height:48px;color:#fff!important}
    #nav{font:normal bold 12px Arial,sans-serif;background:#333333;text-transform:uppercase;height:48px;line-height:48px}
    .nav-menu2{background:#333333;list-style:none;margin:0 0 0 0;*zoom:1;float:left}
    .nav-menu2:before,.nav-menu2:after{content:" ";display:table}
    .nav-menu2:after{clear:both}
    .nav-menu2 ul{list-style:none;margin:0 0 0 0;width:12em}
    .nav-menu2 a{display:block;padding:0 15px}
    .nav-menu2 li{position:relative;margin:0 0}
    .nav-menu2 > li{float:left}
    .nav-menu2 > li > a{display:block;height:48px;line-height:48px;color:#ffffff;box-shadow:0 4px 0 #333333 inset}
    .nav-menu2 > li > a.active{background:#222222;box-shadow:0 4px 0 #E73138 inset}
    .nav-menu2 > li:hover > a{background:#222222;box-shadow:0 4px 0 #E73138 inset}
    .nav-menu2 li ul{background:#fff;display:block;position:absolute;left:0;z-index:10;visibility:hidden;opacity:0;-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;border:1px solid #d9d9d9;border:1px solid rgba(217,217,217,1);box-shadow:0 0 2px rgba(0,0,0,0.2)}
    .nav-menu2 li li ul{left:100%;top:-1px}
    .nav-menu2 > li.hover > ul{visibility:visible;opacity:10}
    .nav-menu2 > li > ul:before{content:"";width:0;height:0;position:absolute;bottom:100%;left:20px;border-width:8px;border-style:solid;border-color:transparent transparent #fff transparent;display:block}
    .nav-menu2 li li.hover ul{visibility:visible;opacity:10}
    .nav-menu2 li li a{display:block;color:#333;position:relative;z-index:100;line-height:32px}
    .nav-menu2 li li a:hover{background:#f0f0f0}
    .nav-menu2 li li li a{background:#fff;z-index:20;color:#333}
    .nav-menu2 li .parent:after{content:"\f107";font-family:FontAwesome;font-style:normal;font-weight:normal;text-decoration:inherit;padding-left:6px}
    #search-form{background:#333333;float:right;margin:0 0;width:200px}
    #search-form table{width:100%;margin:0 0 0 0}
    #search-form td.search-box{padding-right:30px}
    #search-form input#search-box[type="text"]{background:#ffffff;height:36px;line-height:36px;margin:5px 0 5px 10px;padding:0 10px;width:99%;color:#666666;border:none}
    #search-form input#search-button[type="submit"]{font-family:FontAwesome;background:#E73037;color:#ffffff;height:36px;line-height:36px;margin:5px 10px 5px 0;padding:0 12px;border:none;outline:none;transition:all 0.25s;-moz-transition:all 0.25s;-webkit-transition:all 0.25s}
    #search-form input#search-button[type="submit"]:hover{background:#222222;cursor:pointer}
    #search-form input#search-box[type="text"]:focus{background:#eee;outline:none}



    4 Dan cara selanjutnya anda tinggal cara lagi kode </header> dan copy kan kode di bawah di di bawahnya kode </header>

      <nav id='nav'>
      <a class='toggleMenu' href='#'><i class='fa fa-th-list'></i> Menu</a>
      <!-- secondary navigation menu start -->
      <ul class='nav nav-menu2'>
      <li><a class='active' href='masyadi.com'><i class='fa fa-home'></i> Home</a></li>
      <li><a href='#'>Menu 1</a>
      <ul>
      <li><a href='#'>Sub Menu 1</a></li>
      <li><a href='#'>Sub Menu 2</a></li>
      <li><a href='#'>Sub Menu 3</a></li>
      </ul>
      </li>
      <li><a href='#'>Menu 2</a>
      <ul>
      <li><a href='#'>Sub Menu 1</a>
      </li>
      <li><a href='#'>Sub Menu 2</a></li>
      <li><a href='#'>Sub Menu 3</a></li>
      </ul>
      </li>
      <li><a href='#'>Menu 3</a></li>
      <li><a href='masyadi.com'>Markup</a></li>
      <li><a href='masyadi.com'>Error Page</a></li>
      <li><a href='/p/lorem-ipsum-dolor-sit-amet-consectetur.html'>Static Page</a></li>
      </ul>
      <!-- secondary navigation menu end -->
      <form action='/search' id='search-form' method='get' style='display: inline;'><table><tbody><tr><td class='search-box'><input id='search-box' name='q' onblur='if(this.value==&#39;&#39;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&#39;&#39;;' type='text' value='Search...' vinput=''/></td>
      <td class='search-button'><input id='search-button' type='submit' value=''/></td></tr></tbody></table></form>
      </nav>


      5 Masih dalam menu Edit Html dan anda cara lagi Kode seperti kode </body> dan copy kan kode di bawah di atas kode </body>

        <script type='text/javascript'>
        //<![CDATA[
        var ww=document.body.clientWidth;$(document).ready(function(){$(".nav li a").each(function(){if($(this).next().length>0){$(this).addClass("parent")}});$(".toggleMenu").click(function(e){e.preventDefault();$(this).toggleClass("active");$(".nav").toggle()});adjustMenu()});$(window).bind("resize orientationchange",function(){ww=document.body.clientWidth;adjustMenu()});var adjustMenu=function(){if(ww<768){$(".toggleMenu").css("display","inline-block");if(!$(".toggleMenu").hasClass("active")){$(".nav").hide()}else{$(".nav").show()}$(".nav li").unbind("mouseenter mouseleave");$(".nav li a.parent").unbind("click").bind("click",function(e){e.preventDefault();$(this).parent("li").toggleClass("hover")})}else if(ww>=768){$(".toggleMenu").css("display","none");$(".nav").show();$(".nav li").removeClass("hover");$(".nav li a").unbind("click");$(".nav li").unbind("mouseenter mouseleave").bind("mouseenter mouseleave",function(){$(this).toggleClass("hover")})}}
        //]]></script><script src='https://googledrive.com/host/0BxH5pEKXqBWUSUhtOTZFOUw5QkU/menu-navigasi-evo-magz-masyadi-com.js'></script>


        6 Dan anda cara lagi kode ]]></b:skin> atau kode </style> dan copy kode di bawah di atasnya kode ]]></b:skin> atau kode </style>

          @media only screen and (max-width: 768px) {
                .nav { float: none; width: 100%; max-width: 100%; }.active { display: block; }#search-form { width: 100%; margin: 0 0 0 0 !important; }.nav li ul:before { display: none; }.nav > li { float: none; overflow: hidden; }.nav ul { display: block; width: 100%; float: none; }.nav-menu2 li ul { background: #eee; border: none; box-shadow: none; }.nav-menu2 li li ul { background: #f5f5f5; }.nav-menu2 li li a:hover { background: #ddd; }.nav > li.hover > ul, .nav li li.hover ul { position: static; }#search-form { width: 100%; background: #444; }#search-form td.search-box { padding: 0 10px !important; }#search-form td.search-button { padding: 0 10px; width: 1%; }#search-form input#search-box[type="text"] { margin: 0 0 0 0; }#search-form input#search-button[type="submit"] { margin: 0 0 0 0; }
          }


          7 Kemu dian anda Save dan lihat hasilnya ,juka menu slidernya ga keluwar anda bisa Copy kan kode di bawah di atas kode </head> kemudian anda Seve

            <link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>


            8 Nah Kemudian anda Save dan lihat hasilnya apakah seprurna atau gagal ,anda bisa mengulanggi lagi kembali ,dan bila anda masih binggung cara nya anda bisa chet di komentar munkin saya bisa ,membantu anda ,cukup sakian dari saya semoga artikel ini bisa bermanpaat bagi anda ,dah salam blogger dan salam sukkes untuk anda .


              KODE BAWAH
              Share this article :
              +
              Previous
              Next Post »
              0 Komentar untuk "Cara Membuat Menu Di blog Dengan Sangat Mudah Terbaru "

              Silahkan Sobat tinggalkan komentar dengan kata - kata yang Baik, Bijak dan Sopan...!!!

              Yang tidak diperbolehkan dalam berkomentar :

              1. Komentar yang mengandung unsur SARA.
              2. Komentar yang berbau Porno.
              3. Komentar Saling Caci maki.
              4. Komentar yang Memasukan Link Iklan dan Ling Atip.
              5. Di Lalarang Mengcopy Paste Pada Artikel Di Sini.

              Saya harap Sobat dapat mematuhi aturan berkomentar yang saya buat. Jika ada komentar yang melanggar ketentuan tersebut diatas dan dianggap spam akan Saya Hapus. Atas kerjasama sobat sekalian saya ucapkan banyak Terima Kasih. Salam Sukses selalu untuk Sobat dan Salam Blogger.

              Bagi Anda yang Mau di Tayakan ? Anda Bisa Anda Bisa HUB Alamat Facebook Saya (https://www.facebook.com/toturialblogcom)

              Terima Kasih Sudah Berkomentar
               
              Copyright © 2015 TUTORIAL - All Rights Reserved
              Template By. Kunci Dunia
              Back To Top