30 January 2012

Cara Membuat Menu Navigasi dengan CSS Type 12

Kali ini saya akan berbagi  Tutorial Blog tentang bagaimana cara Membuat menu Navigasi yg Menarik dengan sentuhan CSS . Sebenarnya trik ini hanya Copas dari Tympanus.net
tapi karena Tympanus berbahasa inggris kadang kala ada yg kesulitan untuk menerapkannya di Blog .
Langsung saja

Menu model Kelima caranya :

1. Cari Kode ]]></b:skin> lalu taruh kode dibawah ini di atas kode b:skin tersebut :


#menu12 ul {
    list-style:none;
    font-family: 'palatino linotype',palatino;
    font-size: 30px;
    letter-spacing: -1px;
    line-height: 1.2em;
    float:left;
    clear:both;
    margin:20px;
    border:5px solid #ccc;
}
#menu12 ul li{
    float:left;
}
#menu12 ul li a{
    display:block;
    text-decoration:none;
    padding:5px 10px 5px 10px;
    background-color:#ddd;
    width:170px;
    text-align:center;
    border:4px double #ddd;
}
#menu12 ul li a span{
    display:block;
}
#menu12 ul li a span.title{
    color:#fff;
    padding-bottom:5px;
    border-bottom:1px solid #fff;
}
#menu12 ul li a:hover{
    background-color:#fff;
    border:4px double #ddd;
}
#menu12 ul li a:hover span.title{
    color:#333;
    border-bottom:1px solid #ddd;
    text-transform:uppercase;
}
#menu12 ul li a span.text{
    color:#999;
    font-size:12px;
    letter-spacing:0px;
    visibility:hidden
}
#menu12 ul li a:hover span.text{
  visibility:visible;
}

2. Masuk ke Rancangan lalu Klik Elemen Laman
3. Tambahkan Gadget , Pilih HTML/JavaSctirp
4. Lalu tambahkan Kode Ini :

<div id="menu12">
    <ul>
        <li><a href="">
                <span class="title">About</span>
                <span class="text">Who we are</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Portfolio</span>
                <span class="text">What we do</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Blog</span>
                <span class="text">What we talk about</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Contact</span>
                <span class="text">How to get in touch</span>
            </a>
        </li>
    </ul>
</div>
5. Lalu Klik Simpan
Maka hasilnya akan seperti :







Tambahan : Silahkan dirubah tulisan 'Url-ygInginDitambahkan' dengan url Sobat
Contoh :

<li><a href="http://tandichasgalih.blogspot.com/search/label/Misteri%20Dunia"><span class="title">Misteri Dunia</span><span class="text">Misteri yg Ada di Dunia</span>
</a></li>

Lalu jika sobat ingin menambahkan Menunya lagi tinggal ditambah lagi kode :


<li><a href="url-yg-dituju"><span class="title">Jdul Navigasi</span><span class="text">Text</span>
</a></li>


Jika Tutorial ini tidak Berhasil Dimohon untuk menambahkan Komentar

Jika anda Ingin Melihat type-type lain silahkan cari disini :

Navigasi Type 1
Navigasi Type 2
Navigasi Type 3
Navigasi Type 4
Navigasi Type 5
Navigasi Type 6
Navigasi Type 7
Navigasi Type 8
Navigasi Type 9
Navigasi Type 10
Navigasi Type 11
Navigasi Type 12

Cara Membuat Menu Navigasi dengan CSS Type 11

Kali ini saya akan berbagi  Tutorial Blog tentang bagaimana cara Membuat menu Navigasi yg Menarik dengan sentuhan CSS . Sebenarnya trik ini hanya Copas dari Tympanus.net
tapi karena Tympanus berbahasa inggris kadang kala ada yg kesulitan untuk menerapkannya di Blog .
Langsung saja

Menu model Kesebelas caranya :

1. Cari Kode ]]></b:skin> lalu taruh kode dibawah ini di atas kode b:skin tersebut :


#menu11 ul {
    list-style:none;
    font-family:'Gill Sans','Gill Sans MT';
    text-transform:uppercase;
    font-size: 28px;
    line-height: 1.2em;
    float:left;
    clear:both;
    margin:20px;
}
#menu11 ul li{
    float:left;
}
#menu11 ul li a{
    display:block;
    text-decoration:none;
    padding:0px 10px 0px 10px;
    width:170px;
    height:55px;
    border-left:8px dotted #fff;
}
#menu11 ul li a span{
    display:block;
}
#menu11 ul li a span.title{
    color:#fff;
}
#menu11 ul li a:hover{
    border-left:8px dotted #fb0303;
}
#menu11 ul li a:hover span.title{
}
#menu11 ul li a span.text{
    color:#fb0303;
    font-size:12px;
    letter-spacing:0px;
    visibility:hidden;
    border-left:16px dotted #fb0303;
    line-height:0px;
    padding-top:4px;
    margin:10px 0px 12px 0px;
}
#menu11 ul li a:hover span.text{
    visibility:visible;
}

