Cara membuat Navbar dengan animasi music

free search engine submission

B

eberapa waktu yang lalu full blog design pernah posting  tentang cara Cara memindahkan Navbar dari atas ke bawah  nah bagaimana kalau template yang kita gunakan tidak tersedia Navbar  khususnya template template modern saat ini ,sebenarnya keberadaan navbar sangat penting buat kita saat melakukan aktifasi penulisan atau pengeditan artikel ,nah buat sobat yang dah terlanjur menggunakan template modern dan Navbar tidak tersedia ,nich kang mahfid akan kasih solusinya .Navbar yang akan kang Mahfid bagikan ini terletak di bagian footer /bawah ,jadi sobat bisa memodifikasi sendiri nanti ,untuk di sesuaikan dengan lebar template ,untuk melihat contoh navbar  buatan kang mahfid itu sendiri sobat bisa lihat di bagian bawah template ini ,oh ..yach mengenai beban jangan khawatir bentuk animasi musik yang kang mahfid pasang hanya bentuk animasi saja (bukan widget mp3 atau widget radio on line yang membuat beban looding blog berat) nah buat sobat yang ingin tahu  Cara membuat Navbar dengan animasi music ikuti tutorial nya seperti di bawah ini :

1. Login ke blogger
2. setelah masuk dasboard pilih Edit HTML
3. kemudian gunakan Ctrl + F cari kode ]]></b:skin> lalu letakkan kode css di bawah ini tepat di atas kode  ]]></b:skin> berikut kodenya
.footermenu{background:#000 url( http://1.bp.blogspot.com/-Oyqk6AVu4z4/Txau31fk7dI/AAAAAAAAElA/4LnYdGbMyZc/s1600/nav_hover.gif)repeat-x;height:30px;width:960px;border:1px solid#333;position:fixed;bottom:10px;overflow:hidden;}
Keterangan: sesuaikan kode yang berwarna merah dengan lebar template sobat
4. Lalu save template

Selanjut nya masih di dasboard sobat menuju ke tata letak lalu Tambah gadget pilih html javascipt dan masukkan kode di bawah ini dan simpan berikut kode nya :

<div class="footermenu"><div style="float:right;text-align:right;color:gold;margin:2px;margin-right:35px">
  <form action="http://www.google.com/search" method="get">  <input onfocus="this.style.background='#fff';" maxlength="255" value="" type="text"onblur="if(this.value=='')this.style.background='#fff   url(http://tbn1.google.com/images?q=tbn:ntyparymyxvkam:http://www.itenas.ac.id/tpls/home/images/logo_google.gif)  3px center no-repeat'" style="height:18px;border:  solid 1px black; background:#fff  url(http://tbn1.google.com/images?q=tbn:NTYparYmYXvKAM:http://www.itenas.ac.id/tpls/home/images/logo_google.gif)  3px center no-repeat; position:relative;" size="25" name="q"/>  <input id="btn_undefined" style="position:absolute;padding-left:5px;" value="Search" src="http://bloggerplugins.googlepages.com/yahoo-search-widget-button.png" type="image"/><br/>  <div style="margin-top:5px;">  <li style="display:inline;padding-right:10px;margin-top:5px;"> <input checked="checked" value="" name="sitesearch" type="checkbox"/> Web</li>  <li style="display:inline;padding-right:10px;margin-top:5px;"> <input checked="checked" value="http://Nama blog sobat.blogspot.com" name="sitesearch" type="checkbox"/> Blog Anda</li>  </div> </form></div><div style="float:left;margin:0px;margin-left:10px"><img src="http://www.animated-gifs.eu/leisure-music-equalizers/0032.gif"width="35"height="35" /></div><div style="float:left;text-align:center;color:red;margin:5px;margin-left:10px"><b><a href="url tujuan"target="_blank">Dasboard</a></b>  |  <b><a href="Url tujuan"target="_blank">Post Writing</a> </b>
</div><div style="float:center;text-align:center;color:red;"><img src="http://www.animated-gifs.eu/leisure-music-equalizers/0033.gif " width="200" height="25" />
</div>
</div>

Keterangan : Rubah kode warna biru sesuai judul yang ingin sobat tampil kan 
                       Untuk warna Hijau adalah link tujuan jika kode warna biru di klik
                        untuk warna merah  ganti denga alamat blog sobat sendiri

Jika Artikel ini bermanfaat buat sobat semua tolong bantuannya untuk mengklik Terima kasih