Cara Membuat Navigasi Menu Top ATas di Blog - d-ii

Cara Membuat Navigasi Menu Top ATas di Blog

Cara Membuat Navigasi Menu Top ATas di Blog


Cara Membuat Navigasi Menu Top Atas di Blog , Selain Navigasi berfungsi untuk memudahkan pengunjung berelancar di Blog kita juga tentunya agar tampilan Blog semakin cantik
Dibawah ini dua menu yang bisa dipasang untuk di Blog kita ,seperti apa ? Sebagai berikut :

Navigasi Menu Pertama :
1.Login ke Blog kemudian edit html
2. Kemudian Copy kode dibawah ini dan diletakan diatas kode ]]></b:skin>


        /* ichaTopnav */

        ul.topnav {

        list-style-type: none;

        margin: 0;

        padding: 0;

        overflow: hidden;

        background-color: #000000;

        }

        ul.topnav li {float: left;}

        ul.topnav li a {

        display: inline-block;

        color: #04e8f4;

        text-align: center;

        padding: 40px 60px;

        text-decoration: none;

        transition: 0.3s;

        font-size: 40px;

        }

        ul.topnav li a:hover {background-color: #fff;}

        ul.topnav li.icon {display: none;}


        @media screen and(max-width:680px) {

        ul.topnav li:not(:first-child) {display: none;}

        ul.topnav li.icon {

        float: right;

        display: inline-block;

        }

        }


        @media screen and(max-width:680px) {

        ul.topnav.responsive {position: relative;}

        ul.topnav.responsive li.icon {

        position: absolute;

        right: 0;

        top: 0;

        }

        ul.topnav.responsive li {

        float: none;

        display: inline;

        }

        ul.topnav.responsive li a {

        display: block;

        text-align: left;

        }

        }


3.Selanjutnya Copy kode dibawah ini dan diletakan dibawah <body>



        <!-- icha navigasi menu top -->

        <ul class='topnav' id='ichaTopnav'>

        <li><a href='#'>Home</a></li>

        <li><a href='#'>1</a></li>

        <li><a href='#'>2</a></li>

        <li><a href='#'>3</a></li>

        <li><a href='#'>4</a></li>

        <li class='icon'>

        <a href='javascript:void(0);' onclick='myFunction()'/>

        </li>

        </ul>

        <!-- icha navigasi menu top selesai -->


Keterangan :
Ganti Tanda # dengan Link yang akan dibuat untuk Menu Navigasi kamu
Ganti Tulisan Menu sesuai dengan yang di inginkan

4.Selanjutnya Copy kode Script Fungsi dibawah ini dan diletakan diatas </head>


        <script>

        function myFunction() {

        var x = document.getElementById(&quot;myTopnav&quot;);

        if (x.className === &quot;topnav&quot;) {

        x.className += &quot; responsive&quot;;

        } else {

        x.className = &quot;topnav&quot;;

        }

        }

        </script>

5.etelah itu save / simpan template dan lihat hasilnya

Membuat Navigasi Menu Kedua :
1.Login ke Blog kemudian edit html template
2.Selanjutnya Copy kode dibawah ini dan diletakan diatas ]]></b:skin>


/*Top Menu*/
#top-menu{margin:auto;padding: 0;width: 950px;background:#fff;border-bottom:1px solid #ddd;}
#top-menu-wrap{margin:auto;padding: 0;width: 950px;background:#fff;}
#navwrap {margin: 0px auto; width:560px; float:left;background:#02f242;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: arial; font-weight:bold; font-size:10px;display:block;padding:10px 10px;color:#000;text-decoration:none; text-transform:uppercase;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#ffffff; color:#000000;}}
#navbar-iframe {display: none !important;}

3.Kemudian Copy kode di bawah ini dan diletakan dibawah kode <body>

<div id='top-menu'>
<div id='top-menu-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='#' title='Menu'>Menu</a></li>
<li><a href='#' title='Menu'>Menu 1</a></li>
<li><a href='#' title='Menu'>Menu 2</a></li>
<li><a href='#' title='Menu'>Menu 3</a></li>
<li><a href='#' title='Menu'>Menu 4</a></li>
<li><a href='#' title='Menu'>Menu 5</a></li>
<li><a href='#' title='Menu'>Menu 6</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>


Keterangan :
Ganti Tanda # dengan Url Link Menu Yang akan dibuat Navigasi kamu
Ganti Tulisan Menu sesuai dengan yang di inginkan
Ganti Kode Warna, Background , Teks dan lain nya sesuai dengan selera

4.Setelah itu Save / Simpan template dan lihat hasilnya

Begitulah cara membuat navigasi menu top atas di Blog "bermanfaat"

Cara Membuat Navigasi Menu Top ATas di Blog

Author:

#

Artikel Menarik Banget ? d-ii , Suka...

Scroll to top