2. Masuk ke Rancangan lalu Klik Elemen Laman
3. Tambahkan Gadget , Pilih HTML/JavaSctirp
4. Lalu tambahkan Kode Ini :

<div id="menu11">
    <ul>
        <li><a href="">
                <span class="title">About</span>
                <span class="text">Who we are</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Portfolio</span>
                <span class="text">What we do</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Blog</span>
                <span class="text">What we talk about</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Contact</span>
                <span class="text">How to get in touch</span>
            </a>
        </li>
    </ul>
</div>
5. Lalu Klik Simpan
Maka hasilnya akan seperti :







Tambahan : Silahkan dirubah tulisan 'Url-ygInginDitambahkan' dengan url Sobat
Contoh :

<li><a href="http://tandichasgalih.blogspot.com/search/label/Misteri%20Dunia"><span class="title">Misteri Dunia</span><span class="text">Misteri yg Ada di Dunia</span>
</a></li>

Lalu jika sobat ingin menambahkan Menunya lagi tinggal ditambah lagi kode :


<li><a href="url-yg-dituju"><span class="title">Jdul Navigasi</span><span class="text">Text</span>
</a></li>


Jika Tutorial ini tidak Berhasil Dimohon untuk menambahkan Komentar

Jika anda Ingin Melihat type-type lain silahkan cari disini :

Navigasi Type 1
Navigasi Type 2
Navigasi Type 3
Navigasi Type 4
Navigasi Type 5
Navigasi Type 6
Navigasi Type 7
Navigasi Type 8
Navigasi Type 9
Navigasi Type 10
Navigasi Type 11
Navigasi Type 12

Cara Membuat Menu Navigasi dengan CSS Type 10

Kali ini saya akan berbagi  Tutorial Blog tentang bagaimana cara Membuat menu Navigasi yg Menarik dengan sentuhan CSS . Sebenarnya trik ini hanya Copas dari Tympanus.net
tapi karena Tympanus berbahasa inggris kadang kala ada yg kesulitan untuk menerapkannya di Blog .
Langsung saja

Menu model Kesepuluh caranya :

1. Cari Kode ]]></b:skin> lalu taruh kode dibawah ini di atas kode b:skin tersebut :


#menu10 ul {
    list-style:none;
    font-family: Georgia, serif;
    font-size: 40px;
    letter-spacing: -3px;
    line-height: 1.2em;
    float:left;
    clear:both;
    margin:20px;
    border:3px solid #5F3B2F;
}
#menu10 ul li{
    float:left;
}
#menu10 ul li a{
    display:block;
    text-decoration:none;
    padding:5px 10px 5px 10px;
    background-color:#955542;
    width:170px;
    text-align:center;
}
#menu10 ul li a span{
    display:block;
}
#menu10 ul li a span.title{
    color:#fff;
    padding-bottom:5px;
}
#menu10 ul li a:hover{

}
#menu10 ul li a:hover span.title{
    font-family: Georgia, serif;
    font-size: 10px;
    font-style: normal;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 2em;
    color:#fff;
    border:1px dashed #fff;
    padding-bottom:3px;
    background-color:#AF6C57;
}
#menu10 ul li a span.text{
    padding:0px 5px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: normal;
    line-height: 1.4em;
    color:#fff;
    background-color:#5F3B2F;
    visibility:hidden;
    border-bottom:1px groove #AF6C57;
}
#menu10 ul li a:hover span.text{
    line-height: 3.4em;
    visibility:visible;
}
2. Masuk ke Rancangan lalu Klik Elemen Laman
3. Tambahkan Gadget , Pilih HTML/JavaSctirp
4. Lalu tambahkan Kode Ini :

<div id="menu10">
    <ul>
        <li><a href="">
                <span class="title">About</span>
                <span class="text">Who we are</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Portfolio</span>
                <span class="text">What we do</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Blog</span>
                <span class="text">What we talk about</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Contact</span>
                <span class="text">How to get in touch</span>
            </a>
        </li>
    </ul>
</div>
5. Lalu Klik Simpan
Maka hasilnya akan seperti :







Tambahan : Silahkan dirubah tulisan 'Url-ygInginDitambahkan' dengan url Sobat
Contoh :

<li><a href="http://tandichasgalih.blogspot.com/search/label/Misteri%20Dunia"><span class="title">Misteri Dunia</span><span class="text">Misteri yg Ada di Dunia</span>
</a></li>

Lalu jika sobat ingin menambahkan Menunya lagi tinggal ditambah lagi kode :


<li><a href="url-yg-dituju"><span class="title">Jdul Navigasi</span><span class="text">Text</span>
</a></li>


Jika Tutorial ini tidak Berhasil Dimohon untuk menambahkan Komentar

Jika anda Ingin Melihat type-type lain silahkan cari disini :

