Pages

Cara Membuat Menu Horizontal | Membuat Menu Horizonal Di Blogspot

Cara Membuat Menu Horizontal | Membuat Menu Horizonal Di Blogspot - Blog kutulis tidak akan pernah bosan untuk membagikan tips untuk mempercantik blog anda, kali ini saya akan memberikan ulasan mengenai Cara Membuat Menu Horizontal | Membuat Menu Horizonal Di Blogspot yang bagus buat teman teman yang sedang melakukan optimasi blogger dan juga SEO friedly tentunya. Memang tidak bisa dipungkiri nih teman jika blog tanpa menu horizontal kayaknya kurang ada kesan gimana gitu lho, kayaknya tuch gak ada yang spesial gitu lho, nah buat teman kutulis ingin mencobanya silahkan mengikuti langkah langkahnya yah di bawah ini. cekidott.!!!!!!

Cara Membuat Menu Horizontal | Membuat Menu Horizonal Di Blogspot

  • Login ke blog anda > Design > Edit HTML ( tidak perlu centang Expand Widget templates )
  • Cari Kode ]]></b:skin> ( Gunakan CTRL + F untuk mempermudah pencarian )
  • Copy Css di dibawah ini dan paste tepat diatas kode ]]></b:skin>
#NavbarMenuAtas{ background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjjNO_fqabGbPSBIt6oz2ijqIWBtWvq235CT2qpqNtIQmnlKqD1Y1_0MHgWWYI5NF7jhQQn_g_jjYwDINb0JMjG_U1rkZb-ScwGSplaBott1nd0k79tmLR8mbwuGePos2Aky5JbK9TV99n/?imgmax=800) repeat-x; width:960px; height:40px; color:$navcolor; margin:0 auto; font: bold 8px Arial, Tahoma, Verdana;}
#NavbarMenuAtasleft{ width:650px; float:left; }
  • Langkah selanjutnya cari kode <div id='header'> atau <div id='header-wrapper'>
  • Jika sudah ditemukan, Copy kode dibawah ini dan paste tepat di atas kode <div id='header'> atau <div id='header-wrapper'>
<div id='NavbarMenuAtas'>
       <div id='NavbarMenuAtasleft'>
      <ul id='nav'>
        <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
        <li>
          <a href='#'>Page #1</a>
          <ul>
            <li><a href='#'>Sub Page #1</a></li>
            <li><a href='#'>Sub Page #2</a></li>
            <li><a href='#'>Sub Page #3</a></li>
          </ul>
        </li>
        <li><a href='#'>Page #2</a></li>
      </ul>
    </div>
  </div>
  • Linknya bisa anda ganti sendiri sesuai keinginan lalu preview, kalau sudah benar silahkan di save.
Cara Membuat Menu Horizontal | Membuat Menu Horizonal Di Blogspot sangat bermacam-macam, tergantung dari kreativitas anda. Yang paling penting adalah belajar HTML dan CSS. Jika sudah mahir HTML atau bahkan javascript pasti sangat mudah untuk membuat tampilan apa saja. Oh iya Anda juga bisa mengganti Background menunya dengan cara mengganti link gambar yang ini
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjjNO_fqabGbPSBIt6oz2ijqIWBtWvq235CT2qpqNtIQmnlKqD1Y1_0MHgWWYI5NF7jhQQn_g_jjYwDINb0JMjG_U1rkZb-ScwGSplaBott1nd0k79tmLR8mbwuGePos2Aky5JbK9TV99n/?imgmax=800
Atau anda ingin backround warna saja, silahkan hapus :
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjjNO_fqabGbPSBIt6oz2ijqIWBtWvq235CT2qpqNtIQmnlKqD1Y1_0MHgWWYI5NF7jhQQn_g_jjYwDINb0JMjG_U1rkZb-ScwGSplaBott1nd0k79tmLR8mbwuGePos2Aky5JbK9TV99n/?imgmax=800)
Untuk mengubah warna yang ini background:#000
kayaknya sudah berakhir deh kita sekarang tinggal melihat hasil dari Cara Membuat Menu Horizontal | Membuat Menu Horizonal Di Blogspot tadi yang teman buat itu, nah jika teman merasa kesulitan silahkan meninggalkan pesan atau komentar dibawah ini, siapa tahu nanti saya bisa membantu menyelesaikan masalah teman teman. 
NB : Sesuaikan lebar menu dengan lebar header blog anda, untuk menyesuaikan misalkan kurang lebar atau sebalikanya silahkan ubah kode yang berwarna biru dan setiap template berbeda beda, jika tidk berjalan di blog teman mungkin template kurang cocok, silahkan mencari tutorial lainnnya yang cocok untuk template teman.