Mengetahui Kode Warna

Kode warna yang terpilih :

Read more »

Posted in: Edit Blog

Membuat Sub Dropdown Pada Horizontal Menu

sebelumnya buat dulu horizontal menu, silakan buka  Membuat Horizontal Menu di blog dan Membuat Dropdown Pada Horizontal Menu

• Login dulu ke account blogger kamu.

• Pilih tab Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips: Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Tambahkan kode CSS berikut di bawah kode CSS menu horizontal yang ada.

    #nav li ul a {
    width: 100px;
    }
    #nav li ul ul {
    position: absolute;
    margin: -30% 0 0 95%;
    }
    #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 li li.sfhover ul {
    left:auto;
    }
    #nav li:hover, #nav li.sfhover {
    position:static;
    }

•  Cari kode HTML <div id='navleft'>.

Tips: Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan timbul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

• Kemudian tambahkan menu turunan kedua, seperti kamu menambahkan dropdown menu dalam horizontal navigasi (turunan pertama). Illustrasi kodenya adalah sebagai berikut.

    <div id='navleft'>
    <div id='nav'>
    <ul>
    <li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>
    <li><a href='http://Link_yang_dituju'>teks kamu</a></li>
    <li><a href='http://Link_yang_dituju'>teks kamu</a>
    <ul>
    <li><a href='URL sub 1'>teks kamu</a></li>
    <li><a href='URL sub 2'>teks kamu</a></li>
    <li><a href='URL sub 3'>teks kamu</a>

    <ul>
    <li><a href='URL sub 3.1'>teks kamu</a></li>
    <li><a href='URL sub 3.2'>teks kamu</a></li>
    </ul>
    </li>

    </ul>
    </li>
    <li><a href='http://Link_yang_dituju'>teks kamu</a></li>
    <li><a href='http://Link_yang_dituju'>teks kamu</a></li>
    </ul>
    </div>
    </div>

Catatan :
   1. Perhatikan peletakkan kode untuk menambah dropdown menu, ditandai dengan kode berwarna hijau.
   2. Perhatikan pula peletakkan kode untuk menambah menu turunan kedua, ditandai dengan kode yang berkedap-kedip.
   3. Ganti kode yang berwarna merah dengan alamat link dan teks yang kamu inginkan.

• Jangan lupa disimpan.

Selamat membuat sub dropdown pada horizontal menu...

Read more »

Posted in: Edit Blog

Membuat Horizontal Menu di blog 2

langkah membuat menu horizontal dalam blog kamu :

• Login ke account blogger kamu.

• Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Cari Kode kode ]]></b:skin> dan Copy-Paste (copas) kode berikut di atasnya.

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

    /* navbar
    ================== */

    #bg_nav {
    background: #ffffff;
    width: 850px;
    height: 29px;
    font-size: 11px;
    font-family: Arial, Tahoma, Verdana;
    color: #000000;
    font-weight: bold;
    margin: 0px auto 0px;
    padding: 0px;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #ffffff;
    overflow: hidden;
    }
    #bg_nav a, #bg_nav a:visited {
    color: #000000;
    font-size: 11px;
    text-decoration: none;
    text-transform: uppercase;
    padding: 0px 0px 0px 3px;
    }

    #bg_nav a:hover {
    color: #000000;
    text-decoration: underline;
    padding: 0px 0px 0px 3px;
    }

    #navleft {
    width: 500px;
    float: left;
    margin: 0px;
    padding: 0px;
    }
    #navright {
    width: 220px;
    font-size: 11px;
    float: right;
    margin: 0px;
    padding: 3px 5px 0px 0px;
    }
    #navright a img {
    border: none;
    margin: 0px;
    padding: 3px 5px 0px 0px;
    }

    #nav {
    margin: 0px;
    padding: 0px;
    list-style: none;
    }
    #nav ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    }

    #nav a, #nav a:visited {
    background: #ffffff;
    color: #000000;
    display: block;
    font-weight: bold;
    margin: 0px;
    padding: 8px 15px 8px 15px;
    border-left: 1px solid #ffffff;
    }
    #nav a:hover {
    background: #c06000;
    color: #000000;
    margin: 0px;
    padding: 8px 15px 8px 15px;
    text-decoration: none;
    }

    #nav li {
    float: left;
    margin: 0px;
    padding: 0px;
    }
    #nav li li {
    float: left;
    margin: 0px;
    padding: 0px;
    width: 150px;
    }
    #nav li li a, #nav li li a:link, #nav li li a:visited {
    background: #ffffff;
    width: 160px;
    float: none;
    margin: 0px;
    padding: 7px 30px 7px 10px;
    border-bottom: 1px solid #ffffff;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    }
    #nav li li a:hover, #nav li li a:active {
    background: #c06000;
    padding: 7px 30px 7px 10px;
    }

    #nav li ul {
    position: absolute;
    width: 10em;
    left: -999em;
    }

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