Navigasi Type 1
Navigasi Type 2
Navigasi Type 3
Navigasi Type 4
Navigasi Type 5
Navigasi Type 6
Navigasi Type 7
Navigasi Type 8
Navigasi Type 9
Navigasi Type 10
Navigasi Type 11
Navigasi Type 12

Cara Membuat Menu Navigasi dengan CSS Type 9

Kali ini saya akan berbagi  Tutorial Blog tentang bagaimana cara Membuat menu Navigasi yg Menarik dengan sentuhan CSS . Sebenarnya trik ini hanya Copas dari Tympanus.net
tapi karena Tympanus berbahasa inggris kadang kala ada yg kesulitan untuk menerapkannya di Blog .
Langsung saja

Menu model Kesembilan caranya :

1. Cari Kode ]]></b:skin> lalu taruh kode dibawah ini di atas kode b:skin tersebut :


#menu9 ul {
    list-style:none;
    font-family: "Lucida Sans Unicode", sans-serif;
    font-size: 40px;
    letter-spacing: -3px;
    line-height: 1.2em;
    float:left;
    clear:both;
    margin:20px;
}
#menu9 ul li{
    float:left;
}
#menu9 ul li a{
    display:block;
    text-decoration:none;
    padding:5px 10px 5px 10px;
    background-color:#00adef;
    width:170px;
    text-align:center;
}
#menu9 ul li a span{
    display:block;
}
#menu9 ul li a span.title{
    color:#fff;
    border-bottom:2px solid #fff;
    padding-bottom:5px;
}
#menu9 ul li a:hover{

}
#menu9 ul li a:hover span.title{
    color:#074a64;
border-bottom:2px solid #0b6f95;
}
#menu9 ul li a span.text{
    padding:0px 5px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: normal;
    line-height: 1.4em;
    color:#fff;
    background-color:#074a64;
    visibility:hidden;
}
#menu9 ul li a:hover span.text{
    line-height: 3.4em;
    visibility:visible;
}

2. Masuk ke Rancangan lalu Klik Elemen Laman
3. Tambahkan Gadget , Pilih HTML/JavaSctirp
4. Lalu tambahkan Kode Ini :

<div id="menu9">
    <ul>
        <li><a href="">
                <span class="title">About</span>
                <span class="text">Who we are</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Portfolio</span>
                <span class="text">What we do</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Blog</span>
                <span class="text">What we talk about</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Contact</span>
                <span class="text">How to get in touch</span>
            </a>
        </li>
    </ul>
</div>
5. Lalu Klik Simpan
Maka hasilnya akan seperti :







Tambahan : Silahkan dirubah tulisan 'Url-ygInginDitambahkan' dengan url Sobat
Contoh :

<li><a href="http://tandichasgalih.blogspot.com/search/label/Misteri%20Dunia"><span class="title">Misteri Dunia</span><span class="text">Misteri yg Ada di Dunia</span>
</a></li>

Lalu jika sobat ingin menambahkan Menunya lagi tinggal ditambah lagi kode :


<li><a href="url-yg-dituju"><span class="title">Jdul Navigasi</span><span class="text">Text</span>
</a></li>


Jika Tutorial ini tidak Berhasil Dimohon untuk menambahkan Komentar

Jika anda Ingin Melihat type-type lain silahkan cari disini :

Navigasi Type 1
Navigasi Type 2
Navigasi Type 3
Navigasi Type 4
Navigasi Type 5
Navigasi Type 6
Navigasi Type 7
Navigasi Type 8
Navigasi Type 9
Navigasi Type 10
Navigasi Type 11
Navigasi Type 12

Cara Membuat Menu Navigasi dengan CSS Type 8

Kali ini saya akan berbagi  Tutorial Blog tentang bagaimana cara Membuat menu Navigasi yg Menarik dengan sentuhan CSS . Sebenarnya trik ini hanya Copas dari Tympanus.net
tapi karena Tympanus berbahasa inggris kadang kala ada yg kesulitan untuk menerapkannya di Blog .
Langsung saja

Menu model Kedelapan caranya :

1. Cari Kode ]]></b:skin> lalu taruh kode dibawah ini di atas kode b:skin tersebut :


#menu8 ul {
    list-style:none;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 44px;
    letter-spacing: -2px;
    line-height: 1.2em;
    float:left;
    clear:both;
    margin:20px;
    border:5px solid #fff;
}
#menu8 ul li{
    float:left;
}
#menu8 ul li a{
    display:block;
    text-decoration:none;
    padding:5px 10px 5px 10px;
    background-color:#fff;
    width:170px;
    border-left:6px solid #888;
}
#menu8 ul li a span{
    display:block;
}
#menu8 ul li a span.title{
    color:#888;
}
#menu8 ul li a:hover{
    border-left:6px solid #000;
}
#menu8 ul li a:hover span.title{
    color:#df246f;

}
#menu8 ul li a span.text{
    padding:0px 5px;
    font-size: 14px;
    font-style: italic;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.4em;
    visibility:hidden;
    color:#df246f;
    text-align:right;
    border-top:5px solid #000;
}
#menu8 ul li a:hover span.text{
    visibility:visible;
}

