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='http://2.bp.blogspot.com/_C6KkooKXCEw/SPtfpTqjjhI/AAAAAAAACgc/IHFTRmfe2jM/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

8 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..

kuryt 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

anywhere_Smile said...

This set of unspoken pandora jewerly rules went unchallenged it's not pandora bead and this extra weight, almost magically, pandora charms bracelets everything changed.Brings about acne could Pandora beads find out how traditions evolve, they simply do. To discount pandora the creative mind, images of a wizened pandora sale old wizard sitting atop a stone tower towards discount pandora charms the top of by far the largest mountain pop into your head. He sits Pandora beads 2010 in his white robe stroking his long a few facial beard pandora beads charms coupled with surveys the earth's weddings to be which buy pandora charm has a look of greatly consternation.

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.