Catatan :

1. Agar menu horizontal sesuai dengan template blog, kamu perlu mengganti kode-kode yang berwarna hijau.
2. Untuk kode pewarnaan, kamu bisa melihatnya di kode warna disini---> Mengetahui Kode Warna

• Kemudian cari kembali kode seperti di bawah ini.

    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1'
    showaddelement='no'>
    <b:widget id='Header1' locked='true' title='test
    (Header)' type='Header'/>

    ... dan seterusnya ...

    </b:section>
    </div>

• Copas kode berikut tepat di bawah kode yang berwarna hijau atau berwarna kuning (sesuaikan dengan template blog kamu).

    <div id='bg_nav'>

    <div id='navleft'>
    <div id='nav'>
    <ul>
    <li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    </ul>
    </div>
    </div>

    <div id='navright'>

    <form action='http://Alamat_Blog_Kamu.blogspot.com/search' id='searchform' method='get' name='searchform'> <input id='s' name='q' type='text' value=''/> <input id='searchsubmit' type='submit' value='Cari'/>
    </form>

    </div>

    </div><!-- akhir bg_nav -->

• Jangan lupa disimpan

Oia, baca juga postingan saya yang lama tentang Membuat Horizontal Menu


Selamat membuat menu horizontal...

Read more »

Posted in: Edit Blog

Membuat Dropdown Pada Horizontal Menu

 Berikut trik menambahkan dropdown menu dalam horizontal navigasi :

• Sebelumnya buat dulu horizontal menu. Silakan buka  Membuat Horizontal Menu di blog 2

• Login ke account blogger kamu.

• Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Cari kode HTML di bawah ini yang posisinya diantara <body> ... <body>.

<div id='navleft'>
    <div id='nav'>
    <ul>
    <li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    </ul>
    </div>
    </div>

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

• Tambah kode berikut di nav link yang kamu inginkan, letakkan sebelum </li>.

    <ul>
    <li><a href='URL sub 1'>Sub menu 1</a></li>
    <li><a href='URL sub 2'>Sub menu 2</a></li>
    <li><a href='URL sub 3'>Sub menu 3</a></li>
    </ul>

Contoh :

    <div id='navleft'>
    <div id='nav'>
    <ul>
    <li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a>
    <ul>
    <li><a href='URL sub 1'>Sub menu 1</a></li>
    <li><a href='URL sub 2'>Sub menu 2</a></li>
    <li><a href='URL sub 3'>Sub menu 3</a></li>
    </ul>
    </li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    <li><a href='http://Link_yang_dituju'>Add Link</a></li>
    </ul>
    </div>
    </div>

Catatan :
   1. Perhatikan peletakkan kode untuk menambah menu dropdown, ditandai dengan warna hijau.
   2. Ganti kode yang berwarna merah dengan alamat link dan teks yang kamu inginkan.

