Menampilkan Avatar, Gambar Animasi dan Photo di Navbar

Membuat Panduan Blogger, Tutorial Blogger atau Panduan dan Tutorial BlogDETIK yang aneh-aneh memang asyik dan bikin orang penasaran. Ya, mungkin saja sesuatu yang baru membuat banyak sobat blogger tetarik dan jadi penasaran juga. 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 :

1. Login to Blogger (Login ke Blogger)


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


3. 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;
}

4. 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);}

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

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

• 
• 

» Happy Blogging - gubhugreyot «