Facebook Fans

Menu Navigasi dengan CSS

Menu Navigasi dengan CSS 



Bagaimana sudah dengan posisi PW hahaha (alay) tapi walaupun alay kita ikuti yuk petunjuk masuk surga eh salah heheheehe.petunjuk

Menu Navigasi dengan CSS :


  • Upload gambar tombol-tombol tersebut pada hosting penyimpan semisal www.photobucket.com untuk cara upload gambar sudah saya terangkan pada pembahasa yang lalu , jika sudah lupa silahkan klik Di sini



  • .

    Agar ada contoh, umpamanya kita mempunyai alamat tombol sebagai berikut :

    http://i162.photobucket.com/albums/t253/adel22/tombol_03.gif

    http://i162.photobucket.com/albums/t253/adel22/tombol_03.gif



  • Langkah selanjutnya adalah menambahkan kode, ada dua contoh yakni yang tidak memakai gambar tombol dan yang memakai gambar tombol. contoh yang tidak memakai gambar tombol :





    1. Tambahkan kode berikut sesudah kode <style type="text/css"> dan sebelum kode </style>, ya di mana saja asalkan di antara kode tadi.
    2. .unyil{ text-align:left; display:block; width:180px; height:20px; background:#f0f0f0; padding:3px 4px 3px 8px; margin:7px 10px 7px 0; } .unyil:hover{ background:#97A4B9; text-decoration:none; }
    3. copy kode di bawah ini, lalu paste di tempat yang sobat inginkan, bisa di sidebar, footer atau dimana saja, kemudian rubahlah dengan link yang sobat punya :
    4. <a class="unyil" href="http://rubrik-elektronik.blogspot.com">Rubrik Elektronik</a><span class="hide"> | </span> <a class="unyil" href="contoh-blog.blogspot.com">Blog Menu D'Tree</a><span class="hide"> | </span> <a class="unyil" href="http://designrumahdanbaju.blogspot.com">Free Blog Templates</a><span class="hide"> | </span> <a class="unyil" href="http://kolom-authorized.blogspot.com">Authorized Service</a><span class="hide">


    biar tidak telalu bingung, sedikit saya uraikan :

    .unyil --> kata .unyil bisa diganti apa saja yang penting harus sesuai dengan kode berikutnya.

    text-align:left; --> kata left artinya tulisan akan berada di sebelah kiri, ini bisa di ganti dengan kata center atau right

    display:block; --> kata block artinya di tampilkan di layar monitor.

    width:180px; --> angka 180px adalah lebar dari tombol navigasi sebesar 180px, nah ini bisa di rubah sesuai dengan kondisi blog sobat masing-masing.

    height:20px; --> angka 20px adalah tinggi dari tombol navigasi sebesar 20px, ini bisa di ganti sesuai dengan keinginan sobat.

    background:#f0f0f0; --> tulisan #f0f0f0 adalah kode warna dari background, ini bisa di rubah sesuai dengan ke sukaan sobat.

    padding:3px 4px 3px 8px; --> nilai padding ini adalah untuk mengatus jarak tulisan pada tombol navigasi, bisa di rubah sesuai kebutuhan.coba-coba aja rubah sendiri.

    margin:7px 10px 7px 0; --> margin ini untuk jarak antara satu tombol dengan tombol yang lain, bisa di rubah, coba aja.

    .unyil:hover{ --> .unyil:hover artinya yaitu ketika mouse berada pada tombol .unyil akan berubah menjadi seperti yang di definisikan pada kode ini.

    background:#97A4B9; --> #97A4B9 adalah kode warna yang dinginkan ketika mouse berada pada tombol .unyil

    text-decoration:none; --> text dekorasi jangan di rubah.

    Bagaimana sudah jelas? mudah-mudahan jelas.



    Contoh yang kedua adalah yang memakai background image, dalam hal ini saya ambil contoh dengan image milik saya dan mempunyai alamat seperti ini :



    http://i162.photobucket.com/albums/t253/adel22/tombol_03.gif



    http://i162.photobucket.com/albums/t253/adel22/tombol_03.gif



    prinsipnya kode-kode ini sama dengan diatas, yang membedakan adalah penambahan image doang, coba lakukan langkah berikut ini :


    Tambahkan kode berikut sesudah kode <style type="text/css"> dan sebelum kode </style>, ya di mana saja asalkan di antara kode tadi.

    .cuplis{
    text-align:left;
    display:block;
    width:180px;
    height:20px;
    background:#f0f0f0 url(http://i162.photobucket.com/albums/t253/adel22/tombol_03.gif) top right no-repeat;
    padding:3px 4px 3px 8px;
    margin:7px 10px 7px 0;
    }

    .cuplis:hover{ background:#97A4B9 url(http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif) top right no-repeat;
    text-decoration:none;
    }




  • copy kode di bawah ini, lalu paste di tempat yang sobat inginkan, bisa di sidebar, footer atau dimana saja, kemudian rubahlah dengan link yang sobat punya :





  • <a class="cuplis" href="http://rubrik-elektronik.blogspot.com">Rubrik Elektronik</a><span class="hide"> | </span>

    <a class="cuplis" href="contoh-blog.blogspot.com">Blog Menu D'Tree</a><span class="hide"> | </span>

    <a class="cuplis" href="http://designrumahdanbaju.blogspot.com/.com">Free Blog Templates</a><span class="hide"> | </span>

    <a class="cuplis" href="http://kolom-authorized.blogspot.com">Authorized Service</a><span class="hide"> | </span>
        
      kalo mau lebih lengkap lagi klik ke http://kolom-tutorial.blogspot.com
    semoga brmanfaat buat bloger's semuanya oke oke oke

    0 komentar:

    Sabtu, 30 Oktober 2010

    Menu Navigasi dengan CSS

    Menu Navigasi dengan CSS 



    Bagaimana sudah dengan posisi PW hahaha (alay) tapi walaupun alay kita ikuti yuk petunjuk masuk surga eh salah heheheehe.petunjuk

    Menu Navigasi dengan CSS :


  • Upload gambar tombol-tombol tersebut pada hosting penyimpan semisal www.photobucket.com untuk cara upload gambar sudah saya terangkan pada pembahasa yang lalu , jika sudah lupa silahkan klik Di sini



  • .

    Agar ada contoh, umpamanya kita mempunyai alamat tombol sebagai berikut :

    http://i162.photobucket.com/albums/t253/adel22/tombol_03.gif

    http://i162.photobucket.com/albums/t253/adel22/tombol_03.gif



  • Langkah selanjutnya adalah menambahkan kode, ada dua contoh yakni yang tidak memakai gambar tombol dan yang memakai gambar tombol. contoh yang tidak memakai gambar tombol :





    1. Tambahkan kode berikut sesudah kode <style type="text/css"> dan sebelum kode </style>, ya di mana saja asalkan di antara kode tadi.
    2. .unyil{ text-align:left; display:block; width:180px; height:20px; background:#f0f0f0; padding:3px 4px 3px 8px; margin:7px 10px 7px 0; } .unyil:hover{ background:#97A4B9; text-decoration:none; }
    3. copy kode di bawah ini, lalu paste di tempat yang sobat inginkan, bisa di sidebar, footer atau dimana saja, kemudian rubahlah dengan link yang sobat punya :
    4. <a class="unyil" href="http://rubrik-elektronik.blogspot.com">Rubrik Elektronik</a><span class="hide"> | </span> <a class="unyil" href="contoh-blog.blogspot.com">Blog Menu D'Tree</a><span class="hide"> | </span> <a class="unyil" href="http://designrumahdanbaju.blogspot.com">Free Blog Templates</a><span class="hide"> | </span> <a class="unyil" href="http://kolom-authorized.blogspot.com">Authorized Service</a><span class="hide">


    biar tidak telalu bingung, sedikit saya uraikan :

    .unyil --> kata .unyil bisa diganti apa saja yang penting harus sesuai dengan kode berikutnya.

    text-align:left; --> kata left artinya tulisan akan berada di sebelah kiri, ini bisa di ganti dengan kata center atau right

    display:block; --> kata block artinya di tampilkan di layar monitor.

    width:180px; --> angka 180px adalah lebar dari tombol navigasi sebesar 180px, nah ini bisa di rubah sesuai dengan kondisi blog sobat masing-masing.

    height:20px; --> angka 20px adalah tinggi dari tombol navigasi sebesar 20px, ini bisa di ganti sesuai dengan keinginan sobat.

    background:#f0f0f0; --> tulisan #f0f0f0 adalah kode warna dari background, ini bisa di rubah sesuai dengan ke sukaan sobat.

    padding:3px 4px 3px 8px; --> nilai padding ini adalah untuk mengatus jarak tulisan pada tombol navigasi, bisa di rubah sesuai kebutuhan.coba-coba aja rubah sendiri.

    margin:7px 10px 7px 0; --> margin ini untuk jarak antara satu tombol dengan tombol yang lain, bisa di rubah, coba aja.

    .unyil:hover{ --> .unyil:hover artinya yaitu ketika mouse berada pada tombol .unyil akan berubah menjadi seperti yang di definisikan pada kode ini.

    background:#97A4B9; --> #97A4B9 adalah kode warna yang dinginkan ketika mouse berada pada tombol .unyil

    text-decoration:none; --> text dekorasi jangan di rubah.

    Bagaimana sudah jelas? mudah-mudahan jelas.



    Contoh yang kedua adalah yang memakai background image, dalam hal ini saya ambil contoh dengan image milik saya dan mempunyai alamat seperti ini :



    http://i162.photobucket.com/albums/t253/adel22/tombol_03.gif



    http://i162.photobucket.com/albums/t253/adel22/tombol_03.gif



    prinsipnya kode-kode ini sama dengan diatas, yang membedakan adalah penambahan image doang, coba lakukan langkah berikut ini :


    Tambahkan kode berikut sesudah kode <style type="text/css"> dan sebelum kode </style>, ya di mana saja asalkan di antara kode tadi.

    .cuplis{
    text-align:left;
    display:block;
    width:180px;
    height:20px;
    background:#f0f0f0 url(http://i162.photobucket.com/albums/t253/adel22/tombol_03.gif) top right no-repeat;
    padding:3px 4px 3px 8px;
    margin:7px 10px 7px 0;
    }

    .cuplis:hover{ background:#97A4B9 url(http://i162.photobucket.com/albums/t253/rohman24/tombol_06.gif) top right no-repeat;
    text-decoration:none;
    }




  • copy kode di bawah ini, lalu paste di tempat yang sobat inginkan, bisa di sidebar, footer atau dimana saja, kemudian rubahlah dengan link yang sobat punya :





  • <a class="cuplis" href="http://rubrik-elektronik.blogspot.com">Rubrik Elektronik</a><span class="hide"> | </span>

    <a class="cuplis" href="contoh-blog.blogspot.com">Blog Menu D'Tree</a><span class="hide"> | </span>

    <a class="cuplis" href="http://designrumahdanbaju.blogspot.com/.com">Free Blog Templates</a><span class="hide"> | </span>

    <a class="cuplis" href="http://kolom-authorized.blogspot.com">Authorized Service</a><span class="hide"> | </span>
        
      kalo mau lebih lengkap lagi klik ke http://kolom-tutorial.blogspot.com
    semoga brmanfaat buat bloger's semuanya oke oke oke

    Tidak ada komentar: