Blog Tutorial

Tutorial Blog, Cheat Games, Tutorial Ponsel, Tutorial Komputer, Tutorial Browser

Selasa, 19 Januari 2010

Memasang Navbar Footer

Kategori :
Navbar Footer adalah tema kali ini, maksud dari tema di atas itu sama dengan Navbar yang di berikan blogger namun perbedaannya adalah penempatan, kalau navbar dari blogger posisinya tepat di atas sedangkan Navbar footer ini posisinya melayang seperti Float Image.

Dalam pemasangan Navbar Footer sangat mudah dan sangat simple, hanya memindahkan kode-kode yang nanti saya akan berikan dan sobat bisa memodifikasinya sesuai kreatifitas sobat sendiri.

Nah sekarang waktunya Memasang Navbar Footer, ikuti y langkah-langkah di bawah ini :
  1. Seperti biasa sobat harus login ke blogger dengan Id dan password sobat sendiri
  2. langsung saja kita menuju Tata letak ==>> Edit HTML
  3. Setelah masuk ke Edit HTML Backup terlebih dahulu template sobat agar tidak terjadi hal yang tidak di inginkan, setelah itu sobat cari kode ]]></b:skin> lalu taruh kode CSS di bawah ini tepat di atasnya


    #navbar-footer p.info {
    float: right;
    padding-right:40px;
    line-height: 1.2;
    height: 100%;
    vertical-align: bottom;
    }

    #navbar-footer p {
    float: left;
    margin: 0px;
    padding-top:4px;
    padding-left:40px;
    vertical-align: bottom;
    line-height: 1.2;
    }

    #navbar-footer a {
    color: #333;
    }

    #navbar-footer {
    align: center;
    position: fixed;
    border-top: 1px solid #262626;
    background-color: #0068CF;
    width: 100%;
    left: 0px;
    text-align: left;
    color: #fff;
    font-family: Arial;
    font-size: 12px;
    z-index:10000;
    opacity: 0.9;
    filter: alpha(opacity: 90);
    bottom:0;}

    #navbar-footer{opacity:0.0;filter:alpha(Opacity=0)}
    #navbar-footer:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

    Pemberitahuan :
    • Diatas adalah Navbar Footer Auto hide, apabila sobat tidak ingin menjadi auto hide, sobat harus menghapus kode yang berwarna merah di atas

  4. Setelah itu cari tag </body> dan letakkan kode di bawah ini tepat di bawahnya


    <div id="navbar-footer">
    <p>
    <img border="0" src="http://sites.google.com/site/oketrik/oketrik/take%28040%29.jpg?attredirects=0" width="30px" height="30"/><a href="http://oketrik.blogspot.com/index.html">oketrik Blog</a>10 Desember 2009</p>
    <p class="info">Powered by <a href="http://www.blogger.com">Blogger</a> | Kreasi by <a href="http://www.oketrik.blogspot.com" target="_blank">Oketrik</a><br/>Kumpulan Trik lengkap dan Informasi seputar dunia blog
    <br/>
    </p>
    </div>


    Pemberitahuan :
    • kode yang berwarna hijau bisa sobat ganti dengan keinginan sobat sendiri

  5. Setelah selesai sekarang sobat bisa menympan dan lihat hasilnya
Mudah bukan Memasang Navbar Footer?? pastinya mudah :D, apabila sobat tahu sedikit saja tentang kode-kode di atas mungkin sobat bisa memodifikasinya dengan menambah hal-hal yang lebih menarik untuk di lihat.


Untuk Contoh dari trik diatas sobat bisa lihat di sini. Nah ada sedikit info lagi kalau sobat ingin Navbar ini terlihat transparent sobat tinggal tambahkan saja kode ini

#navbar-footer { opacity:0.2; filter:alpha(Opacity=0); }
#navbar-footer:hover { opacity:0.5; filter:alpha(Opacity=100, FinishedOpacity=50); }
di bawah kode bottom:0; }
Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg

23 Komentar untuk Memasang Navbar Footer

trik bgs lg, izin memakainya y mas

keren gan infonya.. numpang nitip link ya http://www.thenoock.com/2010/01/astagacom-lifestyle-on-net.html

oke mas makasih triknya?
dikasih contoh screenshotny pasti mantep mas

mantap sob infonya, thank ya. kunjung balik ya,mencoba cbox baru ditempat saya.:D

@ALL ==>> terima kasih semuanya...

halo ..
ada award nie, diambil ya..

http://dhie-yan.blogspot.com/2010/01/award-lagi.html

kan di tulisan UPDATE sudah saya kasih tau sob...

siap kita pasang segera... thanks.. jgn lupa komentar baliknya di tunggu

keren sekali nih... baru pertama kali baca posting kayak gini.. thanks ya

Wa... manteb manteb....

entar aku coba ahhh....

mantab bos .... informasi yang bermanfaat ...

Keren ini yang saya Cari tapi Bikin lama Load nggak ya??

Bagus neh ... pasang deh !!

http://komputer-fix.blogspot.com

Sip infonya kang :D

sangat menarik ulasannya bro dan salam kenal dari mico, dan juga kalau ada teman2 yg suka download film box office gratis silakan kunjungi situsnya gue ok, makasi untuk adminnya juga. thanks