Judul : Cara membuat Navbar dengan animasi music
link : Cara membuat Navbar dengan animasi music
Cara membuat Navbar dengan animasi music
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 :- Login ke blogger
- setelah masuk dasboard pilih Edit HTML
- kemudian gunakan Ctrl + F cari kode ]]></b:skin> lalu letakkan kode css di bawah ini tepat di atas kode ]]></b:skin> berikut kodenya
- Lalu save template
.footermenu{background:#000 url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL-Q5qbxckLJD3Ek8jdqc1YMVLLOHJTmxzTZUZTQs5mMktVHBpv5bXDi896VnajBkLAFflQJvEALnslQTfUN90mTmwuX92TKuMV0tlFPg_8qAB3noVS_HOF5e6r2ucfyDRAWzduSS6ewp5/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 <div class="footermenu"><div style="float:right;text-align:right;color:gold;margin:2px;margin-right:35px">Keterangan : Rubah kode warna biru sesuai judul yang ingin sobat tampil kan
<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>
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
Demikianlah Artikel Cara membuat Navbar dengan animasi music
Sekian Cara membuat Navbar dengan animasi music, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingankali ini.
