UNIK

Translate

Cara Membuat Menu Horizontal Dekat Footer

Cara Membuat Menu Horizontal Dekat Footer - Biasanya Menu Horizontal letaknya di bawah Header Blog, tapi ini lain sekarang Menu Horizontal bisa di Bawah Footer kaya di Blog Kucoba.com.
Lihat Gambar Di Bawah Ini.



Gambar ini saya ambil sebagai Contoh dari Kucoba.com


Sebelum kita masuk pada tahap Cara Membuatnya, kalian harus tau dulu Cara Membuat Menu Horizontal Dekat Footer ini biasnya sudah ada dari Hasil Download Template saat kita Mendownload Template, tapi setelah saya coba Copy Code nya ke Blog saya ternyata Berhasil tapi kemungkinan Berhasil Di Blog kamu hanay 50%.Dan jika kamu tetap tertarik bagaimana cara membuatnya sekarang Lihat langkah-langkah di bawah ini.

  • Login Ke Blog kamu.
  • Pilih Rancangan lalu Pilih EDIT HTML.
  • Sebelunya kamu Backup dulu Template dengan Cara Download Template Lengkap untuk mencegah hal-hal yang tidak di inginkan.
  • Lalu Cari Kode ]]></b:skin> 
  • Lalu letakan Kode di bawah ini tepat di atas Kode  ]]></b:skin> 
/* Menu Horizontal Bottom
---------------------------------------------*/
.menubottompic {background:#A00000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs98baZtUn8GrMltKUvDmFnEga_4EfTwxC2ovgElGxg8lo_v5QgYg9AkYZ_poAohdl3HthEe90Ev7ECJ-nwNnr8phdpnW1B77HT9aClpObRQTYEPwKEv1XEO815_J-1V025xYkUiFM-JU/s1600/bg_menubottom.gif) repeat-x top left;width:100%;margin:0 auto;padding:0 auto;height:42px;}
.menubottom {width:950px;height:20px;margin:0 auto;padding:14px 0;}
.menubottom ul {margin: 0;padding-left:0px;color:#fff;text-transform:none;
list-style-type: none;font:normal 11px Arial,sans-serif;}
.menubottom li{display: inline; margin: 0;}
.menubottom li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk38_qZXXifwK5V5dwPpLh59_rSSJzD8gEGsXGACtOPi7n9PiLPBaX_BJSAhmGKfTiL0NjuxySSNB9Z7_YL_Zizd-i9qdJddi8J95NbJPYJrVaIkn2W4wGnYgGtnM5Nci9Fd44k3larV8/s1600/bg_spritebottom.gif) no-repeat center right;float: left;display: block;text-decoration:none;
padding:1px 8px;color:#eee;line-height: 1.2em;}
.menubottom li a:visited{color:#eee;}
.menubottom li a:hover {color:#000;text-decoration:none;}

  • Langkah Selanjutnya cari kode </body>  biasanya kode </body> itu terletak bagian Akhir Template
  • Lalu letakan kode dibawah ini tepat di atas kode </body>
<div class='menubottompic'>
<div class='menubottom'>
<ul>
<li><a href='http://blazerracing.blogspot.com'>Home</a></li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Contact Us</a></li>
<li><a href='#'>Support</a></li>
<li><a href='#'>Resource</a></li>
<li><a href='#'>Hot Topics</a></li>
<li><a href='#'>Popular News</a></li>
<li><a href='#'>Social Media</a></li>
<li><a href='#'>Technology</a></li>
<li><a href='#'>Politics</a></li>
</ul>
</div>
<div style='clear:both;'/>
</div>
Keteranagan:

Ganti Kode Yang berwarna Biru Dengan URL Blog Kamu.
Ganti Tanda # Dengan URL tujuan.
Ganti Kode yang berwarna Merah dengan Judul.

Jika sudah selsai Klik dulu Pertinjau Jika berhasil Klik Simpan Template, dan jika tidak berhasil Bersihkan Edit.
Kode ini masih dalam tahap percobaan harap Tinggalkan Pesan Di Kotak Komentar jika ada kesalahan.

SELAMAT MENCOBA

BACA JUGA YANG INI :

Related Posts Plugin for WordPress, Blogger...