CaRa MemBuaT NavBaR SenDiRi

Apa Itu Navbar ????? Agar Tidak Bingung,Coba Alihkan Pandangan
Kalian Di Bagian Kiri Atas    Posting Ini  
 Di SanaTerlihat   Gambar Yang  Memiliki   Navbar Yang  Melayang Kalau Anda  Tidak  
Terlihat    Navbarnya    Bisa     Anda    
 Klick Saja Gambar     Tersebut       Dan  
 Nanti     Gambarnya  
Akan    MenJadi    Besar ,     Nah     Seperti  
Itulah Navbar Yang Saya Maksud.

Untuk       Membuat       Gambar        Seperti         Itu   ,         Ada Beberapa         Langkah²
Yang      Harus         Sobat          Lakukan  ,     Di         Antaranya : 

1. Jika    sobat      menginginkan      dalam     navbar      tersebut      terpampang       foto    atau    logo       ataupun        tanda        tangan       seperti     milik       SAYA ,    maka      buatlah    terlebih       dahulu     foto / logo      atau      gambar      berbentuk      tanda     tangan,     tapi tentunya     dalam     ukuran     yang     kecil. Contoh seperti gambar berikut ini :

Atau gambar tanda tangan seperti ini : 
 


2. Jika   foto / logo atau gambar tanda tangan sudah selesai di buat, maka langkah selanjut adalah meng upload foto tersebut ke hosting untuk menyimpan gambar, bisa ke blogger ataupun hosting lain. setelah di upload, catatlah alamat gambar tersebut untuk keperluan   nanti di simpan di dalam navbar. Contoh alamat foto dan tanda tangan di atas seperti ini :

Gambar :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUEE9L863e6JpwiCZEoA9XP1p8HkhbiRnqiefwblNvuZ74ipUAlS_aP5TSpUxSaBhBvCL05RDWc0qG70Psd-NJET8Gar3ecqUGmfqu1YDm0TTWi6hQBW3NLyVfGeyinkR9ZXhN0TiEHB4/s1600/kucing3.gif
Tanda Tangan :
http://amen24.googlepages.com/TandaTangan_03.gif 


