Blog tutorial|Free Template|HTML Tutorial|Dan tips&trik mengenai internet|


Server times:

Senin, 17 Juni 2013

Cara Menambahkan Menu Horizontal di blog

Menambahkan Menu mendatar ( Horizontal ) di blog untuk pengguna blogger adalah salah satu optimasi blog untuk lebih ramah pengunjung ( seo friendly ).

Mengapa demikian ? karena menu blog sangat penting agar pengunjung bisa dengan mudah mencari konten/artikel yang diinginkan.

Ikuti tutorial di bawah ini untuk menambahkan / membuat menu mendatar/ horizontal di blogger anda :

I. LANGKAH PERTAMA

  • Backup template blog anda dulu untuk mewaspadai jika terjadi kesalahan caranya sebagai berikut  :
  1. Masuk ke dashboard blogger anda
  2. Pilih Opsi lanjutan > Template.
  3. Kemudian di atas kanan dashboard, klik cadangkan/pulihkan.
  4. klik Unduh template lengkap
    lalu tutu, jika belum paham lihat gambar dibawah ini 
     
    Kembali ke template, pilih edit html.
           Klik sembarang di dalam template anda
           Lalu sembarang CTRL+ F di keyboard anda
           Di dalam kotak search kode, masukan kode  ]]></b:skin>, lalu tekan enter.
           Letakan kode Css dibwah ini tepat diatas kode tadi 
     
    a.burastabs, a.burastabs:link, a.burastabs:visited {display:block; width:120px; height:30px; background:white; border:1px solid #ebebeb; margin-top:2px; text-align:center; text-decoration:none; font-family:arial, sans-serif; font-size:12px; font-weight:bold;color:red; line-height:25px; overflow:hidden; float:left;}

    a.burastabs:hover {color:white; background:#666666;}
    #burasbar {width:auto; margin:0 auto;} 
             
     
    Anda bisa mengedit kode diatas sesuai keinginan anda jika anda mengerti CSS ( lebar menu, tinggi menu, ukuran dan jenis huruf, warna background menu )
    Setelah menaruh kode diatas simpan template anda.
     
    II. LANGKAH KEDUA
    *       Masih di menu template sebelah kiri pilih tata letak.
    *       Kemudian klik tambahkan gadget
    *       pilih html java script
    *       masukan kode html di bawah ini didalam kolom: 
    <div id='burasbar'>
    <a href="URL TUJUAN" class="burastabs" title="Bahan ajar">Bahan Ajar</a>
    <a href="URL TUJUAN" class="burastabs" title="Bisnsi Online">Bisnis Online</a>
    <a href="URL TUJUAN" class="burastabs" title="Lowongan Kerja">lowongan Kerja</a>
    <a href="URL TUJUAN" class="burastabs" title="profil">About Us</a>
    <a href="URL TUJUAN" class="burastabs" title="Sistem Operasi">Sistem Operasi</a>
    <a href="URL TUJUAN" class="burastabs" title="Pemrograman">Pemrograman</a>
    </div>


     Tulisan berwarna merah ganti dengan URL TUJUAN KE MENU BLOG ANDA

     Setelah pengeditan selesai simpan template

           Lihat hasilnya, kira-kira hasilnya  seperti gambar di bawah ini 

     

Tidak ada komentar: