Assalmualaikum WR. WB pagi pagi gini dari pada ngangur lebih baik kita berbagi ilmu ya.
oke kali ini aku akan mengajari Bagaimana Cara membuat menubottompic di bawah footer.
menubottompic adalah sebuah menu yang berada di bawah dan dia hanya bersifat horisontal.
screnshoot :
Oke langsung saja ke cara pembuatannya cara cukup simpel saja kok gak butuh waktu lama.
- pertama login blog Anda Sendiri
- Pilh Rancang / Design
- Pilih Edit HTML
- Jika Sudah Carilah Kode ]]></b:skin> jika sudah ketemu letakkan kode dibawah ini tepat diatas kode ]]></b:skin>
/* Menu Horizontal Bottom
---------------------------------------------*/
.menuhisyam {background:#A00000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDxhXeSXwYd2FuGQAptg6DycrrNL32NhL5WZp22Rie9taiympD505HmcZ_cnZ2dslaRFj8bEmoxrp-C-ikx5WMEkRvOU8XMrN8kQaDF3YuWM79xFW78Drgmgtuq0MBMrTdK0c3hxiIIVQ/s1600/bg_menubottom.gif) repeat-x top left;width:100%;margin:0 auto;padding:0 auto;height:42px;}
.menuhisam {width:985px;height:20px;margin:0 auto;padding:10px 0}
.menuhisam ul {margin:0;padding-left:0px;color:#fff;text-transform:none;list-style-type:none;font:normal 11px Arial,sans-serif}
.menuhisam li{display:inline;margin:0}
.menuhisam li a{border-right:1px solid #000;float:left;display:block;text-decoration:none;padding:1px 8px;color:#000;line-height:1.2em}
.menuhisam li a:visited{color:#000}
.menuhisam li a:hover {text-shadow: 0 0 2px #ccc, 0 -5px 4px #ff3, 2px -6px 6px #fd3, -2px -8px 9px #f40, 2px -10px 10px #f10;}
- Jika sudah kemudian kamu cari kode </body> letakkan kode dibawah ini tepat diatas kode </body>
<div class='menuhisyam'>
<div class='menuhisam'>
<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>
- Jika Sudah Lalu simpan dan lihatlah Hasilnya
SEMOGA BERHASIL