3. Langkah selanjutnya adalah memasukan kode CSS untuk navbar yang di buat, contoh kodenya seperti ini :
/* 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.5; height: 100%; vertical-align: bottom; }
#navbar-bawah p { float: left; margin: 0px; padding-top:4px; padding-left:40px; line-height: 1.2; vertical-align: bottom; }
#navbar-bawah a { color:#00CCFF; text-decoration:none; } #navbar-bawah a:hover{ color: #00FFFF; } #navbar-bawah { align: center; position: fixed; border-top: 1px solid #ddd; border-bottom: 5px solid #003366; background-color: #114477; width: 100%; left: 0px; text-align: left; color: #ffffff; font-family: verdana; font-size: 12px; z-index:10000; bottom:0;
}


4. Langkah berikutnya adalah memasukan kode navbar pada body template, contoh kodenya seperti ini :



<br/><br/>
<div id="navbar-bawah">
<p><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUEE9L863e6JpwiCZEoA9XP1p8HkhbiRnqiefwblNvuZ74ipUAlS_aP5TSpUxSaBhBvCL05RDWc0qG70Psd-NJET8Gar3ecqUGmfqu1YDm0TTWi6hQBW3NLyVfGeyinkR9ZXhN0TiEHB4/s1600/kucing3.gif"/> &#160;&#160;&#160;
<a href="http://dewa-pro.blogspot.com"><b>Blog Dyosa</b>
</a>&#160;&#160;&#169;&#160;2007&#160;| 
Design by <a href="http://link-top.blogspot.com" target="_blank">Blog Jail</a>
&#160;&#160;&#160;<img border="0" src="http://amen24.googlepages.com/TandaTangan_03.gif"/></p>
<p class="info">Powered by <a href="http://www.blogger.com" >Blogger</a>| thanks to <a href="http://www.feedburner.com"  target="_blank">Feed burner</a><br/>
Best viewed in Firefox 1.5+ at 1024x768 or higher resolution</p>
</div>

Tadinya saya mau menerangkan tentang kode CSS yang saya pasang di atas, akan tetapi rasanya saya agak kurang enak badan jadi pinginnya singkat saja. sebagai catatan, kode yang saya cetak merah berarti harus di ganti dengan link atau tulisan yang sobat miliki. 

Untuk cara pemasangan kode di atas, silahkan ikuti langkah berikut ini : 

Untuk Template Klasik 

1. Sign in di blogger



2. Klik menu Template



3. Klik menu Edit HTML



4. Copy seluruh kode template sobat, paste di notepad kemudian save di komputer sobat sebagai backup data



5. Copy paste kode berikut ! simpan antara kode <style type="text/css"> dan kode </style>.
   atau jika bingung, simpan saja persis di atas kode </style>
/* 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.5; height: 100%; vertical-align: bottom; }
#navbar-bawah p { float: left; margin: 0px; padding-top:4px; padding-left:40px; line-height: 1.2; vertical-align: bottom; }
#navbar-bawah a { color:#00CCFF; text-decoration:none; } #navbar-bawah a:hover{ color: #00FFFF; } #navbar-bawah { align: center; position: fixed; border-top: 1px solid #ddd; border-bottom: 5px solid #003366; background-color: #114477; width: 100%; left: 0px; text-align: left; color: #ffffff; font-family: verdana; font-size: 12px; z-index:10000; bottom:0;
}





6. Copy paste kode berikut persis di atas kode </body> (ganti yang tercetak merah dengan milik sobat) :



<br/><br/>
<div id="navbar-bawah">
<p><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUEE9L863e6JpwiCZEoA9XP1p8HkhbiRnqiefwblNvuZ74ipUAlS_aP5TSpUxSaBhBvCL05RDWc0qG70Psd-NJET8Gar3ecqUGmfqu1YDm0TTWi6hQBW3NLyVfGeyinkR9ZXhN0TiEHB4/s1600/kucing3.gif"/> &#160;&#160;&#160;
<a href="http://dewa-pro.blogspot.com"><b>Blog Dyosa</b>
</a>&#160;&#160;&#169;&#160;2007&#160;| 
Design by <a href="http://link-top.blogspot.com" target="_blank">Blog Jail</a>
&#160;&#160;&#160;<img border="0" src="http://amen24.googlepages.com/TandaTangan_03.gif"/></p>
<p class="info">Powered by <a href="http://www.blogger.com" >Blogger</a> | 
thanks to <a href="http://www.feedburner.com" target=" _blank">Feed burner</a><br/>
Best viewed in Firefox 1.5+ at 1024x768 or higher resolution</p>
</div>



7. Klik tombol Simpan Perubahan Template



8. Selesai.

Untuk Template baru (New Blogger Template)

1. Sign in di blogger



2. Klik menu Layout



3. Klik menu Edit HTML



4. Klik tulisan Download Full Template, lalu save data tersebut. Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template



5. Copy paste kode berikut ! simpan di atas kode ]]></b:skin>
/* 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.5; height: 100%; vertical-align: bottom; }
#navbar-bawah p { float: left; margin: 0px; padding-top:4px; padding-left:40px; line-height: 1.2; vertical-align: bottom; }
#navbar-bawah a { color:#00CCFF; text-decoration:none; } #navbar-bawah a:hover{ color: #00FFFF; } #navbar-bawah { align: center; position: fixed; border-top: 1px solid #ddd; border-bottom: 5px solid #003366; background-color: #114477; width: 100%; left: 0px; text-align: left; color: #ffffff; font-family: verdana; font-size: 12px; z-index:10000; bottom:0;


6. Copy paste kode berikut persis di atas kode </body>
   (ganti yang tercetak merah dengan milik sobat) :



<br/><br/>
<div id="navbar-bawah">
<p><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUEE9L863e6JpwiCZEoA9XP1p8HkhbiRnqiefwblNvuZ74ipUAlS_aP5TSpUxSaBhBvCL05RDWc0qG70Psd-NJET8Gar3ecqUGmfqu1YDm0TTWi6hQBW3NLyVfGeyinkR9ZXhN0TiEHB4/s1600/kucing3.gif"/> &#160;&#160;&#160;
<a href="http://dewa-pro.blogspot.com"><b>Blog Dyosa</b>
</a>&#160;&#160;&#169;&#160;2007&#160;| 
Design by <a href="http://link-top.blogspot.com" target="_blank">Blog Jail</a>
&#160;&#160;&#160;<img border="0" src="http://amen24.googlepages.com/TandaTangan_03.gif"/></p>
<p class="info">Powered by <a href="http://www.blogger.com" >Blogger</a> | 
thanks to <a href="http://www.feedburner.com" target=" _blank">Feed burner</a><br/>
Best viewed in Firefox 1.5+ at 1024x768 or higher resolution</p>
</div>



7. Klik tombol Simpan Template



8. Selesai.

• 
• 
• 
• 
• 
• 
•