| 17 comments ]




Float Navbar adalah navigation bar yang dari namanya sendiri "float" (melayang) jadi navbar ini tidak menempel pada element blog anda, sehingga jika anda scroll Up/Down, maka navbar ini akan tetap berada di bagian bawah blog anda. Ingin tau cara membuatnya?


Saya akan memberikan kepada anda script yang sudah saya edit, yang hasilnya anda bisa lihat sendiri di bagian bawah halaman blog ini.

Ikuti langkah-langkah berikut:

  • Loggin to blogger>Layout>HTML/Javascript (jangan lupa click "Expand Widget Template")
  • Anda cari code ini: ]]></b:skin> (untuk lebih mudahnya: tekan ctrl+F ; kemudian anda copy>paste code tersebut di kotak "find" kemudian tekan enter)
  • Setelah anda menemukan code tersebut, letakan code tersebut diatas code: ]]></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.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;
}



KETERANGAN:

  1. Anda bisa mengganti code warna yang berwarna merah sesuai dengan warna yang anda inginkan (code yang ada di script tersebut, sama persis seperti yang terdapat di blog ini)
  2. Anda bisa melihat code warnanya DISINI


  • Kemudian anda cari code: </body> , kemudian anda letakan code dibawah ini, tepat diatas code: </body>


<div id='navbar-bawah'>
<p><img border='0' src='http://sites.google.com/site/tipspack/background/LINK_EXCHANGE.jpg'/>&#160;&#160;&#160;

<a href='http://www.blogger.com/profile/09605865706748083663' target='_blank'> Authorized by</a>
&#160;&#160;&#160;<img border='0' src='http://sites.google.com/site/tipspack/background/note.jpg'/></p>

<p class='info'><a href='ymsgr:sendIM?xco_only'> <img src='http://opi.yahoo.com/online?u=xco_only&amp;m=g&amp;t=2&amp;2=us' style='width: 148px; height: 30px;'/></a> </p>

<p class='info'>Powered by <a href='http://www.blogger.com'>Tipspack</a> |
<a href='http://www.tipspack.blogspot.com' target='_blank'>http://tipspack.blogspot.com</a><br/>
Copyright © 2009</p>
</div>


  • Silahkan anda "Preview" sebelum anda "Save Template".
Hasil dari script diatas adalah sama seperti yang ada di blog saya, jika anda ingin meng-editnya silahkan anda gunakan kreatifitas anda.

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.
  • Ganti "xco_only" dengan Yahoo Messanger ID anda.
  • Ganti tulisan-tulisan yang berwarna biru sesuai dengan blog anda.
  • Preview terlebih dahulu hasil edit anda sebelum anda save, atau bila perlu Backup Full Template, sehingga jika terjadi kesalahan dalam pengeditan, anda hanya cukup meneg-upload kembali template anda.
Sumber info: http://www.retarixsite.co.cc

17 comments

Panca said... @ May 31, 2009 at 1:12 AM

thanks yah atas tipsnya, salam kenal ajah

Btw, udah ikut kontes belajar SEO untuk para pemula nggak ?

smart business said... @ May 31, 2009 at 6:25 PM

This blog is very fantastic...!

andie said... @ May 31, 2009 at 7:49 PM

keen dah tampilannya sob!!!!
ini kan bagus
ga ribet.
hehehe.
cuma butuh 10 detik bukanya.
jamin deh, lebih sering kesini.
hhehehe :D

Agung said... @ May 31, 2009 at 11:02 PM

mantab terus nih ;)

DonaldPress said... @ June 1, 2009 at 7:44 PM

Bro, Tips anda untuk membuat blog pribadi sangat menolong. Penampilan Blog anda yang baru juga sangat menarik dan luar bisa. Keep up the excellent work!

putra dan kelakuan yg nyeleneh said... @ June 2, 2009 at 11:46 PM

semaken kreatif z nih pakde :)

Nur Layla said... @ June 5, 2009 at 11:29 AM

Pak Eko, emang sip tips-nya. Makanya Lela import karena terpercaya. Seneng akhirnya berhasil punya navbar bottom berkat Mas Eko. Makasih ya..

Wieche Irianto said... @ July 11, 2009 at 11:45 AM

saya coba nih mas....

Nophie said... @ July 14, 2009 at 12:39 PM

kok punya ku ga isa yah,
muncul tulisan gini Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The element type "div" must be terminated by the matching end-tag "
".
kenapa tuh??? butuh pencerahan neh

andie said... @ July 21, 2009 at 10:58 PM

BIAR GENAP 10!!
huahahaha :D

ga ngerti sob.
no comment.
but nice post!

Blog Kesuksesan Hidup said... @ July 29, 2009 at 7:16 PM

Wah, keren banget nih infonya :)

Blog Kesuksesan Hidup said... @ July 29, 2009 at 7:17 PM

Makasih sudah berbagi info yang menarik ini... Tetaplah berbagi :)

Sukses Selalu...

TomieDLuffy said... @ August 1, 2009 at 10:44 AM

sob, sy langsung tancap di blog sy..

tks tips-nya..

Bambang Purwanto said... @ October 27, 2009 at 3:15 PM

Saya lagi pingin menampilkan identitas blog saya menggunakan nav bar seperti yang ada ditutorial ini. Tutorialnya sangat membantu dan jelas. Thanks telah berbagi

marlif said... @ November 28, 2009 at 8:27 PM

bagus ms tutorialnya,tapi saya kok masih bingung yach..........

dniel gituloh said... @ March 17, 2010 at 4:33 PM

lam knl
info bagus maz....perlu di coba......

Dhanang said... @ April 26, 2010 at 11:32 PM

Salam kenal mas..........
Ada navbar yang model lain gak mas???

Post a Comment