Cara Memasang Tab Menu Horizontal

Cara Memasang Tab Menu Horizontal~ Inilah menu blog yang paling keren di seluruh dunia scrip ini saya dapatkan dari sebuah blog luar negri berbahasa italy. kebetulan sya tidak bisa ahasa Itally jadi sya mencoba untuk menerjemahkannya menjadi bahasa indonesia 
berikut ulasannya

salam sukses untuk semua paling tokcer visitor
fungsi menu pada sebuah blog adalah untuk mengoptimalkan performance sebuah blog sekaligus mempermudah pengunjung untuk menelusuri semua isi postingan kita. coba sobat liat di website-website profesional seperti kompas.com  kapanlagi.com yahoo.com okezone.com dll. pati semuanya memakai tab menu baik horizontal maupun vertikal bahkan ada yang memakai slide show untuk lebih menarik lagi.

setelah kita mengetahui fungsi tab menu pada sebuah blog, baru kita akan memasuki tahap cara memasang tab menu horizontal di blog tampa perlu Edit HTML yang rumit dan sebagian menyebabkan kerusakan yang berisiko tinggi tapi tutorial yang saya muat kali ini tidak memerlukan edit HTML cuman Add Gedget doang.

jika ingin melihat demo hasilnya silahkan klik DISINI

langkah 1, 

langkah 2,
klik Tata Letak / layout

langkah 3,
Add Gadged kemudian pastekan kode dibawah ini dikolom tersebut

<script src='http://code.helperblogger.com/dd-level-menu.js'
type='text/javascript'></script>
<style>
/* ######### Drop Down Menu Bu HelperBlogger.com ######### */    
/* ######### Matt Black Strip Main Menu Bar CSS ######### */
.ddsubmenustyle, .ddsubmenustyle div {
        /*topmost and sub DIVs, respectively*/
    font: normal 13px Verdana;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    list-style-type: none;
    background: white;
    border: 1px solid black;
    border-bottom-width: 0;
    visibility: hidden;
    z-index: 100;
}

.ddsubmenustyle ul {
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    list-style-type: none;
    border: 0px none;
}

.ddsubmenustyle li a {
    display: block;
    width: 170px;
        /*width of menu (not including side paddings)*/
    color: black;
    background-color: lightyellow;
    text-decoration: none;
    padding: 4px 5px;
    border-bottom: 1px solid black;
}

* html .ddsubmenustyle li {
        /*IE6 CSS hack*/
    display: inline-block;
    width: 170px;
        /*width of menu (include side paddings of LI A*/
}

.ddsubmenustyle li a:hover {
    background-color: black;
    color: white;
}

.downarrowpointer {
        /*CSS for "down" arrow image added to top menu items*/
    padding-left: 4px;
    border: 0;
}

.rightarrowpointer {
        /*CSS for "right" arrow image added to drop down menu items*/
    position: absolute;
    padding-top: 3px;
    left: 100px;
    border: 0;
}

.ddiframeshim {
    position: absolute;
    z-index: 500;
    background: transparent;
    border-width: 0;
    width: 0;
    height: 0;
    display: block;
}
    /* ######### Black Strip Main Menu Bar CSS ######### */
.mattblackmenu ul {
    margin: 0;
    padding: 0;
    font: bold 12px Verdana;
    list-style-type: none;
    border-bottom: 1px solid gray;
    background: #414141;
    overflow: hidden;
    width: 100%;
}

.mattblackmenu li {
    display: inline;
    margin: 0;
}

.mattblackmenu li a {
    float: left;
    display: block;
    text-decoration: none;
    margin: 0;
    padding: 6px 8px;
        /*padding inside each tab*/
    border-right: 1px solid white;
        /*right divider between tabs*/
    color: white;
    background: #414141;
}

.mattblackmenu li a:visited {
    color: white;
}

.mattblackmenu li a:hover {
    background: black;
        /*background of tabs for hover state */
}

