Hanya arsip

halaman asli ada di http://kolom-tutorial.blogspot.com

Membuat Navbar

Setelah beberapa hari tidak ada tulisan baru di blog ini, akhirnya saya tulis juga tutorial baru. Kali ini saya akan memenuhi hasrat sobat muhhib yang pantang menyerah, jika di hitung mungkin sudah tiga kali lebih beliau menanyakan tentang hal ini yaitu cara membuat navbar yang berada di bagian footer seperti yang ada pada blognya mas anang.

Ada kemungkinan bahwa navbar yang saya buat ini agak berbeda dengan miliknya mas anang, maklum lah lain orang lain ilmu, walaupun sebenarnya ilmu ini saya pelajari dari templatenya mas anang sendiri. Apa itu navbar? agar tidak bingung, coba alihkan pandangan sobat ke bagian paling atas blog ini ! di sana terlihat satu frame miliknya blogger untuk memudahkan kita sigin di blogger, nah seperti itulah navbar yang saya maksud.

Untuk membuat gambar seperti itu, ada beberapa langkah yang harus sobat lakukan, di antaranya :

  1. Jika sobat menginginkan dalam navbar tersebut terpampang foto atau logo ataupun tanda tangan seperti miliknya mas anang, maka buatlah terlebih dahulu foto/logo atau gambar berbentuk tanda tangan, tapi tentunya dalam ukuran yang kecil. Contoh seperti gambar berikut ini :
  2. atau gambar tanda tangan seperti ini (tanda tangan saya agak mirip dengan yang punya mas anang) :

  3. jika foto/logo atau gambar tanda tangan sudah selesai di buat, maka langkah selanjut adalah meng upload foto tersebut ke hosting untuk menyimpan gambar, bisa ke blogger ataupun hosting lain. setelah di upload, catatlah alamat gambar tersebut untuk keperluan nanti di simpan di dalam navbar. Contoh alamat foto dan tanda tangan di atas seperti ini :
  4. http://favatar.myfavatar.com/amen24.png

    http://amen24.googlepages.com/TandaTangan_03.gif

  5. Langkah selanjutnya adalah memasukan kode CSS untuk navbar yang di buat, contoh kodenya seperti ini :
  6. /* kode untuk navbar
    ————————————— */

    #navbar-bawah img {
    /* margin: 0px 0px -8px 0px; */
    vertical-align: middle;
    }

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

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

    #navbar-bawah a {
    color:#00CCFF;
    text-decoration:none;
    }
    #navbar-bawah a:hover{
    color: #00FFFF;
    }
    #navbar-bawah {
    align: center;
    position: fixed;
    border-top: 1px solid #ddd;
    border-bottom: 5px solid #003366;
    background-color: #114477;
    width: 100%;
    left: 0px;
    text-align: left;
    color: #ffffff;
    font-family: verdana;
    font-size: 12px;
    z-index:10000;
    bottom:0;

  7. Langkah berikutnya adalah memasukan kode navbar pada body template, contoh kodenya seperti ini :

  8. <br/><br/>
    <div id="navbar-bawah">
    <p><img border="0" src="http://favatar.myfavatar.com/amen24.png"/>   
    <a href="http://template-unik.blogspot.com"><b>Template Unik</b>
    </a>  © 2007 |
    Design by <a href="http://kolom-tutorial.blogspot.com" target="_blank">Rohman Abdul Manap</a>
       <img border="0" src="http://amen24.googlepages.com/TandaTangan_03.gif"/></p>
    <p class="info">Powered by <a href="http://www.blogger.com">Blogger</a&gt; |
    thanks to <a href="http://www.feedburner.com&quot; target="_blank">Feed burner</a><br/>
    Best viewed in Firefox 1.5+ at 1024x768 or higher resolution</p>
    </div>

Tadinya saya mau menerangkan tentang kode CSS yang saya pasang di atas, akan tetapi rasanya saya agak kurang enak badan jadi pinginnya singkat saja. sebagai catatan, kode yang saya cetak merah berarti harus di ganti dengan link atau tulisan yang sobat miliki.

Untuk cara pemasangan kode di atas, silahkan ikuti langkah berikut ini :

Untuk Template Klasik

  1. Sign in di blogger
  2. Klik menu Template
  3. Klik menu Edit HTML
  4. Copy seluruh kode template sobat, paste di notepad kemudian save di komputer sobat sebagai backup data
  5. Copy paste kode berikut ! simpan antara kode <style type=”text/css”> dan kode </style>.
    atau jika bingung, simpan saja persis di atas kode </style>
  6. /* kode untuk navbar
    ————————————— */

    #navbar-bawah img {
    /* margin: 0px 0px -8px 0px; */
    vertical-align: middle;
    }

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

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

    #navbar-bawah a {
    color:#00CCFF;
    text-decoration:none;
    }
    #navbar-bawah a:hover{
    color: #00FFFF;
    }
    #navbar-bawah {
    align: center;
    position: fixed;
    border-top: 1px solid #ddd;
    border-bottom: 5px solid #003366;
    background-color: #114477;
    width: 100%;
    left: 0px;
    text-align: left;
    color: #ffffff;
    font-family: verdana;
    font-size: 12px;
    z-index:10000;
    bottom:0;

  7. Copy paste kode berikut persis di atas kode </body> (ganti yang tercetak merah dengan milik sobat) :

  8. <br/><br/>
    <div id="navbar-bawah">
    <p><img border="0" src="http://favatar.myfavatar.com/amen24.png"/>   
    <a href="http://template-unik.blogspot.com"><b>Template Unik</b>
    </a>  © 2007 |
    Design by <a href="http://kolom-tutorial.blogspot.com" target="_blank">Rohman Abdul Manap</a>
       <img border="0" src="http://amen24.googlepages.com/TandaTangan_03.gif"/></p>
    <p class="info">Powered by <a href="http://www.blogger.com">Blogger</a&gt; |
    thanks to <a href="http://www.feedburner.com&quot; target="_blank">Feed burner</a><br/>
    Best viewed in Firefox 1.5+ at 1024x768 or higher resolution</p>
    </div>
  9. Klik tombol Simpan Perubahan Template
  10. Selesai.

Untuk Template baru (new blogger template)

  1. Sign in di blogger
  2. Klik menu layout
  3. Klik menu Edit HTML
  4. Klik tulisan Download Full Template, lalu save data tersebut. Ini untuk berjaga-jaga apabila terjadi kesalahan dalam mengedit kode template
  5. Copy paste kode berikut ! simpan di atas kode ]]></b:skin>
  6. /* kode untuk navbar
    ————————————— */

    #navbar-bawah img {
    /* margin: 0px 0px -8px 0px; */
    vertical-align: middle;
    }

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

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

    #navbar-bawah a {
    color:#00CCFF;
    text-decoration:none;
    }
    #navbar-bawah a:hover{
    color: #00FFFF;
    }
    #navbar-bawah {
    align: center;
    position: fixed;
    border-top: 1px solid #ddd;
    border-bottom: 5px solid #003366;
    background-color: #114477;
    width: 100%;
    left: 0px;
    text-align: left;
    color: #ffffff;
    font-family: verdana;
    font-size: 12px;
    z-index:10000;
    bottom:0;

  7. Copy paste kode berikut persis di atas kode </body> (ganti yang tercetak merah dengan milik sobat) :

  8. <br/><br/>
    <div id="navbar-bawah">
    <p><img border="0" src="http://favatar.myfavatar.com/amen24.png"/>   
    <a href="http://template-unik.blogspot.com"><b>Template Unik</b>
    </a>  © 2007 |
    Design by <a href="http://kolom-tutorial.blogspot.com" target="_blank">Rohman Abdul Manap</a>
       <img border="0" src="http://amen24.googlepages.com/TandaTangan_03.gif"/></p>
    <p class="info">Powered by <a href="http://www.blogger.com">Blogger</a&gt; |
    thanks to <a href="http://www.feedburner.com&quot; target="_blank">Feed burner</a><br/>
    Best viewed in Firefox 1.5+ at 1024x768 or higher resolution</p>
    </div>
  9. Klik tombol Simpan Template
  10. Selesai.

Itu tadi langkah-langkah yang di lakukan untuk membuat navbar, untuk melihat contoh dari hasil pemasangan kode di atas, sobat bisa mengunjungi blog saya yang satunya yaitu di http://template unik.blogspot.com. Arahkan scroll bar ke bagian paling bawah blog, maka nanti sobat bisa melihat navbar yang mirip punya blogger. Agar lebih cepat melihat contoh hasilnya silahkan sobat klik di sini !

