Cara Memasang Tab Menu Horizontal

Oleh Chairil Kaka

Friday, 23 May 2014

Bagikan :

Tweet

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

ok berikut tutorial cara memasang tab menu horizontal pada blog

langkah 1, 

masuk Blogger Dashbord 

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

Tag : Tutorial Blogger