Halaman

misther-junett.blogspot.com
  • Web
  • misther-junett

    • Selasa, 15 Februari 2011

    Cara memasang menu dan submenu di blog


    Selamat bertemu lagi sobat bloger, semoga masih tetap semangat walaupun begitu banyak yang dihadapi, dan tetap semangat untuk terus melanjutkan membaca celotehanku yang tak pernah habis. hehehe
    Berkaitan dengan judul postingan ini, kali ini saya akan mencoba berbagi pengalaman kepada sobat yang kebetulan mampir di sini.
    Mungkin bagi sobat yang sudah lama menggunakan blogger sudah tidak asing lagi dengan yang akan saya utarakan di sini, dan mungkin tidak lagi membutuhkannya lagi. Tapi mungkin bagi newbie seperti saya ini masih perlu mempelajari hal yang satu ini.

    Okelah kalau begitu, mari kita pelajari bagaimana cara buat ( lebih tepatnya : cara pasang ) Menu Horizontal di blog kita.

    Ikuti langkah berikut : 
    1. Pertama silahkan kunjungi website berikut : http://www.mycssmenu.com/ . 
    2. Di halaman utama web tersebut akan kita temui berbagai macam variasi betuk menu horizontal 
        maupun yang vertical. Kita tinggal pilih yang mana yang akan kita gunakan. 
        Perhatikan pada gambar berikut ini, saya ambil satu contoh saja. 
      
    3. Untuk mengambil kode dan mengatur tampilan Menu Horizontal silahkan klik customize 
    4. Setelah di klik akan muncul jendela baru. Maka akan terlihat tampilan seperti berikut :  



     5. Double Klik satu per satu menu atau sub menu untuk menentukan target pencaharian......
         seperti contoh berikut .....


    6. Mohon Di isi pada kotak dialog bagian "URL" misalnya 
        http://www.blogger.com/post-create.g?blogID=5956534234837024080 untuk menuju ke alamat tersebut.
       sedangkan untuk kotak target dan title text (Boleh tidak diisi)
    7. Setelah semua link menu dan submenu selesai dibuat (dilinkkan) ---> Ingat, Sebaiknya semua link harus sudah ter link supaya proses pengCopyan Kode HTML atau CSS hanya dilakukan satu kali saja.
    8. Proses selanjutnya klik pada tab HTML --> Copy kode HTMLnya --> Buka Blog Anda --> Pilih Rancangan --> Tambah widget --> Paste Kode HTML yang sudah di Copy tadi --> Lalu Save

    Selamat Mencoba --> Mudah-mudahan hasilnya memuaskan.........
    0 komentar

    Cara Membuat Menu Bar Dengan Sub-Sub Menunya



    Dikarenakan banyak yang nanya melalui kontak admin soal cara membuat menu bar horisontal dilengkapi sub-sub menunya yang seperti ical pakai di blog ini, mending ical posting aja tutorialnya. Sebenarnya ical sudah pernah posting tentang membuat menu bar tapi yang dulu tidak pakai sub-sub menu , hanya menu utama yang bisa, tapi langkahnya tidak repot, tinggal add element saja, kalau yang ini harus masuk di Edit HTML blog, tapi mudah juga koq
    Ini langkahnya ical paparkan sedemikian detail.

    1. Login ke blog
    2. Pilih blog yang ingin di tambahkan menu bar
    3. Pilih Template/Layout -> Edit Html (jangan lupa ceklist expand widget template)
    4. Cari kode yang mirip ini :

    body {
    margin: 0;
    text-align: center;
    min-width: 900px;
    background: #000000) repeat-x $startSide top;
    color: $textColor;
    font-size: small;
    }

    yang penting ada kode body nya

    5. Tempat kode dibawah ini pas dibawah kode langkah 4

    #navbar-iframe{display:none;height:0;visibility:hidden;}


    #NavbarMenu{background:black; width:950px; height:40px; color:white; margin:0 auto; padding:0; font:bold 8px Arial,Tahoma,Verdana; text-decoration:none}

    #NavbarMenuleft{width:950px; float:$startSide; margin:0; padding:0; text-decoration:none}

    #nav{margin:0; padding-top:3px; padding-left:3px}

    #nav ul{float:$startSide; list-style:none; margin:0; padding:0; text-decoration:none}

    #nav li{list-style:none; margin:0; padding:0; text-decoration:none}

    #nav li a, #nav li a:link, #nav li a:visited{color:green; display:block; text-transform:uppercase; margin-left:0; padding:9px 15px 8px; font:bold 12px Arial,Times New Roman; text-decoration:none}

    #nav li a:hover, #nav li a:active{background:pink; color:green; margin:0; padding:9px 15px 8px; text-decoration:none}

    #nav li li a, #nav li li a:link, #nav li li a:visited{background:white; width:150px; color:#6699ff; text-transform:lowercase; float:none; margin:0; padding:7px 10px; border-bottom:1px solid #6699ff; border-left:1px solid #6699ff; border-right:1px solid #6699ff; font:normal 14px Georgia,Times New Roman; text-decoration:none}

    #nav li li a:hover, #nav li li a:active{background:#6699ff; color:#fff; padding:7px 10px; text-decoration:none}

    #nav li{float:$startSide; padding:0; text-decoration:none}

    #nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0; text-decoration:none}

    #nav li ul a{width:140px; text-decoration:none}

    #nav li ul ul{margin:-32px 0 0 171px}

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

    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left:auto}

    #nav li:hover, #nav li.sfhover{position:static}


    6. Setelah itu cari kode seperti ini:
    <body>

    7. Tempatkan kode dibawah ini, tepat dibawah kode langkah 6

    <div id='NavbarMenu'>
    <div id='NavbarMenuleft'><script type='text/javascript'>
    function setAttributeOnload(object, attribute, val) {
    if(window.addEventListener) {
    window.addEventListener(&quot;load&quot;,
    function(){ object[attribute] = val; }, false);
    } else {
    window.attachEvent(&#39;onload&#39;, function(){ object[attribute] = val; });
    }
    }
    </script>

    <ul id='nav'>
    <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
    <li><a href='rss.xml'>Site Map</a></li>
    <li><a href='http://icalcell.blogspot.com/search/label/Tutorial%20Blog?max-results=999'>Tutorial Blog</a></li>
    <li>
    <a href='#'>EDIT MENU INI</a>
    <ul>
    <li>
    <a href='#'>EDIT SUB MENU INI&#160;&#160;&#160;&#160;&#187;</a>
    <ul>
    <li><a href='EDIT URL UNTU SUB SUB MENU ' target='_blank'>EDIT SUB SUB MENU INI/a>

    </li>

    </ul>
    <li><a href='http://icalcell.blogspot.com/2009/11/program-ptc.html'>Program PTC</a></li>
    </li>
    <li><a href='http://icaltogel.blogspot.com' target='_blank'>Togel Mania

    </a></li>

    </ul>
    </li>
    <li><a href='#'>Download</a></li>
    <li><a href='#'>Tukar Link</a></li>
    <li><a href='#'>Hubungi Saya</a></li>
    <li><a href='#'>Ke</a>
    <ul><li><a href='http://www.google.com' target='_blank'>Google</a></li>
    <li><a href='http://www.yahoo.com' target='_blank'>Yahoo</a></li>
    <li><a href='http://www.youtube.com' target='_blank'>Youtube</a></li>
    <li><a href='http://www.facebook.com' target='_blank'>Facebook</a></li>
    </ul>
    </li>
    </ul>
    </div>
    </div>

    Setelah itu preview, setelah tampilan bagus baru di save.

    NB:
    Untuk penyesuaian dengan warna template yang kamu gunakan silahkan edit kode pada langkah 5.
    Untuk mengedit Menu-menu dan sudmenu apa saja yang ingin ditampilkan silahkan edit kode pada langkah 7
    2 komentar