Intertaimen (AR): Cara Memasang Float Navbar di blog

Selasa, 12 Februari 2013

Cara Memasang Float Navbar di blog

"float Navbar adalah ( navbar melayang) maksudnya navbar ini tidak menempel pada element blog, sehingga jika scroll Up/Down, maka navbar ini akan tetap berada di bagian bawah blog anda.
contohnya lihat di bawah blog,lihat cara juga(Cara Membuat navbar Autohide di Blog)
bila agan tertarik membuat float navbar berikut langkah-langkahnya ;

"loggin ke blogger >> Layout >>HTML/Javascript (jangan lupa click "Expand Widget Template")nda cari coke ini: ]]></b:skin> (untuk menghemat waktu guanakan pencarian cepat dengan menekan CTRL=F di keyboard

/* kode untuk navbar
--------------------------------------- */

#navbar-bawah img {
/* margin: 0px 0px -8px 0px; */
vertical-align: middle;
}

#navbar-bawah p.info {
float: right;
padding-right:40px;
line-height: 1.3;
height: 100%;
vertical-align: bottom;
}

#navbar-bawah p {
float: left;
margin: 0px;
padding-top:1px;
padding-left:40px;
line-height: 1.2;
vertical-align: bottom;
}

#navbar-bawah a {
color:#FFFFFF;
text-decoration:none;
}
#navbar-bawah a:hover{
color: #FF8000;
}
#navbar-bawah {
align: center;
position: fixed;
border-top: 1px transparent #ddd;
border-bottom: 1px transparent #FF8000;
background-color:#0B0B0B;
width: 100%;
left: 0px;
text-align: left;
color: #DF7401;
font-family: verdana;
font-size: 12px;
z-index:10000;
bottom:0;
}

nb;
ganti kode warna merah dengan warna yang di inginkan pilih Kode warna

Selanjutnya cari kode: </body> , kemudian anda letakan kode dibawah ini, tepat diatas kode: </body>

<div id='navbar-bawah'>
<p><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbnvr3aVyzZBPsWxPEmwxfsVhaS5khyphenhyphenXagKYT3DbeYCMaOT8u-LZPeur2P7XCtnkT8gI-lC3xPp_rE09rbrDPVRgdpWNGrCACHdsp3G4NQxcRdMXuv4al9PG71pCeJmVho8dUW-Cr2CT5l/s1600/picasion.com_865cb7427999081da0060200a3c92041.gif'/>   

<a href='http://www.blogger.com/profile/04152305721712953170' target='_blank'>Js.Agunggrup</a>
   <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXAdjV9AiRURaPSNtoBfzNjdAopjvgr1wOvqJkM85HjPm_h4IQmgopZ_fsM9oq_fAsFt2EDn7HzIAtPceRlRNcHR92vpCUgHRH33Jz9s1j8VY3jO96qfKBFbWusFrWtlwSvTB6U-SMal3V/s1600/picasion.com_c940f0fb3c42775daff4999d851c8632.gif'/></p>

<p class='info'><a href='ymsgr:sendim?agungaryono'><img border='0' height='16' src='http://opi.yahoo.com/online?u=agungaryono&m=g&t=2' style='padding-top:3px' width='64'/></a> </p>

<p class='info'>TEMUKAN Di <a href='http://www.blogger.com'>Religi</a> |<a href='http://www.blogger.com'>Perilaku</a> |<a href='http://www.blogger.com'>Artikel</a> |<a href='http://www.blogger.com'>Sosial dan Alam</a> |<a href='http://www.blogger.com'>Panduan Wirausaha</a> |<a href='http://www.blogger.com'>Bobol Wifi</a> |<a href='http://www.blogger.com'>Setelan Tempat</a> |<a href='http://www.blogger.com' target='_blank'>Gambar</a> |<a href='http://www.blogger.com'>Musik MP3</a><br/>
<a href='http://www.blogger.com'>DOWNLOAD</a> |<a href='http://www.blogger.com'>DAFTAR PUSTAKA</a> |<a href='http://www.blogger.com'>Cerita dan Kisah</a> |<a href='http://www.blogger.com'>Kultum</a> |<a href='http://www.blogger.com'>HTML blog</a> |</p>
</div>

"Preview" sebelum anda "Save Template".

keterangan:

Ganti URL yang berwarna merah dengan URL logo blog anda.
Ganti URL yang berwarna hijau dengan URL profile anda.
Ganti URL yang berwarna Orange dengan URL foto/avatar anda. lihat gambar ukuran 32x32
Ganti "agungaryono" dengan Yahoo Messanger ID anda.
Ganti tulisan-tulisan yang berwarna biru sesuai dengan blog anda.