Belajar Membuat Menu Drop-Down di Blogger

Saya baru-baru menemukan sebuah kebutuhan untuk menginstal menu drop-down di Blogger. Aku mencari dan mencari web, dan setelah membaca sekelompok tutorial, saya bisa menempatkan semua info bersama-sama untuk akhirnya mencari tahu persis apa yang perlu saya lakukan. Apa yang Anda lihat di bawah ini sebagian besar didasarkan pada yang terbaik dari semua tutorial yang saya temukan , dengan modifikasi saya sendiri untuk tujuan estetika dan catatan menambahkan.

 





Tutorial ini tampaknya bekerja terbaik dengan blogger menggunakan Picture Window atau template Simple. Blogger menggunakan template lain telah melaporkan proses ini tidak bekerja dengan baik (atau sama sekali).


BAGIAN SATU
Kita akan mulai dengan kode berikut sebagai yayasan kami. Tidak perlu copy dan paste dulu. Memeriksanya, mendapatkan sedikit akrab dengan struktur, kemudian membaca:
  <Div id = 'menubar'>
     <Ul id = 'menu'>
       <Li> <a href='LINK'> TabName1 </a> </ li>
       <Li> <a href='LINK'> TabName2 </a> </ li>
       <Li> <a href='LINK'> TabName3 </a> </ li>
       <Li> <a href='LINK'> TabName4 </a> </ li>
     </ Ul>
   </ Div> 
Di atas akan memberikan Anda satu set dasar tab, ditampilkan dalam baris horizontal. Untuk membuat item submenu - orang-orang yang pada akhirnya akan drop down untuk memberikan pengguna lebih banyak pilihan untuk memilih dari - kita perlu menambahkan kode yang lebih sedikit di dalam "tabname" di mana Anda ingin pilihan drop-down untuk muncul.
Itu kode tambahan akan terlihat seperti ini:
  <Ul>
           <Li> <a href='LINK'> DropDownName1 </a> </ li>
           <Li> <a href='LINK'> DropDownName2 </a> </ li>
           <Li> <a href='LINK'> DropDownName3 </a> </ li>
         </ Ul> 
Lihat bagaimana ada tiga baris, persis sama? Yang akan memberikan pengguna tiga pilihan dalam menu drop-down untuk tab mana kita pasangkan ke. Tambahkan lebih banyak dari baris yang sama jika Anda membutuhkan barang-barang lainnya di menu drop-down, atau menghapus baris jika Anda membutuhkan barang-barang yang lebih sedikit.
Oke ... jadi katakan Anda ingin TabNames 1, 2, dan 3 untuk menjadi sederhana, tab normal. Tidak ada pilihan menu lain, hanya tab diklik ol biasa 'untuk masing-masing bagian, seperti Blogger biasanya menciptakan. Tinggalkan HTML untuk tiga tab saja.
Untuk sampel kami di sini, mari kita membuat TabName4 tarik-turun dengan lebih banyak pilihan. Kita akan menempatkan garis tambahan kode di atas sebelum tag </ li> dari TabName4. Kode di widget kita sekarang akan terlihat seperti ini (kode untuk seluruh tab 4 disorot dalam warna merah sehingga Anda dapat melihat bagaimana hal itu disatukan):
  <Div id = 'menubar'>
     <Ul id = 'menu'>
          <Li> <a href='LINK'> DropDownName1 </a> </ li>
          <Li> <a href='LINK'> DropDownName2 </a> </ li>
          <Li> <a href='LINK'> DropDownName3 </a> </ li>   
 <li> <a href='LINK'> TabName4 </a> 
               <ul> 
                  <li> <a href='LINK'> DropDownName1 </a> </ li> 
                  <li> <a href='LINK'> DropDownName2 </a> </ li> 
                  <li> <a href='LINK'> DropDownName3 </a> </ li> 
               </ ul> 
           </ li>
     </ Ul>
   </ Div> 
Mengganti LINK kata dengan hyperlink langsung yang menunjuk ke halaman, posting, atau situs web yang sesuai. Jika salah satu dari TabNames Anda tidak memiliki atau butuh tautan yang unik, menempatkan beranda situs web Anda di ruang LINK.
Tempatkan kode di atas dalam HTML / JavaScript widget (dari panel kontrol blog Anda, pilih Layout >> Tambah Gadget >> HTML / JavaScript) mana pun Anda ingin menu bar muncul: biasanya hanya di bawah judul / header. Perhatikan bahwa kita tidak menggunakan "Pages" gadget. Jika Anda sudah memiliki "Pages" diinstal, Anda akan akhirnya ingin menghapusnya dari tata letak blog Anda.
Sekarang, itu akan terlihat seperti berantakan di situs Anda, semua terhampar dengan tidak benar-benar jatuh ke bawah sama sekali. Langkah berikutnya adalah lebih terlibat, tetapi akan mengatur tampilan menu bar dan memiliki bagian drop-down bekerja dengan benar. Anda akan memiliki menu drop-down di Blogger dalam waktu singkat!



BAGIAN KEDUA
Bagian ini dapat merasa agak menakutkan. Dari panel kontrol blog Anda, pilih Template.
Di sudut kanan atas, klik "Backup / Restore" tombol. Download cadangan dari template Anda saat ini, hanya jika sesuatu berjalan salah.
Setelah Anda didukung template Anda, klik tombol "Edit HTML" (di bawah "Live di Blog").
Perhatikan bagaimana setiap baris kode dimulai dalam warna hijau, dan setiap baris diberi nomor.
Carilah baris yang mengatakan: <b: skin> ... </ b: skin>
(Dalam template saya itu sekitar garis 13, ini mungkin berbeda.)
Klik titik-titik kecil di antara tag.

