Friday, June 05, 2009

MEMBUAT NAVBAR SEPERTI PUNYA BLOGGER

Sobat Semua liat kan tulisan link yang ada paling atas blog ini. Tepat seperti Navbar kepunyaanya blogger.
Kalo Anda ingin membuat navbar mungkin bisa ngikutin langkah saya ini :
Login to Blogger kemudian pilih "Layout"

Klik pada "Edit HTML" , check pada "Expand Widget Templates"


Copy kode berikut tepat sebelum kode ]]></b:skin>

#mta_bar{
background:#444 url('http://4.bp.blogspot.com/_C6KkooKXCEw/SQnz2n2y02I/AAAAAAAACiU/hgebwIqZY9c/s400/wow.gif') repeat-x; border-bottom:2px solid #111; z-index:100; top:0; left:0; width:100%; overflow:auto; position:fixed; margin-left:0; margin-right:0; margin-top:0; margin-bottom:4px; padding-left:0; padding-right:0; padding-top:7px; padding-bottom:4px}

html #mta_bar{ /*IE6 hack*/
position: absolute; width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px"); }

#mta_bar .left { float: left; text-align: center; font-family: Arial; font-size: 13px; font-weight: bold; font-style: normal; color: #0000FF; width:92%;}

#mta_bar .right {font-family: Arial, Helvetica, sans-serif; float: right; text-align: center; font-weight: normal; font-size: 10px;letter-spacing: 0; width: 30px; white-space: nowrap;}

#mta_bar .right a {font-size: 10px; color: #0000FF; text-decoration: underline;}

#mta_bar .right a:hover {font-size: 10px; color: #0000FF; text-decoration: none;}

#left_bar a { text-decoration: none; color: #ffffff; }

#left_bar a:hover { text-decoration: underline; color: #0000FF; }


Selajutnya copy kode ini tepat di atas kode </head>

<script src='http://ubuh85.googlepages.com/nav-mod.js' type='text/javascript'/>


Langkah terakhir untuk membuat navbar copy kan lagi kode berikut tepat di bawah kode <body>

<div id='mta_bar'>

<div id='left_bar'><span class='left'> <center>
------- Teks yang Ingin sobat tampilkan ------ </center> </span></div>

<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;kulpang.blogpost.com&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsQzmvTfb2HmFcGgsNJLatkT9dO4SxbiSYjTr6Ms9rLFd9qDVp6ZHp2i3ADzSDgu8-HZM6ozb4iuBM-JoqrykleadOGUwJiY80drFkVjt_d4RYo202FIG3T1Q0S5TV2EvonfDG_HY9/s400/close.gif' style='cursor:hand;cursor:pointer;'/></span></div>


Kemudian simpan..

untuk teks seperti yang diatas saya mengunakan kode MARQUEE

Salam buat blogger semua.


Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

5 komentar: on "MEMBUAT NAVBAR SEPERTI PUNYA BLOGGER"

DiLoG said...

wah2...gitu tog caranya
Qu baru tau...
wajib diprakterkan nih

aprie said...

weh sip ni tutornya.
thanks..

wanda said...

Yang kayak gimana dunk??kasih contoh donk biar jelas dan gak bingungin gitu...
Your Friend:Myokezone

mareas nami sipayung said...

waaaaaaaaaah..langsung di cona gan!!

mareas nami sipayung said...

coba* maaaf double haha

Post a Comment

Sobat-sobat semua sudah punya rekening virtual gak buat transaksi di internet. Kalo belum daftar di PAYPAL, Klik aja Icon dibawah Ini

Sign up for PayPal and start accepting credit card payments instantly.