Menambahkan Elemen Menu Pada Halaman Template Blogger

Pada waktu pertama kali kita membuat blog pada blogger, maka kita akan menggunakan template yang telah disediakan oleh blogger. Elemen halaman pada template tersebut biasanya terdiri dari header, post, sidebar, dan footer. Bentuk tampilan dari elemen halaman tersebut dapat kalian lihat di bawah ini.

Gambar di atas merupakan elemen halaman dari template blogger yang belum ditambahkan elemen menu. Sekarang kita akan mencoba menambahkan elemen menu pada halaman template blogger tersebut sehingga bentuk tampilannya akan menjadi seperti gambar di bawah ini.

Bagaimana menambahkan elemen menu tersebut pada template blogger? Baiklah saya akan mencoba memberitahu caranya kepada kalian. Simak penjelasannya di bawah ini.

Setelah kalian "Login" pada blog, masuklah ke bagian "Tata Letak" dan pilih "Edit HTML". Tambahkan kode Css di bawah ini tepat di atas kode ]]></b:skin> yang terdapat pada kolom kode "Edit HTML" blog kalian.

Kode Css

#LinkList2 h2 {
  display:none;
  }
#LinkList2 ul {
  list-style: none;
  }
#LinkList2 li {
  float: left;
  }
#LinkList2 a:link, #LinkList2 a:visited {
  padding: 5px;
  display: block;
  color:#fff;
  font-size:11px;
  font-family: "Times New Roman", Serif;
  }
#LinkList2 a:hover {
  padding: 5px;
  display: block;
  color:#ff0000;
  font-size:11px;
  font-family: "Times New Roman", Serif;
  }

Langkah Berikutnya dengan menggunkan Ctrl-F pada keyboard, carilah kode <div id='header-wrapper'> sehingga akan tampak tampilan kode sperti di bawah ini.

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

Jika sudah kalian temukan, langkah berikutnya kita tambahkan kode elemen menu yang sudah saya beri warna biru sehingga tampilan kodenya akan tampak seperti di bawah ini.

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

Langkah terakhir simpan template kalian dan lihatlah pada "Elemen Halaman" template blog kalian. Nah sekarang elamen halaman blog kalian sudah bertambah dengan elemen menu. Adapun fungsi dan kegunaan dari elemen tersebut adalah kalian dapat membuat link yang ingin ditampilkan pada blog yang kalian miliki. Baiklah teman sampai di sini dulu postingan saya mengenai ini. Saya harap ini dapat bermanfaat bagi kalian.