Menambahkan dan Memodifikasi Navbar dengan Gambar Animasi

Posted by : Unknown Sunday, January 15, 2012

Memodifikasi Navbar dengan gambar animasi ataupun foto ini sangat menyenangkan sob. Apalagi untuk kita yang suka narsis, haha ^^. Membuat sebuah photo atau gambar animasi yang bertuliskan identitas blog atau identitas blog saya kira pasti jadi sesuatu yang menarik untuk ditampilkan. Untuk membuat ini, kita akan menggunakan permainan hover effects dan opacity effects yang mampu menciptakan transparansi, sehingga sebuah background image mampu tertampilkan di navbar.

Cara Membuat Gambar Animasi dan Gambar Avatar atau Photo di tampilkan di Navbar :

Login to Blogger (Login ke Blogger)

Dasboard (Dasbor) : Setelah masuk dasbor lanjutkan KLIK "Layout (Tata Letak)" kemudian KLIK "Edit HTML"

body{ .....} : Cari Kode syntax body { ... }, yang bentuknya kira kira seperti ini (nggak pasti sama, lho! Hanya sekedar contoh yang kuambil dari template minima bawaan blogger).

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Copy Kode : Copy Kode berikut dan letakkan di atas syntax body{ .... } :

#navbar-iframe{opacity:0.4;-moz-opacity:0.4;filter:alpha(Opacity=40);background:#000 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/anima/GR_fire.gif) center repeat;}
#navbar-iframe:hover{opacity:0;-moz-opacity:0;filter:alpha(Opacity=0);}

Simpan Template : KLIK "Simpan Template (Save Template)"
Jangan lupa untuk selalu melakukan pengamanan template terlebih dahulu sebelum perubahan desain blog dilakukan.
Ganti gambar yang disertakan di kode penampil photo atau animasi di atas dengan gambar milik sampeyan sendiri.
Apabila display navbar sebelumnya telah di sembunyikan, maka harus dibuka kembali.
Sebaiknya menguunakan Browser Opera, karena dapat berfungsi dengan sempurna.