Jumat, 29 Maret 2013

Cara Membuat Menu Registar dan Login diatas Header



http://t0.gstatic.com/images?q=tbn:ANd9GcRe5Mxq3dROdOrc5fgcI-a3tfJ-WBBZev5DK2wMoTlaMIzW-_AH4SO7pvY
Cara Membuat Menu Register dan Login diatas Header - Kali ini saya akan membahas bagaimana Cara Membuat Menu Register dan Login diatas Header. Contohnya, kamu bisa lihat diatas header blog ini, itu yang saya maksud Menu Register dan Login. Menu ini sengaja saya tambahkan dengan berbagai macam kategori, agar tidak hanya menu register dan login saja. Berikut contohnya :


Berikut Cara Membuat Menu Register dan Login diatas Header :

1. Login ke Blogger
2. Masuk ke Template => Edit HTML => Lanjutkan 
3. Centang "Expand Template Widget"
4. Cari kode ]]></b:skin>, lalu letekkan kode berikut tepat diatas kode tadi
/*Top Horisontal*/ .toppic{background:#ffffff;width:1040px;margin:0 auto;border-bottom:1px solid #999;filter:alpha(opacity=70);opacity:0.7;} .topnav{width: 1040px;height:20px;overflow: hidden;margin:0 auto; padding:0px 10px 0px 10px; }
5. Cari kode <header> atau <div id='header-wrapper'>
6. Letakkan kode berikut tepat diatas kode <header> atau <div id='header-wrapper'>


<div class='toppic'>
    <div class='topnav'>
<div style='font: 12px Arial;float:left;padding-top:3px;letter-spacing:.01em;color:#000000;'>
Halo <b>Sobat !</b>  |  Members area  :  <a href='http://www.blogger.com' title='Daftarkan ke Blogger'>Register</a>  |  <a href='http://www.blogger.com' title='Masuk ke Blogger'>Sign in</a>
</div>

<div style='font: 12px Arial;float:right;padding-top:3px;letter-spacing:.01em;color:#000000;'>
<a href='http://tutorial-blogz.blogspot.com/2012/06/daftar-isi.html' title='Daftar isi TutorialBlogz'>Sitemap</a>  |
<a href='http://tutorial-blogz.blogspot.com/2012/06/guest-book-tutorial-blogz.html' title='Buku tamu'><blink>Guest Book</blink></a>  |
<a href='http://tutorial-blogz.blogspot.com/2012/06/contact-us.html' title='Kontak kami'>Contact us</a>  |
<a href='http://tutorial-blogz.blogspot.com/2012/06/privacy-policy.html' title='Kebijakan Privasi'>Privacy Policy</a>
</div>
</div>
</div>

Keterangan:
Ganti yang berwarna merah dengan Nama menunya
Ganti yang berwarna biru dengan URL yang akan dituju

7. Simpan Template.

Semoga bermanfaat ^_^



 
Design by ThemeShift | Bloggerized by Lasantha - Free Blogger Templates | Best Web Hosting