Selamat mencoba !

10 Agustus 2007 - Posted by | aksesori blog, blog tutorial, membuat navbar

32 Komentar »

  1. Ini saya Anang

    usul saja… di contoh blognya namanya Rahman saja ga usah nama belakang biar ga nabrak gitu.. Hehe.. OK?

    sip…

    Komentar oleh Anang | 10 Agustus 2007 | Balas

  2. waduh yang punya datang, hehehe… thnks ya mas atas kunjungannya. boleh juga tuh usulanya.

    Komentar oleh rohman | 10 Agustus 2007 | Balas

  3. mas terimakasih banyak telah menjawab pertanyaan saya tentang navbar, sudah saya coba dan sudah berhasil, oya mas jika mau buat 2 buah gimana caranya, saya mau buat diatas satu lagi, lalu klu di samping bisangak seperti iklan detik.com

    terimakasih

    Komentar oleh muhibb | 10 Agustus 2007 | Balas

  4. dapat ilmu lagii🙂

    Komentar oleh Ati | 10 Agustus 2007 | Balas

  5. to muhhib : kalo ingin dibagian atas blog, tinggal pasang lagi kode nya persis di bawah kode <body>, tapi jangan lupa menghapus kode <br/><br/>
    agar tidak ada bagian yg kosong di sebelah atasnya

    Komentar oleh rohman | 13 Agustus 2007 | Balas

  6. wedew…Ilmu Baru euy……ck..ck.. Thxs bgt neh Ommm….huehuue….

    Komentar oleh liriklagumusic | 16 Agustus 2007 | Balas

  7. klo mau ganti warna background navbarnya gimana ya mas??

    Komentar oleh guest_newbie | 20 Oktober 2007 | Balas

  8. Saya coba……

    Komentar oleh Nanang | 25 Oktober 2007 | Balas

  9. Mas…
    Mau tanya
    berapa ukuran yang di bolehkan untuk gambar di navgar..
    n bagusnya bitmap/jpeg.
    thanks

    Komentar oleh NURSYAFRIADY | 30 Oktober 2007 | Balas

  10. saluuut!!

    Komentar oleh andre|scriptzone | 25 November 2007 | Balas

  11. pas navbar saya pasang, ancur semua kang blog saya..!

    Komentar oleh Cemol | 16 Desember 2007 | Balas

  12. @cemol : trik ini sudah banyak yang mempraktekan dan tidak ada masalah. Jika mengalami kegagalan, upload lagi backup template nya. Nanti akan kembali seperti semula.

    Komentar oleh rohman | 16 Desember 2007 | Balas

  13. Aq dapat ilmu baru lagi.. Hatur Nuhun Kang Rohman..

    Komentar oleh Site's Isla'Nd | 30 Desember 2007 | Balas

  14. Aq dapat ilmu baru lagi.. Hatur Nuhun Kang Rohman..

    Komentar oleh Site's Isla'Nd | 30 Desember 2007 | Balas

  15. Mas klo backgroundnya dibuat transparant ditambah script apa lagi? kayak punyanya mas anang itu lo

    Komentar oleh Hammam | 28 Januari 2008 | Balas

  16. bang rohman, tolong dong kasih tau caranya bikin navbar yang ada di dalem header seperti punyanya : http://cdscompletosdownload.blogspot.com/
    pliss dong ah…
    saya pengen banget punya yang seperti itu…

    thanx sebelomnya

    Komentar oleh angga | 3 Februari 2008 | Balas

  17. Salam kenal,
    Posting-nya sangat menarik untuk dipelajari.
    Terima kasih untuk ilmunya.
    Keep Spirit….
    Regards,

    Komentar oleh rio | 24 Maret 2008 | Balas

  18. hai… kang rohman, salam kenal. aku anak baru di blogspot. kang aku mau nanya kalo buat gambar diatas yang tulisannya kaya gini
    BLOG KANG ROHMAN BLOGGING TUTORIAL IN ENGLISH….. tu caranya gimana kang pa itu yang namanya banner??? trus cara buatnya gimana??(maksudnya buat gambarnya) blogku di ardanngeblog.blogspot.com tolong ya kang aku lagi semangat-semangatnya ngeblog di blogspot kalo bisa kirimke email aku di anaksekolah@gmail.com tapi kalo nggak ya ga papa bales di komen aja. thank…. oya kang tutorial kang rohman yang buat readmore berhasil sekali lagi thanks and don’t forget to reply okey

    Komentar oleh ardan | 30 Maret 2008 | Balas

  19. Salam kenal kembali. yang di header namanya ya banner. saya buatnya pake software photoshop. kalo mau pake software lain juga tidak apa-apa, yang penting berbentuk banner/gambar.

    Komentar oleh Rohman | 31 Maret 2008 | Balas

  20. mohon bantuan kang rohman.
    navbar di blog saya dengan alamat acmilan-magz.blogspot.com hilang navbarnya. padahal saya tidak pernah mengutak-utik navbar tersebut.
    sekali lagi saya mohon bantuannya.
    tolong diperiksa Kang,…
    Akang yang paling ahli.

    kalo akang tidak sibuk, bisa jawab ke email sayasatria@yahoo.co.id saya sangat bersyukur…
    butuh pisan bantosan Akang, abi rada nge-blank masalah ulak-ulik nu kitu kang…

    hatur nuhun sateuacanna…

    Komentar oleh satria | 28 April 2008 | Balas

  21. navbarnya saya lihat masih ada ko… yg ilang apanya?

    Komentar oleh Rohman | 28 April 2008 | Balas

  22. kang rohman setelah aku praktekin tuh ilmu, alhamd berhasil tapi kok fotonya ga muncul. aku search fotonya yang ada di blog, kaya punya mas anang…
    oh ya perlu ditambahin kode apa lagi biar navbarnya selalu muncul ketika scroll dikeatasin..

    haturnuwun kang…

    Komentar oleh sabar | 17 Mei 2008 | Balas

  23. Alhamdulillah! ma kasih ya Kang! ni dapat ilmu lagi,tinggal mraktekkan bisa apa gak ya? habiis aku masih belajaran tapi ni lagi semangat-semangatnya ngeblog!entar kalo gak jadi bantuin lagi ya kang!

    Komentar oleh kang Anwar | 12 Juli 2008 | Balas

  24. mas kalo backgroundnya dibuat transparant gimana ya???

    Komentar oleh andrian | 31 Juli 2008 | Balas

  25. Kang, setelah saya coba mengedit templet untuk membuat navbar seperti petunjuk pada postingan di blog ini, tapi hasilnya tidak sama. Navbar atasnya tidak muncul logo (lambang imabasurabaya) yang telah saya pasang. kalau ada waktu dan Ka2ng berkenan, kami mohon untuk memberikan petunjuk (pengalaman). Sebelumnya, kami ucapkan terima kasih …

    Komentar oleh Imaba Surabaya | 6 Agustus 2008 | Balas

  26. Mas
    kalo seperti punya dedekurniadi.web.id gmana ya scriptnya ..
    tolong dunk bantuannya

    Komentar oleh Rau | 9 Agustus 2008 | Balas

  27. Mas, gimana bikin navigation bar kayak bagian atas blog ini? Yang ada tulisan “Home, Catatan Ku, Free Template,…”? Atau bisa kirim ke mahespati@gmail.com

    Mohon penjelasannya, maklum newbie…

    Komentar oleh Mahespati | 25 Agustus 2008 | Balas

  28. Mas, gimana bikin navigation bar kayak bagian atas blog ini? Yang ada tulisan “Home, Catatan Ku, Free Template,…”?
    Bisa juga jawabannya dikirim ke mahespati@gmail.com

    Mohon penjelasannya, maklum newbie…

    Komentar oleh Mahespati | 25 Agustus 2008 | Balas

  29. kang CSS diatas kok gak ditutup yah

    Komentar oleh Anasku | 5 September 2008 | Balas

  30. Hiks. baru nyadar. thanks atas info nya.

    Komentar oleh Rohman | 6 September 2008 | Balas

  31. masih bingung juga nih dasar lelet nih.

    http://hidup-bijak.blogspot.com/

    Komentar oleh agung | 18 Desember 2008 | Balas

  32. akhir.na apa yg saya cari selama ini ketemu
    tapi sayang navbar.na berada di bawah tidak berada di atas.
    tolong kk bntuin bikin top navbar

    Komentar oleh Rizky 大蛇丸 | 27 Maret 2010 | Balas


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: