Jumat, 23 Desember 2011

langakah member fasilitas menu pada blog :

  1. Login ke akun Blogspot pembaca
  2. Klik link menu Tata Letak, kemudian pilih Edit HTML.
  3. Back up terlebih dahulu template pembaca dengan mengklik link Download Template Lengkap agar jika terjadi kesalahan saat mengedit, pembaca bisa mengembalikannya dengan menguploadnya kembali.
  4. Silahkan beri tanda centang pada kotak kecil disamping tulisan Expand Template Widget
  5. Cari kode seperti dibawah ini pada template pembaca:
    <b:includable     id='description'>
    <div  class='descriptionwrapper'>
    <p    class='description'><span><data:description/></span></p>
    </div>
    </b:includable>
    </b:widget>
    </b:section>
    </div>
  6. Jika sudah ketemu, silahkan copy struktur berikut tepat dibawah kode-kode pada langkah 5
    <ul>
    <li><ahref='URL1'>Home</a></li>
    <li><ahref='URL1'>AboutMe</a></li>
    <li><ahref='URL3'>TutorialWebsite</a></li>
    </ul>
  7. Setelah itu klik tombol SIMPAN TEMPLATE, lalu lihat hasilnya
  8. Pembaca akan melihat bahwa menu-menu tersebut muncul sebagai list vertikal, bukan horizontal. Oleh karena itu, kita perlu mengatur tampilannya agar muncul berjejer secara horizontal dengan menggunakan CSS. Selain itu, kita juga bisa mengatur tampilan dari menu tersebut agar terlihat lebih menarik dengan CSS.
  9. Buka kembali bagian Edit HTML pada blogspot pembaca, kemudian cari kode ]]></b:skin>.
  10. Silahkan copy struktur berikut diatas kode ]]></b:skin>
    /*CSS untuk menu horizontal*/

    .menuhorul{
    font:bold13pxarial;
    padding-left:0;
    margin-left:0;
    height:20px;
    }

    .menuhorulli{
    list-style:none;
    display:inline;
    }

    .menuhorullia{
    padding:2px0.5em;
    text-decorationnone;
    float:left;
    color:black;
    background-color:#33FFCC;
    border:2pxsolid#33FFCC;
    }

    .menuhorullia:hover{
    background-color:#33CCFF;
    border-style:outset;
    }
    .menuhor ul merupakan
    atribut class yang berfungsi untuk mengatur tampilan parent darilistmenuhorizontaltersebut.
    .menuhorulli berfungsi untuk mengatur tampilan anak menu horizontal yang kita buat.
    .menuhorulli a berfungsi untuk mengatur tampilan link dari anak menu tersebut.
    .menuhorulli a:hover berfungsi untuk mengatur tampilan link anak menu ketika pointer digerakkan diatasnya.
  11. Kemudian ubah struktur yang Anda copy pada langkah 6 diatas sehingga menjadi seperti berikut:
    <divclass="menuhor">
    <ul>
    <li><ahref='URL1'>Home</a></li>
    <li><ahref='URL2'>TutorialWebsite</a></li>
    <li><ahref='URL3'>AboutMe</a></li>
    </ul>
    </div>
  12. Silahkan ganti URL 1 dengan URL halaman yang akan dituju jika menu "Home" diklik. URL 2 diganti dengan URL halaman yang akan dituju jika menu "Tutorial Website" diklik, dan seterusnya.
  13. Klik tombol SIMPAN TEMPLATE.
Untuk melihat hasilnya.Seperti yang telah saya katakan, bahwa CSS tersebut berfungsi untuk mengatur tampilan menu yang kita buat tadi. Silahkan pembaca menambah atau merubah atribut CSS tersebut untuk memodifikasi tampilannya, misalnya warna tulisan, background, lebar menu, dan lain-lain. Jika pembaca ingin mengerti cara memodifikasi atau membuat CSS tersebut, silahkan klik disini. Saya yakin pembaca akan lebih mengerti bagaimana CSS tersebut bekerja. Dengan adanya menu horizontal tersebut blog pembaca pasti menjadi lebih keren dan ergonomis.

0 komentar:

Poskan Komentar