2. Masuk ke Rancangan lalu Klik Elemen Laman
3. Tambahkan Gadget , Pilih HTML/JavaSctirp
4. Lalu tambahkan Kode Ini :

<div id="menu8">
    <ul>
        <li><a href="">
                <span class="title">About</span>
                <span class="text">Who we are</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Portfolio</span>
                <span class="text">What we do</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Blog</span>
                <span class="text">What we talk about</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Contact</span>
                <span class="text">How to get in touch</span>
            </a>
        </li>
    </ul>
</div>
5. Lalu Klik Simpan
Maka hasilnya akan seperti :







Tambahan : Silahkan dirubah tulisan 'Url-ygInginDitambahkan' dengan url Sobat
Contoh :

<li><a href="http://tandichasgalih.blogspot.com/search/label/Misteri%20Dunia"><span class="title">Misteri Dunia</span><span class="text">Misteri yg Ada di Dunia</span>
</a></li>

Lalu jika sobat ingin menambahkan Menunya lagi tinggal ditambah lagi kode :


<li><a href="url-yg-dituju"><span class="title">Jdul Navigasi</span><span class="text">Text</span>
</a></li>


Jika Tutorial ini tidak Berhasil Dimohon untuk menambahkan Komentar

Jika anda Ingin Melihat type-type lain silahkan cari disini :

Navigasi Type 1
Navigasi Type 2
Navigasi Type 3
Navigasi Type 4
Navigasi Type 5
Navigasi Type 6
Navigasi Type 7
Navigasi Type 8
Navigasi Type 9
Navigasi Type 10
Navigasi Type 11
Navigasi Type 12

Cara Membuat Menu Navigasi dengan CSS Type 7

Kali ini saya akan berbagi  Tutorial Blog tentang bagaimana cara Membuat menu Navigasi yg Menarik dengan sentuhan CSS . Sebenarnya trik ini hanya Copas dari Tympanus.net
tapi karena Tympanus berbahasa inggris kadang kala ada yg kesulitan untuk menerapkannya di Blog .
Langsung saja

Menu model Ketujuh caranya :

1. Cari Kode ]]></b:skin> lalu taruh kode dibawah ini di atas kode b:skin tersebut :


#menu7 ul {
    list-style:none;
    font-family: Cambria, serif;
    font-size: 40px;
    font-weight: bold;
    letter-spacing: -1px;
    line-height: 1.1em;
    float:left;
    clear:both;
    margin:20px;
    border-top:2px dotted #555;
}
#menu7 ul li{
    float:left;
}
#menu7 ul li a{
    display:block;
    text-decoration:none;
    padding:10px 10px 5px 10px;
    color:#888;
    background-color:#000;
    width:170px;
}
#menu7 ul li a span{
    display:block;
}
#menu7 ul li a span.title{
    border-bottom:2px dotted #888;
}
#menu7 ul li a:hover{
    background-color:#fff;
}
#menu7 ul li a:hover span.title{
    color:#000;
    border-bottom:2px dotted #555;
}
#menu7 ul li a span.text{
    padding:0px 5px;
    font-size: 14px;
    font-style: italic;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.4em;
    background-color:#666;
    visibility:hidden;
    color:#fff;
    text-align:right;
}
#menu7 ul li a:hover span.text{
    visibility:visible;
}
2. Masuk ke Rancangan lalu Klik Elemen Laman
3. Tambahkan Gadget , Pilih HTML/JavaSctirp
4. Lalu tambahkan Kode Ini :

<div id="menu7">
    <ul>
        <li><a href="">
                <span class="title">About</span>
                <span class="text">Who we are</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Portfolio</span>
                <span class="text">What we do</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Blog</span>
                <span class="text">What we talk about</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Contact</span>
                <span class="text">How to get in touch</span>
            </a>
        </li>
    </ul>
</div>
5. Lalu Klik Simpan
Maka hasilnya akan seperti :







Tambahan : Silahkan dirubah tulisan 'Url-ygInginDitambahkan' dengan url Sobat
Contoh :

<li><a href="http://tandichasgalih.blogspot.com/search/label/Misteri%20Dunia"><span class="title">Misteri Dunia</span><span class="text">Misteri yg Ada di Dunia</span>
</a></li>

Lalu jika sobat ingin menambahkan Menunya lagi tinggal ditambah lagi kode :


<li><a href="url-yg-dituju"><span class="title">Jdul Navigasi</span><span class="text">Text</span>
</a></li>


Jika Tutorial ini tidak Berhasil Dimohon untuk menambahkan Komentar

Jika anda Ingin Melihat type-type lain silahkan cari disini :

Navigasi Type 1
Navigasi Type 2
Navigasi Type 3
Navigasi Type 4
Navigasi Type 5
Navigasi Type 6
Navigasi Type 7
Navigasi Type 8
Navigasi Type 9
Navigasi Type 10
Navigasi Type 11
Navigasi Type 12

Cara Membuat Menu Navigasi dengan CSS Type 6

Kali ini saya akan berbagi  Tutorial Blog tentang bagaimana cara Membuat menu Navigasi yg Menarik dengan sentuhan CSS . Sebenarnya trik ini hanya Copas dari Tympanus.net
tapi karena Tympanus berbahasa inggris kadang kala ada yg kesulitan untuk menerapkannya di Blog .
Langsung saja

Menu model Keenam caranya :

1. Cari Kode ]]></b:skin> lalu taruh kode dibawah ini di atas kode b:skin tersebut :


#menu6 ul {
    list-style:none;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 28px;
    font-weight: bold;
    letter-spacing: -1px;
    line-height: 1.1em;
    float:left;
    clear:both;
    margin:20px;
    border:4px groove #ffe430;
}
#menu6 ul li{
    float:left;
}
#menu6 ul li a{
    display:block;
    text-decoration:none;
    padding:10px 10px 5px 10px;
    color:#fff;
    background-color:#ffc730;
    width:170px;
}
#menu6 ul li a span{
    display:block;
}
#menu6 ul li a span.title{
    border-bottom:2px solid #ffc730;
}
#menu6 ul li a:hover{
    background-color:#fff;
}
#menu6 ul li a:hover span.title{
    color:#ffc730;
    border-bottom:2px solid #ffe430;
}
#menu6 ul li a span.text{
    padding:0px 5px;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-style: italic;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.4em;
    background-color:#ffc730;
    visibility:hidden;
    color:#fff;
}
#menu6 ul li a:hover span.text{
    visibility:visible;
}

2. Masuk ke Rancangan lalu Klik Elemen Laman
3. Tambahkan Gadget , Pilih HTML/JavaSctirp
4. Lalu tambahkan Kode Ini :

<div id="menu6">
    <ul>
        <li><a href="">
                <span class="title">About</span>
                <span class="text">Who we are</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Portfolio</span>
                <span class="text">What we do</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Blog</span>
                <span class="text">What we talk about</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Contact</span>
                <span class="text">How to get in touch</span>
            </a>
        </li>
    </ul>
</div>
5. Lalu Klik Simpan
Maka hasilnya akan seperti :







Tambahan : Silahkan dirubah tulisan 'Url-ygInginDitambahkan' dengan url Sobat
Contoh :

<li><a href="http://tandichasgalih.blogspot.com/search/label/Misteri%20Dunia"><span class="title">Misteri Dunia</span><span class="text">Misteri yg Ada di Dunia</span>
</a></li>

Lalu jika sobat ingin menambahkan Menunya lagi tinggal ditambah lagi kode :


<li><a href="url-yg-dituju"><span class="title">Jdul Navigasi</span><span class="text">Text</span>
</a></li>


Jika Tutorial ini tidak Berhasil Dimohon untuk menambahkan Komentar

Jika anda Ingin Melihat type-type lain silahkan cari disini :

Navigasi Type 1
Navigasi Type 2
Navigasi Type 3
Navigasi Type 4
Navigasi Type 5
Navigasi Type 6
Navigasi Type 7
Navigasi Type 8
Navigasi Type 9
Navigasi Type 10
Navigasi Type 11
Navigasi Type 12

Cara Membuat Menu Navigasi dengan CSS Type 5

Kali ini saya akan berbagi  Tutorial Blog tentang bagaimana cara Membuat menu Navigasi yg Menarik dengan sentuhan CSS . Sebenarnya trik ini hanya Copas dari Tympanus.net
tapi karena Tympanus berbahasa inggris kadang kala ada yg kesulitan untuk menerapkannya di Blog .
Langsung saja

Menu model Kelima caranya :

1. Cari Kode ]]></b:skin> lalu taruh kode dibawah ini di atas kode b:skin tersebut :



#menu5 ul {
    list-style:none;
    font-family: Georgia, serif;
    font-size: 44px;
    letter-spacing: -3px;
    line-height: 1.2em;
    float:left;
    clear:both;
    margin:20px;
    border:4px double #ccc;
}
#menu5 ul li{
    float:left;
}
#menu5 ul li a{
    display:block;
    text-decoration:none;
    padding:10px 10px 5px 10px;
    color:#555;
    background-color:#fff;
    width:170px;
}
#menu5 ul li a span{
    display:block;
}
#menu5 ul li a span.title{
    border-top:1px solid #ddd;
     border-bottom:1px solid #ddd;
}
#menu5 ul li a:hover span.title{
    color:#ccc;
}
#menu5 ul li a span.text{
    padding:0px 5px;
    font-family: Georgia, serif;
    font-size: 11px;
    font-style: normal;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.7em;
    color:#444;
    visibility:hidden;
}
#menu5 ul li a:hover span.text{
    visibility:visible;
}

2. Masuk ke Rancangan lalu Klik Elemen Laman
3. Tambahkan Gadget , Pilih HTML/JavaSctirp
4. Lalu tambahkan Kode Ini :

