Cara membuat Submenu bukan di template dari blogspot/buatan luar

Hai semua sahabat Blog, sekarang saya akan memberi tahu bagai mana cara memasukan Sub menu/sub page pada template selain dari blogspot/bukan design dari blogspot,nah sekarang saya akan menjelaskan Untuk template Simple Fast V2 download disini atau Simple Faster V2 Versi keaekaragaman blog download disini (sudah memiliki sub menu) nah langsung saja kita lanjutkan ke TKP


syarat-syarat yang harus dimiliki

1.harus memiliki blog
2.harus sabar karna kita akan menghadapi kode HTML yang banyak
3.harus teliti
4,dan paling penting harus memiliki koneksi internet


Langkahnya

1.download code HTML Template yang kamu inginkan
2.kalau sudah selesai copy seluruh HTMLnya
3.buka blog kamu
4.masuk ke Template>>edit HTML
5.hapus semua HTML blog kamu
6.paste HTML template yang baru
7.setelah itu copy code dibawah ini
  <style>
    #menunavigasihorisontal {
        background: #848484;
        width: 100%;

        color: #FFF;
            margin: 10px 0;
            padding: 0;
            position: relative;
            border-top:0px solid #960100;
            height:35px; }

    #bb2nav {
        margin: 0;
        padding: 0;}
    #bb2nav ul {
        float: left;
        list-style: none;
        margin: 0;
        padding: 0;}
    #bb2navli {
        list-style: none;
        margin: 0;
        padding: 0;}
    #bb2nav li a, #bb2nav li a:link, #bb2nav li a:visited {
        color: #FFF;
        display: block;
       font:bold 12px Helvetica, sans-serif;
       margin: 0;
        padding: 9px 12px 11px 12px;
            text-decoration: none;
            border-right:0px solid #627AAD;}
    #bb2nav li a:hover, #bb2nav li a:active {
        background: #2E9AFE;
        color: #FFF;
        display: block;
        text-decoration: none;
            margin: 0;
        padding: 9px 12px 11px 12px;}

    #bb2nav li {
        float: left;
        padding: 0;}
    #bb2nav li ul {
        z-index: 9999;
        position: absolute;
        left: -999em;
        height: auto;
        width: 160px;
        margin: 0;
        padding: 0;}
    #bb2nav li ul a {
        width: 140px;}
    #bb2nav li ul ul {
        margin: -25px 0 0 161px;}

    #bb2nav li:hover ul ul, #bb2nav li:hover ul ul ul, #bb2nav

li.sfhover ul ul, #bb2nav li.sfhover ul ul ul {
        left: -999em;}
    #bb2nav li:hover ul, #bb2nav li li:hover ul, #bb2nav li li

li:hover ul, #bb2nav li.sfhover ul, #bb2nav li li.sfhover ul, #bb2nav

li li li.sfhover ul {
        left: auto;}
    #bb2nav li:hover, #bb2nav li.sfhover {
        position: static;}
    #bb2nav li li a, #bb2nav li li a:link, #bb2nav li li a:visited {
        background: #EDEFF4;
        width: 120px;
        color: #3B5998;
        display: block;
        font:normal 12px Helvetica, sans-serif;
        margin: 1px 0 0 0;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    z-index:9999;
    border:1px solid #ddd;

    -moz-border-radius:4px;
    -webkit-border-radius:4px;}
    #bb2nav li li a:hover, #bb2nav li li a:active {
        background: #627AAD;
        color: #FFF;
        display: block;}
    #bb2nav li li li a, #bb2nav li li li a:link, #bb2nav li li li

a:visited {
        background: #EDEFF4;
        width: 120px;
        color: #3B5998;
        display: block;
        font:normal 12px Helvetica, sans-serif;
        padding: 9px 12px 10px 12px;
            text-decoration: none;
    z-index:9999;
    border:1px solid #ddd;
        margin: 1px 0 0  -14px;}
    #bb2nav li li li a:hover, #bb2nav li li li a:active {
        background: #627AAD;
        color: #FFF;
        display: block;}

    </style>
    <div id='menunavigasihorisontal'>
              <ul id='bb2nav'>
                <li>
                  <a href='#'>Home</a>
                </li>
                <li>
                  <a href='#'>Tentang Saya</a>
                </li>
                <li>
                  <a href='#'>Contact</a>
                     <ul>
                        <li><a href='#'>Sub Halaman 1</a></li>
                        <li><a href='#'>Sub Halaman 2</a></li>
                        <li><a href='#'>Sub Halaman 3</a></li>
                      </ul>
                </li>
                <li>
                  <a href='#'>Daftar Isi ?</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>
                   <ul>
                    <li><a href='#'>Sub Sub Menu 1</a></li>
                    <li><a href='#'>Sub Sub Menu 2</a></li>
                    <li><a href='#'>Sub Sub Menu 3</a></li>
                  </ul>
                  </li>
                  </ul>
8.delete HTML yang dibawah "<!-- navigasi dibuka -->" sampai
"<form action='/search' id='search' method='get'> <input name='q' placeholder='Search Here.....' size='40' type='text'/> </form>"

9.setelah itu pastekan kode tadi
10.tinggal di edit sedikit yang bertanda '#' diganti oleh url yang kamu ingin kan

Selesai.......
Kalau tidak mau susah-susah tinggal download aja yang versi keanekaragaman blog
download disini 


Semoga bermanfaat yang tadi saya berikan,jangan lupa ya untuk meninggalkan comment kalu bisa di share ya hehehehe........:D

Anda baru saja membaca artikel yang berkategori KEANEKA_RAGAMAN_BLOG dengan judul Cara membuat Submenu bukan di template dari blogspot/buatan luar. Anda bisa bookmark halaman ini dengan URL http://keanekaragamanblog.blogspot.com/2013/07/cara-membuat-submenu-bukan-di-template.html. Terima kasih!

Ditulis oleh: elevenstudios - Monday, July 1, 2013