.mattblackmenu a.selected {
    background: black;
        /*background of tab with "selected" class assigned to its LI */
}
</style>
<div id="ddtopmenubar" class="mattblackmenu">
    <ul>
        <li>
            <a href="#">LINK1</a>
        </li>
        <li>
            <a href="#" rel="ddsubmenu1">LINK2</a>
        </li>
        <li>
            <a href="#" rel="ddsubmenu2">LINK3</a>
        </li>
        <li>
            <a href="#">Link4</a>
        </li>
        <li>
            <a href="#" rel="ddsubmenu3">LINK5</a>
        </li>
    </ul>
</div>
<script type="text/javascript">
    ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>
<ul class='ddsubmenustyle' id='ddsubmenu1'>
    <li>
        <a href='#'>LINK2 ITEM 1</a>
    </li>
    <li>
        <a href='#'>LINK2 ITEM 2</a>
        <ul>
            <li>
                <a href='#'>LINK2 ITEM 2.1</a>
            </li>
            <li>
                <a href='#'>LINK2 ITEM 2.2</a>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK2 ITEM 3</a>
        <ul>
            <li>
                <a href='#'>LINK2 ITEM 3.1</a>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK2 ITEM 4</a>
    </li>
</ul>
<ul class='ddsubmenustyle' id='ddsubmenu2'>
    <li>
        <a href='#'>LINK3 ITEM 1</a>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 2</a>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 3</a>
        <ul>
            <li>
                <a href='#'>LINK3 ITEM 3.1</a>
            </li>
            <li>
                <a href='#'>LINK3 ITEM 3.2</a>
            </li>
            <li>
                <a href='#'>LINK3 ITEM 3.3</a>
            </li>
            <li>
                <a href='#'>LINK3 ITEM 3.4</a>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 4</a>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 5</a>
        <ul>
            <li>
                <a href='#'>LINK3 ITEM 5.1</a>
            </li>
            <li>
                <a href='#'>LINK3 ITEM 5.2</a>
                <ul>
                    <li>
                        <a href='#'>LINK3 ITEM 5.2 1</a>
                    </li>
                    <li>
                        <a href='#'>LINK3 ITEM 5.2 2</a>
                    </li>
                    <li>
                        <a href='#'>LINK3 ITEM 5.2 3</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href='#'>LINK3 ITEM 6</a>
    </li>
</ul>
<ul class='ddsubmenustyle' id='ddsubmenu3'>
    <li>
        <a href='#'>LINK5 ITEM 1</a>
    </li>
    <li>
        <a href='#'>LINK5 ITEM 2</a>
    </li>
    <li>
        <a href='#'>LINK5 ITEM 3</a>
    </li>
    <li>
        <a href='#'>LINK5 ITEM 4</a>
    </li>
    <li>
        <a href='#'>LINK5 ITEM 5</a>
    </li>
</ul>


catatan
1. kode background: #414141; untuk mengubah warna backgrond menunya. caranya klik DISINI
2. kode warna MERAH untuk merubah judul menunya
3. kode warna KUNING untuk merubah judul menu horizontalnya (kebawah)
4. kode # untuk memasukkan link yang ingin dituju 

jika sobat bingung untuk editnya coba pasang gadgetnya terus coba pasti nantinya bisa sendiri hehe

langkah 4
selesai

semoga tutorial Cara Memasang Tab Menu Horizontal bermangfaat bagi para pembaca dan kami tunggu komentarnya


5 Komentar untuk "Cara Memasang Tab Menu Horizontal "

This piece of writing gives clear idea in support of the new users of
blogging, that actually how to do running a
blog.
My web page: New Bubble Shooter

Hmhm blogwalking kali ini nampaknya saya mendaptkan ttg codingan ya hihi.. Terimakasih ya postingannya, nambah ilmu.. Kamu juga bisa lihat ttg Cara Instal WordPress Pada Webfarm Web Nodes nih, lumayan buat nambah ilmu dan bacaan --> http://blog.jaringanhosting.com/index.php/wordpress-hosting-tips-jaringanhosting-com-cara-instal-wordpress-pada-webfarm-web-nodes-2/

terima kasih
ok semoga banyak kunjungannya ke tutorialnya Ailia ya
salam sukses dr blogger aceh

susah dapat d tempat lain gan
hehe

Biasakan diri kita untuk berterimakasih kepada orang yang telah mengajari kita walaupun itu hanya satu ayat
SPAMING AKN DIHAPUS OTOMATIS OLEH ROBOT BLOG INI

Back To Top