<div id="menu5">
    <ul>
        <li><a href="">
                <span class="title">About</span>
                <span class="text">Who we are</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Portfolio</span>
                <span class="text">What we do</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Blog</span>
                <span class="text">What we talk about</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Contact</span>
                <span class="text">How to get in touch</span>
            </a>
        </li>
    </ul>
</div>
5. Lalu Klik Simpan
Maka hasilnya akan seperti :







Tambahan : Silahkan dirubah tulisan 'Url-ygInginDitambahkan' dengan url Sobat
Contoh :

<li><a href="http://tandichasgalih.blogspot.com/search/label/Misteri%20Dunia"><span class="title">Misteri Dunia</span><span class="text">Misteri yg Ada di Dunia</span>
</a></li>

Lalu jika sobat ingin menambahkan Menunya lagi tinggal ditambah lagi kode :


<li><a href="url-yg-dituju"><span class="title">Jdul Navigasi</span><span class="text">Text</span>
</a></li>


Jika Tutorial ini tidak Berhasil Dimohon untuk menambahkan Komentar

Jika anda Ingin Melihat type-type lain silahkan cari disini :

Navigasi Type 1
Navigasi Type 2
Navigasi Type 3
Navigasi Type 4
Navigasi Type 5
Navigasi Type 6
Navigasi Type 7
Navigasi Type 8
Navigasi Type 9
Navigasi Type 10
Navigasi Type 11
Navigasi Type 12

Cara Membuat Menu Navigasi dengan CSS Type 4

Kali ini saya akan berbagi  Tutorial Blog tentang bagaimana cara Membuat menu Navigasi yg Menarik dengan sentuhan CSS . Sebenarnya trik ini hanya Copas dari Tympanus.net
tapi karena Tympanus berbahasa inggris kadang kala ada yg kesulitan untuk menerapkannya di Blog .
Langsung saja

Menu model Keempat caranya :

1. Cari Kode ]]></b:skin> lalu taruh kode dibawah ini di atas kode b:skin tersebut :


#menu4 ul {
    list-style:none;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 30px;
    letter-spacing: -3px;
    line-height: 1.2em;
    border-top:5px dotted #c7e7f3;
    border-bottom:5px dotted #c7e7f3;
    float:left;
    clear:both;
    margin:20px;
}
#menu4 ul li{
    float:left;
}
#menu4 ul li a{
    display:block;
    text-decoration:none;
    padding:10px 10px 5px 10px;
    color:#66b8d8;
    width:170px;
}
#menu4 ul li a span{
    display:block;
}
#menu4 ul li a span.title{

}
#menu4 ul li a:hover span.title{
    color:#00adef;
}
#menu4 ul li a span.text{
    padding:0px 5px;
    font-family: Georgia, serif;
    font-size: 13px;
    font-style: italic;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.6em;
    color:#c7e7f3;
    visibility:hidden;
}
#menu4 ul li a:hover span.text{
    visibility:visible;
}

2. Masuk ke Rancangan lalu Klik Elemen Laman
3. Tambahkan Gadget , Pilih HTML/JavaSctirp
4. Lalu tambahkan Kode Ini :

<div id="menu4">
    <ul>
        <li><a href="">
                <span class="title">About</span>
                <span class="text">Who we are</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Portfolio</span>
                <span class="text">What we do</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Blog</span>
                <span class="text">What we talk about</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Contact</span>
                <span class="text">How to get in touch</span>
            </a>
        </li>
    </ul>
</div>
5. Lalu Klik Simpan
Maka hasilnya akan seperti :







Tambahan : Silahkan dirubah tulisan 'Url-ygInginDitambahkan' dengan url Sobat
Contoh :

<li><a href="http://tandichasgalih.blogspot.com/search/label/Misteri%20Dunia"><span class="title">Misteri Dunia</span><span class="text">Misteri yg Ada di Dunia</span>
</a></li>

Lalu jika sobat ingin menambahkan Menunya lagi tinggal ditambah lagi kode :


<li><a href="url-yg-dituju"><span class="title">Jdul Navigasi</span><span class="text">Text</span>
</a></li>

Jika anda Ingin Melihat type-type lain silahkan cari disini :

Navigasi Type 1
Navigasi Type 2
Navigasi Type 3
Navigasi Type 4
Navigasi Type 5
Navigasi Type 6
Navigasi Type 7
Navigasi Type 8
Navigasi Type 9
Navigasi Type 10
Navigasi Type 11
Navigasi Type 12

Cara Membuat Menu Navigasi dengan CSS Type 3

Kali ini saya akan berbagi  Tutorial Blog tentang bagaimana cara Membuat menu Navigasi yg Menarik dengan sentuhan CSS . Sebenarnya trik ini hanya Copas dari Tympanus.net
tapi karena Tympanus berbahasa inggris kadang kala ada yg kesulitan untuk menerapkannya di Blog .
Langsung saja

