Copas 5menit: Menu Navigasi Horizontal O'OM

Menu Navigasi Horizontal O'OM Posting Tutorial Blogspo Kali Ini Ditujukan Untuk Bloggers Ari Ibnu Umar karna ini adalah request artikel dari beliau, yaitu tutorial cara membuat menu navigasi horizontal seperti ( mirip ) blog nya oom dot com atau Menu Navbar O'om yah namanya saya juga kurang paham :V

Baiklah langsung saja ke pembahasan :

Copy Kode Css di bawah ini di atas kode ]] pada template blog sobat :

/*-- (mta bar) --*/ #mta_bar{background:#444 url('http://4.bp.blogspot.com/_C6KkooKXCEw/TIChde9sutI/AAAAAAAAGzk/5DJ4Cbds91E/s200/topnavbar-c.png') repeat-x; border-bottom:1px 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:8px; padding-bottom:6px} * html #mta_bar{position:absolute; /*IE6 hack*/width:expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px":body.clientWidth+"px")} #mta_bar .center{float:left; text-align:center; font-family:Verdana,Arial; font-size:12px; font-weight:normal; font-style:normal; color:#fff; width:55%} #mta_bar .left{float:left; text-align:left; font-family:Verdana,Arial; font-size:12px; font-weight:normal; font-style:normal; color:#fff; width:30%} #mta_bar .right{font-family:verdana,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:#fff; text-decoration:underline} #mta_bar .right a:hover{font-size:10px; color:#fff; text-decoration:none} #left_bar a{background:url('http://1.bp.blogspot.com/_C6KkooKXCEw/TIBf3E-mUfI/AAAAAAAAGwM/EoxAFDlcdr4/s200/feed-c.png') no-repeat; font-weight:bold;text-decoration:none; color:#fff; padding-left:23px; padding-right:0; padding-top:0; padding-bottom:10px} #left_bar a:hover{text-decoration:underline; color:#fff} #left_bar2 a{background: url(http://2.bp.blogspot.com/_C6KkooKXCEw/TICuIqKZqRI/AAAAAAAAG0E/hfkQzQz7h20/s200/check-c.png) no-repeat 2px; text-decoration:none; font-weight:bold; color:#fff; padding-left:21px; padding-right:0; padding-top:0; padding-bottom:0px} #left_bar2 a:hover{text-decoration:underline; color:#fff} #left_bar3 a{background: url(http://3.bp.blogspot.com/_C6KkooKXCEw/TIBf2gtK0UI/AAAAAAAAGwE/Wml7-gPP17U/s200/facebook-c.png) no-repeat 2px; text-decoration:none; color:#fff; padding-left:21px; padding-right:0; padding-top:0; padding-bottom:0} .feed-small-right-feed,.small-right{font-size:11px;float:right;font-weight:700;background:url(http://1.bp.blogspot.com/_C6KkooKXCEw/TIBf3E-mUfI/AAAAAAAAGwM/EoxAFDlcdr4/s200/feed-c.png) right 0 no-repeat;padding-right:20px;padding-bottom:15px}

Lalu Copy Kode ini di bawah kode <body> :

<a href='http://www.facebook.com/mjoko.lukito' rel='nofollow' target='_blank' title='Add me as friend on Facebook'>Facebook</a>

<a href='http://twitter.com/ojel88' rel='nofollow' target='_blank' title='Follow me on Twitter'>Twitter</a>

</span></div>

<a href='http://feeds.feedburner.com/blogtips-tutorial' rel='nofollow' target='_blank' title='Gratis berlangganan artikel Blogspot Tutorial via mail, ayo gabung!'>Gratis berlangganan artikel Blogspot Tutorial via mail, ayo gabung!</a></span><span class='right' onmouseout='self.status=''' onmouseover='self.status='o-om.com.com';return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge9SNNia9S0aMl114dYBm_d9gIbyDMFDFWI8lvGH12VdT0R4D4kZULCGO5HscgMKDbT2ePtsdQZXOkFYJQ1dyAWWd1dDzhAXYWwJUSWdMeyxmIQR4GOcVzAs5JgiilcdCK7zUrjUVO096I/' style='cursor:hand;cursor:pointer;'/></span></div>

Kurang Lebihnya Ntar Yah Sekarang saya mw bobo dulu :D

Saturday, October 8, 2011

Menu Navigasi Horizontal O'OM