Cara Membuat Menu Utama Blogspot Dengan Images

Assalamu'alaikum..wr..wb..!!!
Sebelumnya saya ucapkan terimakasih kepada sobat blogger, Mas Hary yang telah sudi bertanya melalui chat box tentang cara membuat menu utama seperti yang anda lihat pada menu utama blog ini. Dari pertanyaan tersbut, saya kemudian terinpirasi untuk membuat postingan tutorial tentang cara membuat menu utama dengan tampilan image sebagai tautan. Ini hanyalah trick sederhana yang saya buat hanya sekedar iseng (ga nyangka bakal ada yang simpati, hehe..). Dan untuk mempertanggung jawabkan perbuatan saya terhadap anak orang itu, maka di buatlah postingan tutorial ini (kalimatnya ko mirip sblumnya ?).

Ok !! Langsung aja, pertama-tama anda klik blogger.com, dan sign in ke dashboard → edit layout → Edit html.
Jangan lupa memakai helm untuk mem-back Up template anda sebelum di edit. Kalau sudah, tidak perlu mengklik expand template widged.

  • Silakan anda cari kode berikut ini :

    <div class='list_menu'>
    <b:section id='topmenusection' maxwidgets='1' showaddelement='no'>
    <b:widget id='LinkList1' locked='false' title='Top Menu' type='LinkList'/>
    </b:section>


    Ganti tulisan showaddelement='no menjadi showaddelement='yes

    kemudian, ganti angka 1 pada tulisan maxwidgets='1 dengan angka jumlah widged yang anda inginkan muncul pada sidebar element headher.

    setelah itu, klik simpan dan masuk ke edit layout, sekarang anda dapat menambahkan widged pada element headher. Gunakan kode di bawah ini untuk membuat menu utama :

    Silakan di kopas (kopy paste) !!


    <center><table border="0">
    <tr>
    <td><a href="URL menu pertama/"><img border="0" alt="judul menu pertama" src="URL image menu pertama"/>
    </a></td>
    <td><a href="URL menu kedua/"><img border="0" alt="judul menu kedua" src="URL image menu kedua
    "/></a></td>
    <td><a href="URL menu ketiga"><img border="0" alt="judul menu ketiga" src="URL image menu ketiga"/>

    </a></td>

    <td><a href="URL menu keempat"><img border="0" alt="judul menu keempat" src="URL image menu keempat"/></a></td>

    </tr>
    </table></center>

    KETERANGAN :

    • Ganti setiap tulisan yang berwarnah hijau sesuai petunjuk yang telah di jelaskan di tiap-tiap bagian.
    • Untuk image yang nantinya akan anda digunakan sebagai link pada menu, silakan gunakan kreatifitas anda sendiri dalam mendesinge, file image bisa berupa jpg, gif, png, flash, dan sebagainya..
    • Beberapa image yang sudah jadi lalu di simpan di situs hosting gratis seperti photobucket.com dan sebagainya. Copy URL tiap-tiap image yang telah anda simpan dan selipkan pada URL image menu seperti yang telah di jelaskan di atas.
    • Jika anda ingin menambahkan menu yang lebih banyak, tinggal menambahkan kode : <td><a href="URL menu "><img border="0" alt="judul menu " src="URL image menu "/></a>

      sebelum :
      </td>

      </tr>
      </table></center> :





    SELESAI, SELAMAT MENCOBA !!

    Jika ada yang kurang jelas, sikakan cantumkan pada kotak komentar !!
  • Tags: ,

    About author

    Curabitur at est vel odio aliquam fermentum in vel tortor. Aliquam eget laoreet metus. Quisque auctor dolor fermentum nisi imperdiet vel placerat purus convallis.