Menu model Ketiga caranya :

1. Cari Kode ]]></b:skin> lalu taruh kode dibawah ini di atas kode b:skin tersebut :


#menu3 ul {
    list-style:none;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 44px;
    font-weight: bold;
    letter-spacing: -2px;
    line-height: 1.2em;
    border-top:4px solid #000;
    border-bottom:4px solid #666;
    float:left;
    clear:both;
    margin:20px;
}
#menu3 ul li{
    float:left;
}
#menu3 ul li a{
    display:block;
    text-decoration:none;
    background-color:#ccc;
    padding:10px 10px 5px 10px;
    color:#666;
    width:170px;
}
#menu3 ul li a span{
    display:block;
    text-align:center;

}
#menu3 ul li a span.title{

}
#menu3 ul li a:hover span.title{
    color:#000;
}
#menu3 ul li a span.text{
    padding:0px 5px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: -1px;
    line-height: 2em;
    text-align:right;
    margin-top:-20px;
    color:#f0f0f0;
    font-weight:bold;
    background-color:#000;
    visibility:hidden;
}
#menu3 ul li a:hover span.text{
    visibility:visible;
}

2. Masuk ke Rancangan lalu Klik Elemen Laman
3. Tambahkan Gadget , Pilih HTML/JavaSctirp
4. Lalu tambahkan Kode Ini :

<div id="menu3">
    <ul>
        <li><a href="">
                <span class="title">About</span>
                <span class="text">Who we are</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Portfolio</span>
                <span class="text">What we do</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Blog</span>
                <span class="text">What we talk about</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Contact</span>
                <span class="text">How to get in touch</span>
            </a>
        </li>
    </ul>
</div>
5. Lalu Klik Simpan
Maka hasilnya akan seperti :







Tambahan : Silahkan dirubah tulisan 'Url-ygInginDitambahkan' dengan url Sobat
Contoh :

<li><a href="http://tandichasgalih.blogspot.com/search/label/Misteri%20Dunia"><span class="title">Misteri Dunia</span><span class="text">Misteri yg Ada di Dunia</span>
</a></li>

Lalu jika sobat ingin menambahkan Menunya lagi tinggal ditambah lagi kode :


<li><a href="url-yg-dituju"><span class="title">Jdul Navigasi</span><span class="text">Text</span>
</a></li>

Jika anda Ingin Melihat type-type lain silahkan cari disini :

Navigasi Type 1
Navigasi Type 2
Navigasi Type 3
Navigasi Type 4
Navigasi Type 5
Navigasi Type 6
Navigasi Type 7
Navigasi Type 8
Navigasi Type 9
Navigasi Type 10
Navigasi Type 11
Navigasi Type 12

Cara Membuat Menu Navigasi dengan CSS Type 2

Kali ini saya akan berbagi  Tutorial Blog tentang bagaimana cara Membuat menu Navigasi yg Menarik dengan sentuhan CSS . Sebenarnya trik ini hanya Copas dari Tympanus.net
tapi karena Tympanus berbahasa inggris kadang kala ada yg kesulitan untuk menerapkannya di Blog .
Langsung saja

Menu model kedua caranya :

1. Cari Kode ]]></b:skin> lalu taruh kode dibawah ini di atas kode b:skin tersebut :



#menu2 ul {
    list-style:none;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: bold;
    letter-spacing: -1px;
    line-height: 1.2em;
    border:1px solid #000;
    border-left:none;
    float:left;
    clear:both;
    margin:20px;
    border:5px dashed #fff;
}
#menu2 ul li{
    float:left;
}
#menu2 ul li a{
    display:block;
    text-decoration:none;
    background-color:#f0f0f0;
    padding:5px 10px;
    color:#666;
    width:140px;
}
#menu2 ul li a span{
    display:block;
    text-align:center;
 
}
#menu2 ul li a span.title{
}
#menu2 ul li a:hover span.title{
    color:#000;
}
#menu2 ul li a span.text{
    font-size:12px;
    font-style:italic;
    padding:0px 5px;
    border:1px solid #f0f0f0;
}
#menu2 ul li a:hover span.text{

}
#menu2 ul li a:hover span.text{
    border:1px inset #ccc;
    background-color:#fff;
}



2. Masuk ke Rancangan lalu Klik Elemen Laman
3. Tambahkan Gadget , Pilih HTML/JavaSctirp
4. Lalu tambahkan Kode Ini :

<div id="menu2">
    <ul>
        <li><a href="">
                <span class="title">About</span>
                <span class="text">Who we are</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Portfolio</span>
                <span class="text">What we do</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Blog</span>
                <span class="text">What we talk about</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Contact</span>
                <span class="text">How to get in touch</span>
            </a>
        </li>
    </ul>
</div>
5. Lalu Klik Simpan
Maka hasilnya akan seperti :







Tambahan : Silahkan dirubah tulisan 'Url-ygInginDitambahkan' dengan url Sobat
Contoh :

