© 2014 by Andi Cang. Selamat Datang di Website ANDICANG Anda bebas masuk ke situs ini menggunakan satu gambar dan penjelasan singkat untuk link kembali ke posting apapun. publikasi ulang posting secara utuh dengan mencantumkan link pemilik andicang.blogspot.com
Minggu, 23 Maret 2014

Cara Membuat Menu Horisontal Di Blog

23.54
Blogger dengan template standar tidak menyediakan menu pada halaman home. Anda bisa membuat sendiri dengan menambah beberapa baris kode CSS dan HTML melalui jendela kode template.
Adapun langkah-langkah untuk menambahkan gadget ini adalah sebagai berikut :

1. Pastikan Anda telah login ke halaman Dasbor dan membuka halaman Tata Letak.
2. Setelah itu Anda tambahkan gadget pada posisi yang diinginkan. Caranya Anda klik menu Tambah Gadget yangf ada halaman tata letak.
3. Selanjutnya Anda pilih Gadget HTML/JavaScript.
4. Kemudian Anda ketik atau salin kode berikut ini.

<style>
#mnu { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #24618E; }
#mnu ul { margin:0; padding:10px 10px 0 50px; list-style:none; }
#mnu li { display:inline; margin:0; padding:0; }
#mnu a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBQcGTk4KpGooe7E8jxbUfxZFRB-b2U8KP9n1PpmPY2nL3q1VilBl-Ah_4aCH95glxkPBHGybrP5NOcGkvUUAAWsXgKyMdVYPX4BLtecbG5J0-sNjVqhDsPykFABxCmqGCrKGChNMQ1k4/s1600/tableftJ.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; }
#mnu a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ8PFX6sdYSwRgJDRDuuIpkCe9PGVA4T8AgKn-JPV8XggvtzX5Ga05lz24gGLx1dKPHmdh9S3kgi7Mlp_snzMtOtmogeeRwIuJsT9OVRUhwjca24W7Ei-iawxJerttAuYazZJm1E3kWhU/s1600/tabrightJ.png) no-repeat right top; padding:5px 15px 4px 6px; color:#24618E; }
#mnu a span {float:none;}
#mnu a:hover span { color:#FFF; }
#mnu a:hover { background-position:0% -42px; }
#mnu a:hover span { background-position:100% -42px; }
</style>
<div id="mnu">
<ul>
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
<li><a href="#"><span>Link 7</span></a></li>
</ul>
</div>


5. Maka tampil kode pada jendela gadget seperti gambar dibawah ini. Lalu klik tombol Simpan
6. Apabila proses berhasil, maka secara otomatis akan tercipta gadget baru pada halaman Anda.
7. kemudian pada blog Anda telah bertambah gadget baru yang berfungsi untuk menampilkan Menu Horisontal seperti ini. 

  Catatan :      
  • Ganti baris link 1-7 di antara tag: <span></span> dengan nama yang ingin digunakan, misal: home, video, musik, dan sebagainya.
  • Ganti karakter # dari baris <a href="#"> dengan alamat link dari menu tersebut, misal: http://andicang.blogspot.com, atau http://facebook.com


Terimakasih Anda telah membaca artikel ini, Selamat Mencoba Semoga Berhasil dan Bermanfaat, jika Anda berkenan, tinggalkan komentar Anda untuk Artikel ini. AndiCang...


Label:,

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)
Semoga Bermanfaat. Nikmati koleksi saya dan sering-seringlah berkunjung lagi, saya akan melakukan yang terbaik agar koleksi ini senantiasa selalu menawan buat Anda. Terima kasih atas waktu Anda!

Cari Blog Ini

Entri Populer

Blogger+Followers

Google Follower

Back To Top