Ini akan memperluas satu ton kode, dan kode yang akan muncul dengan warna biru.
Gulir ke bawah, dan menemukan di mana kode berubah dari belakang biru ke hijau. Pada saat itu, ada garis yang mengatakan:]]> </ b: skin>
Kadang-kadang mendapat pengungsi, sehingga Anda mungkin ingin meletakkannya di sendiri, jalur yang terpisah; beberapa mungkin biru, beberapa mungkin menjadi hijau. Jangan khawatir tentang itu: Pastikan semua karakter tinggal bersama-sama:]]> </ b: skin>
Sekarang, copy dan paste potongan kode berikut, dan paste pada baris segera SEBELUM]]> </ b: skin>


  / * -------- Mulailah Drop Down Menu ------- * / 

 #menubar {
     background-color: transparent;
     width: 840px;
     color: # 424338;
         margin: 0px;
         padding: 0;
         position: relative;
         border-top: 0px padat ## 8C001A;
         height: 35px;
 } 

 #menus {
     margin: 0;
     padding: 0;
 } 

 #menus ul {
     float: kiri;
     list-style: none;
     margin: 0;
     padding: 0;
 } 

 #menus li {
     list-style: none;
     margin: 0;
     padding: 0;
         border-left: 0px solid # 1A6680;
         border-right: 0px solid # 1A6680;
         height: auto;
 }
 #menus li a, #menus li a: link, #menus li a: visited {
     Warna: #FFFFFF;  / * Ini mengubah warna teks link dikunjungi.  * /
     display: block;
    Font: 14px biasa Arial, Tahoma, Helvetica, FreeSans, sans-serif;  margin: 5;  
            / * Perubahan nilai margin 0 jika Anda ingin ada ruang antara tab * /
            / * Perubahan 14 ke nomor lain untuk menambah atau mengurangi ukuran font * / 
     padding: 12px 10px 9px 12px;
         text-decoration: none;
 } 

 #menus li a: hover, #menus li a: aktif {
     background: # 424338;  / * Ini adalah utama warna latar belakang menu ketika pengguna melayang.  * /
     Warna: #FFFFFF;  / * Ini mengubah warna teks.  * /
     display: block;
     text-decoration: none;
         margin: 0;
     padding: 12px 10px 9px 12px;       
 } 

 #menus li {
     float: kiri;
     padding: 0;
 } 

 #menus li ul {
     z-index: 9999;
     position: absolute;
     kiri: -999em;
     height: auto;
     width: 160px;
     margin: 0;
     padding: 0;
 } 

 #menus li ul a {
     width: 140px;
 } 

 #menus li ul ul {
     margin: -25px 0 0 160px;
 } 

 #menus li: hover ul ul, #menus li: hover ul ul ul, #menus li.sfhover ul ul, #menus li.sfhover ul ul ul {
     kiri: -999em;
 } 

 #menus li: hover ul, #menus li li: hover ul, #menus li li li: hover ul, #menus li.sfhover ul, #menus li 

 li.sfhover ul, #menus li li li.sfhover ul {
     kiri: auto;
 } 

 #menus li: hover, #menus li.sfhover {
     Posisi: statis;
 } 

 #menus li li a, #menus li li a: link, #menus li li a: visited {
     background: # 424338;  / * Ini adalah warna latar belakang untuk menu drop down.  * /
     width: 120px;
     Warna: #FFFFFF;  / * Ini mengubah warna teks.  * /
     display: block;
     Font: 14px biasa Arial, Tahoma, Helvetica, FreeSans, sans-serif;  
                / * Perubahan 14 ke nomor lain untuk menambah atau mengurangi ukuran font * / 
     margin: 0;
     padding: 12px 10px 9px 12px;
         text-decoration: none;
 z-index: 9999;
 border-bottom: 0px solid # 1A6680;
 } 

 #menus li li a: hover, #menusli li a: aktif {
     background: # 424338;  / * Ini adalah warna latar belakang untuk menu drop down ketika pengguna melayang.  * /
     Warna: #FFFFFF;  / * Ini mengubah warna teks.  * /
     display: block;  margin: 0;
     padding: 12px 10px 9px 12px;
         text-decoration: none;
 } 

 / * -------- End Drop Down Menu ------- * / 
Itu dia! Klik oranye "Simpan Template" tombol dan selesai membuat menu drop-down di Blogger!

BONUS: Menyesuaikan ANDA WARNA
Aku membuat catatan dalam kode di atas untuk membiarkan Anda tahu mana warna mempengaruhi yang aspek dari menu bar. Anda dapat menyesuaikan warna-warna ini untuk lebih cocok desain blog Anda dengan mengubah nilai-nilai hex (kombinasi 6-digit angka / huruf yang muncul setelah #). Misalnya, hitam # 000000. Putih #FFFFFF.
Di blok besar teks di atas, teks yang Anda lihat di antara / * dan * / adalah komentar dalam kode. Komentar adalah catatan seorang programmer (yang aku tidak berpura-pura menjadi!) Termasuk untuk membantu orang lain lebih memahami kode. Dalam hal ini, saya ingin Anda tahu apa bagian dari kode mempengaruhi bagian mana dari menu bar, sehingga Anda mudah-mudahan bisa membuat warna dan teks perubahan dengan lebih percaya diri.
HTML Color Picker adalah sumber daya yang besar untuk menemukan nilai hex untuk warna apapun. Anda juga bisa menggunakan Color Palette Generator untuk menghasilkan palet warna yang akan melengkapi blog atau posting blog tertentu berdasarkan gambar yang Anda tentukan!

0 Response to "Belajar Membuat Menu Drop-Down di Blogger"