• Jangan lupa disimpan.

Tambahan : Kode CSS #nav li li yang perlu kamu optimasi adalah sebagai berikut.

#nav li li {

float: left;
margin: 0px;
padding: 0px;
width: 150px; <!-- lebar dropdown menu -->
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff; <!-- warna latar dropdown menu -->
width: 160px; <!-- lebar dropdown menu, ketika disentuh korsur/mouse -->
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #ffffff; <!-- garis tepi bawah dropdown menu -->
border-left: 1px solid #ffffff; <!-- garis tepi kiri dropdown menu -->
border-right: 1px solid #ffffff; <!-- garis tepi kanan dropdown menu -->
<!-- atau kamu bisa mengganti kode border-bottom, left, dan right dengan kode border: 1px solid #ffffff; -->
}
#nav li li a:hover, #nav li li a:active {
background: #c06000; <!-- warna latar dropdown menu , ketika disentuh korsur/mouse -->
padding: 7px 30px 7px 10px;
}

Selamat berdropdown dengan menu horizontal...

Read more »

Posted in: Edit Blog

Membuat Horizontal Menu

Horizontal menu adalah menu yang berguna untuk berguna untuk menunjukkan halaman lain yang ada diblog anda. Misalnya blog anda dibagi menjadi empat tema, maka widget ini selain indah juga berguna untuk menunjukkan tema-tema tersebut. Dengan widget ini maka tema-tema di blog anda akan lebih mudah dilihat oleh pengunjung dan membuat website lebih rapi dan indah.Selain itu, menu horisontal ini tidak kalah menarik untuk menjadi navigator di blog Anda karena saya kira bentuknya Menarik dan elegan.

Ini adalah gambar Horizontal menu yang akan kita buat:

Nah apakah anda berminat untuk membuatnya??? baiklah ini adalah cara membuatnya:

1. login ke blogger lalu masuk menu Layout kemudian masuk menu Edit HTML

2. Lalu taruh code dibawah diatas Code ]]></b:skin> pokoknya di barisan CSS pada Blog Anda:

.menuhorisontal{
width: 100%;
overflow: hidden;
border-bottom: 1px solid #000000;
}


.menuhorisontal ul{
margin: 0;
padding: 0;
padding-left: 10px;
font: bold 12px Verdana;
list-style-type: none;
}


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


.menuhorisontal li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px;
border-right: 1px solid white;
color: white;
background: #414141; /*background dari Tabel*/
}


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


.menuhorisontal li a:hover, .menuhorisontal li.selected a{
background:#002EB8; /*Background Setelah Pointer Diarahkan */
}
#footheader {
width: 100%;
float:left;
margin:0 0 0;
padding:0 0 0;
height:35px;
}

3. Kalau Sudah Cari Code dibawah Ini:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Bisnis Di Internet (Header)' type='Header'/>
</b:section>
</div>

4. Code diatas Di Blog kamu berdeda-beda pokoknya kamu perhatikan Code yang berwarna kuning saja dan taruh Code dibawah ini tepat dibawah Code Diatas itu:
  

<div id='footheader'>
<b:section class='footheader' id='footheader' preferred='yes'>
</b:section>
</div>

5. Kemudian Simpan

6. kemudian klik Add A Gadget kemudian pilih HTML/JavaScript.. Lalu taruh Code dibawah ini:
 

<div class='menuhorisontal'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='http://davidkyo.blogspot.com'>Edit Blog</a></li>
<li><a href='url '>nama</a></li>
<li><a href='url '>nama</a></li>
</ul>
</div>

 ket: nama dan url kamu ganti dengan nama dan url yang kamu inginkan

Nama : nama dari tema, misal : My Musik , My video, tutorilal blog, dll.
url : url yang dituju apabila nama di klik oleh pengunjung.

7. udah selesai lalu simpan.....










 

Read more »

Posted in: Edit Blog