<li><a href="http://tandichasgalih.blogspot.com/search/label/Misteri%20Dunia"><span class="title">Misteri Dunia</span><span class="text">Misteri yg Ada di Dunia</span>
</a></li>

Lalu jika sobat ingin menambahkan Menunya lagi tinggal ditambah lagi kode :


<li><a href="url-yg-dituju"><span class="title">Jdul Navigasi</span><span class="text">Text</span>
</a></li>

Jika anda Ingin Melihat type-type lain silahkan cari disini :

Navigasi Type 1
Navigasi Type 2
Navigasi Type 3
Navigasi Type 4
Navigasi Type 5
Navigasi Type 6
Navigasi Type 7
Navigasi Type 8
Navigasi Type 9
Navigasi Type 10
Navigasi Type 11
Navigasi Type 12

Cara Membuat Menu Navigasi dengan CSS Type 1

Kali ini saya akan berbagi  Tutorial Blog tentang bagaimana cara Membuat menu Navigasi yg Menarik dengan sentuhan CSS . Sebenarnya trik ini hanya Copas dari Tympanus.net
tapi karena Tympanus berbahasa inggris kadang kala ada yg kesulitan untuk menerapkannya di Blog .
Langsung saja

Menu model pertama caranya :

1. Cari Kode ]]></b:skin> lalu taruh kode dibawah ini di atas kode b:skin tersebut :

#menu1 ul {
list-style:none;
font-family: Georgia, serif;
font-size: 20px;
font-style: italic;
font-weight: normal;
letter-spacing: normal;
line-height: 1.4em;
border:2px solid #000;
border-left:none;
float:left;
clear:both;
margin:20px;
}
#menu1 ul li{
float:left;
}
#menu1 ul li a{
display:block;
text-decoration:none;
background-color:#444;
padding:5px 10px;
color:#fff;
width:140px;
border-right:1px solid #666;
border-left:1px solid #000;
}
#menu1 ul li a span{
display:block;
}
#menu1 ul li a span.title{
border-bottom:1px solid #444;
}
#menu1 ul li a:hover span.title{
border-bottom:1px dashed #f0f0f0;
color:#ef0000;
}
#menu1 ul li a span.text{
visibility:hidden;
font-size:12px;
text-align:right;
}
#menu1 ul li a:hover span.text{
visibility:visible;
}


2. Masuk ke Rancangan lalu Klik Elemen Laman
3. Tambahkan Gadget , Pilih HTML/JavaSctirp
4. Lalu tambahkan Kode Ini :

<div id="menu1">
    <ul>
        <li><a href="">
                <span class="title">About</span>
                <span class="text">Who we are</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Portfolio</span>
                <span class="text">What we do</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Blog</span>
                <span class="text">What we talk about</span>
            </a>
        </li>
        <li><a href="">
                <span class="title">Contact</span>
                <span class="text">How to get in touch</span>
            </a>
        </li>
    </ul>
</div>
5. Lalu Klik Simpan
Maka hasilnya akan seperti :






Tambahan : Silahkan dirubah tulisan 'Url-ygInginDitambahkan' dengan url Sobat
Contoh :
<li><a href="http://tandichasgalih.blogspot.com/search/label/Misteri%20Dunia"><span class="title">Misteri Dunia</span><span class="text">Misteri yg Ada di Dunia</span>
</a></li>

Lalu jika sobat ingin menambahkan Menunya lagi tinggal ditambah lagi kode :

<li><a href="url-yg-dituju"><span class="title">Jdul Navigasi</span><span class="text">Text</span>
</a></li>

Jika anda Ingin Melihat type-type lain silahkan cari disini :

Navigasi Type 1
Navigasi Type 2
Navigasi Type 3
Navigasi Type 4
Navigasi Type 5
Navigasi Type 6
Navigasi Type 7
Navigasi Type 8
Navigasi Type 9
Navigasi Type 10
Navigasi Type 11
Navigasi Type 12

27 January 2012

Char LS


Jual Char Lost Saga: 1 Hero Perm , Pangkat 1Lt Kelas 5 

































Jual Char Lost Saga: 1 Hero Perm ,Pangkat MSG Kelas 3



Jual Char Lost Saga: 1 Hero Perm ,Pangkat 2LT Kelas 4


Jual Char Lost Saga: 2 Hero Perm , Msg Kelas 2

Jual Char Lost Saga: 1 Hero Perm , SFC Kelas 5


Jual Char Lost Saga: 1 Hero Perm , 2Lt Kelas 5

Jual Char Lost Saga: 1 Hero Perm , SFC Kelas 4































































Jual Char Lost Saga: 1 Hero Perm , 1LT Kelas 1 





 

TandichasGalih Copyright © 2011 Template Created by TandichasGalih Powered by Blogger

Home Follow This Blog Facebook Twitter Daftar Isi Dashboard
Tutorial Blog Misteri Dunia Fakta Unik Social Software Cheat Game Label →