Membuat Menu Navigasi Untuk Blog

Untuk itu agar lebih memudahkan mereka atau siapapun di luar sana yang ingin mengetahui cara membuat menu navigasi di situs blogger maka akan saya tulis artikel tutorial mengenai cara membuatnya dengan cara mudah dan cepat, anda hanya perlu 'sedikit' pengetahuan tentang bahasa HTML, maka anda bisa membuat navigation bar sederhana (Contoh Navigation bar dapat dilihat di atas postingan ini). Ok lets get started.

1) Buat Postingan yang berhubungan dengan menu navigasi anda
Langkah pertama adalah membuat sebuah postingan yang berhubungan dengan konten yang ada di menu navigasi anda. Misalkan di menu navigasi anda ingin membuat "My Profile", maka buatlah sebuah artikel mengenai deskripsi singkat tentang diri anda sendiri agar ketika pengunjung blog anda meng-klik menu navigasi "My Profile" maka akan langsung terhubung ke postingan mengenai profil anda.

2) Download gambar yang ingin anda jadikan background menu navigasi anda
Untuk kumpulan gambar-gambar menu navigasi, and bisa dapatkan disini. Sedangkan preview background image tersebut bisa anda dapakan disini.

Setelah selesai mendownload file tersebut, unzip dan upload gambar yang kira-kira anda sukai ke website image hosting (contoh: http://photobucket.com). Ada 2 gambar yang harus anda upload, yaitu "tableftX" dan "tabrightX".

3) Tambahkan Page Element ke HeaderLangkah berikut adalah menambahkan Html page element ke header. Lakukan langkah berikut ini:

►Log in ke blogger.com dan klik "layout" pada dashboard.
► Tab page element akan terbuka, klik tab "edit html".
►Scroll down sampai anda menemukan kode html berikut:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

►Hapus dan ganti kode di atas dengan:

<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>

►Kemudian klik save.

► Kembali ke tab page element. Klik 'Add Page Element'

► Sebuah pop-up window akan muncul, pilih Html/Javascript.

►Copy dan paste kode di bawah kedalam kolom Html/Javascript (Kosongkan judulnya).

<style type="text/css">
/*- Menu Tabs J--------------------------- */

  #tabsI {
    width:660px;
    margin:5px 5px 0;
    background:#000;
    font-size:93%;
    line-height:normal;
    border-bottom:0px solid #24618E;
    }
  #tabsI ul {
    margin:0;
    padding:10px 10px 0 10px;
    list-style:none;
    }
  #tabsI li {
    display:inline;
    margin:0;
    padding:0;
    }
  #tabsI a {
    float:left;
    background:url("LINK_OF_tableftI.gif") no-repeat left top;
    margin:0;
    padding:0 0 0 5px;
    text-decoration:none;
    }
  #tabsI a span {
    float:left;
    display:block;
    background:url("LINK_OF_tabrightI.gif") no-repeat right top;
    padding:5px 15px 4px 6px;
    color:#24618E;
    }
  /* Commented Backslash Hack hides rule from IE5-Mac \*/
  #tabsI a span {float:none;}
  /* End IE5-Mac hack */
  #tabsI a:hover span {
    color:#FFF;
    }
  #tabsI a:hover {
    background-position:0% -42px;
    }
  #tabsI a:hover span {
    background-position:100% -42px;
    }
</style>
<div id="tabsI">
<ul>
  <li><a href="BLOG_URL" title="Home"><span>Home</span></a></li>
  <li><a href="LINK_OF_CONTACT_POST" title="Contact"><span>Contact</span></a></li>
  <li><a href="LINK_OF_SUBSCRIBE_POST" title="Subscribe"><span>Subscribe</span></a></li>
  <li><a href="LINK_OF_COPYRIGHT_POST" title="Copyright"><span>Copyright</span></a></li>
  <li><a href="LINK_OF_PROFILE" title="About Us"><span>About Us</span></a></li>
 <li><a href="LINK_OF_ARCHIVES_POST" title="Archives"><span>Archives</span></a></li>
</ul>
</div>

► Ganti kode "LINK_OF_tableftI.gif" dan "LINK_OF_tabrightI.gif" dengan direct link gambar yang anda upload pada langkah nomor 2 di atas.

► Ganti kode yang saya beri bold di bawah (Blog_URL, LINK_OF_CONTACT_POST dsb.) dengan link yang anda inginkan. Dan ganti "title" sesuai keinginan anda (Home, about me, dsb)

► Selesai, kini blog anda akan memiliki sebuah menu navigasi baru!