Skip to main content

Membuat Footer Navbar atau Navbar Bawah







Dalam dunia blogger, upaya mempercantik tampilan blog dan menambahnya dengan berbagai aksesoris bukanlah hal yang baru. Hal ini bertujuan agar pengunjng tidak merasa bosan dengan blog kita. Dan postingan kali ini saya mencoba berbagi tips-trik kepada sobat untuk membuat Footer Navbar atau Navbar Bawah. Navbar (navigation bar)tersebut senantiasa muncul pada bagian bawah blog kita, meskipun halaman tergulung (scrolled) ke atas maupun ke bawah. Ada dua macam cara buat navbar yang akan saya sharingkan kali ini, meski keduanya hampir sama, yakni miliknya Mas Anang dan Kang Rohman. Bagi sobat yang sudah paham, silahkan diabaikan saja, dan bagi yang belum paham, silahkan simak sampai selesai.

Untuk footer navbar di blog ini, saya memgambil miliknya Mas Anang, dengan warna yang transparan. Nah, untuk membuatnya berikut ini akan saya tunjukkan beberapa langkah-langkahnya. Pertama sekali tentunya anda harus login dulu ke akun Blogger anda. Buka Dasbor dan klik pada menu Layout dilanjutkan dengan menu Edit HTML dan beri tanda centang pada Expand Template Widget. Lalu pastekan kode CSS berikut ini persis sebelum tanda ]]></b:skin>:

#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 #ddd;
border-bottom: 10px solid #f5f5f5;
background-color: #f5f5f5;
width: 100%;
left: 0px;
text-align: left;
color: #888;
font-family: Verdana;
font-size: 11px;
z-index:10000;
opacity: 0.9;
filter: alpha(opacity: 90);
bottom:0;
}

Langkah selanjutnya, masukkan kode berikut persis sebelum </body>:

<div id="navbar-footer">
<p>
<img border="0" src="http://1.bp.blogspot.com/_KL7_V6HnzdI/RhrTtnaiJEI/AAAAAAAAASA/UinYkP1S3js/s400/anang.jpg"/>&#160;&#160;<a href="http://anangku.blogspot.com/index.html">Anang's Blog</a>&#160;&#169;&#160;2006-2008 <img border="0" src="http://4.bp.blogspot.com/_KL7_V6HnzdI/RhrNtXaiI1I/AAAAAAAAAQI/LrvOUJvlDKg/s400/signature.gif"/></p>
<p class="info">Powered by <a href="http://www.blogger.com">Blogger</a> | Created and Maintained by <a href="http://www.friendster.com/anangku" target="_blank">Anang</a><br/>Best viewed in Firefox 1.5+ at 1024x768 or higher resolution
<br/>
</p>
</div>

Ganti semua yang berhuruf tebal warna merah sesuai dengan keinginan sobat..Ya, Sesuai dengan blog dan identitas ... avatar, tandatangan, URL Blog/Friendster. Dan tentunya, sobat bisa memodofikasi warnanya dengan merubah kode html warna. Belum hafal? Silahkan klik di sini.



Navbar Bawah Kang Rohman

Untuk Versi kang Rohman, link yang dipasang di navbar lebih banyak daripada versi masa Anang. ini barangkali yang disebut Kang Rohman sebagai perbedaannya, selain pada kode-kode yang dipakai. Silahkan ikuti tutorial di bawah ini.



Untuk navbar bawah versi Kang Rohman ini akan dijelaskan agak terperinci. Silahkan ikuti sampai selesai jika sobat berminat. 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 :





  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, seperti Photobucket atau Yahoogeocities. 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://i290.photobucket.com/albums/ll256/angkatan2006/khusus/bahauddinicon2copy.jpg


    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://i290.photobucket.com/albums/ll256/angkatan2006/khusus/bahauddinicon2copy.jpg"/>&#160;&#160;&#160;

    <a href="http://template-unik.blogspot.com"><b>Template Unik</b>

    </a>&#160;&#160;&#169;&#160;2007&#160;|

    Design by <a href="http://kolom-tutorial.blogspot.com" target="_blank">Rohman Abdul Manap</a>

    &#160;&#160;&#160;<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> |

    thanks to <a href="http://www.feedburner.com" target="_blank">Feed burner</a><br/>

    Best viewed in Firefox 1.5+ at 1024x768 or higher resolution</p>

    </div>






Sebagai catatan, kode yang dicetak merah berarti harus di ganti dengan link atau tulisan yang sobat miliki, yang sebelumnya sudah diupload.


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://i290.photobucket.com/albums/ll256/angkatan2006/khusus/pujangg.jpg"/>&#160;&#160;&#160;

    <a href="http://arsipmakalah.blogspot.com"><b>Arsip Makalah Blog's</b>

    </a>&#160;&#160;&#169;&#160;2007&#160;|

    Design by <a href="http://bahauddin-amyasi.blogspot.com" target="_blank">Bahauddin Amyasi</a>

    &#160;&#160;&#160;<img border="0" src="http://i290.photobucket.com/albums/ll256/angkatan2006/khusus/iconplato.jpg"/></p>

    <p class="info">Powered by <a href="http://www.blogger.com">Blogger</a> |

    thanks to <a href="http://www.feedburner.com" 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://i290.photobucket.com/albums/ll256/angkatan2006/khusus/pujangg.jpg"/>&#160;&#160;&#160;

    <a href="http://arsipmakalah.blogspot.com"><b>Arsip Makalah Blog's</b>

    </a>&#160;&#160;&#169;&#160;2007&#160;|

    Design by <a href="http://bahauddin-amyasi.blogspot.com" target="_blank">Bahauddin Amyasi</a>

    &#160;&#160;&#160;<img border="0" src="http://i290.photobucket.com/albums/ll256/angkatan2006/khusus/iconplato.jpg"/></p>

    <p class="info">Powered by <a href="http://www.blogger.com">Blogger</a> |

    thanks to <a href="http://www.feedburner.com" 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 HMJ PBA di sini !atau Blog Aggkatan 2006 di sini !


Selamat mencoba !
Thank's to Mas Anang dan Kang Rohman.


Comments

  1. ikutan nimbrung mas.... mo download software+game full version gratis? masuk ke blog saya ya.....;)

    ReplyDelete
  2. @ Virtual Load :

    Thank's atas komennya, Mas...;)
    Mengenai download software+game full version gratisnya, insya Allah saya sempatkan. Insya Allah juga cocok buat adek-adekku kok... 8-}

    ReplyDelete
  3. @ Liyana ;

    makasih udah mau mampir and commen....

    ReplyDelete
  4. Thanks infonya, udah dicoba tp ko bagian infonya berada di bagian center, bukan berada di samping kanan seperti punya mas

    ReplyDelete
  5. makaci kodenya... klu bwt enter page gmn ya????

    ReplyDelete

Post a Comment

Kepada Sobat-Sobat sekalian silahkan komen Disini, Semuanya boleh komen, yang tua sampai muda bebas berkomen ria di bawah ini.

Silahkan menuliskan komentar anda pada opsi Google/Blogger untuk anda yang memiliki akun Google/Blogger.

Silahkan pilih account yang sesuai dengan blog/website anda (LiveJournal, WordPress, TypePad, AIM).

Pada opsi OpenID silahkan masukkan URL blog/website anda pada kotak yang tersedia.

Atau anda bisa memilih opsi Nama/URL, lalu tulis nama anda dan URL blog/website anda pada kotak yang tersedia. Jika anda tidak punya blog/website, kolom URL boleh dikosongi.

Gunakan opsi 'Anonim' jika anda tidak ingin mempublikasikan data anda. (sangat tidak disarankan)

Makacih ya atas komennya ...

Popular posts from this blog

HUMAN RELATION ; Perspektif Psikologi Humanistik, Fungsionalisme dan Behaviorisme (Sebuah Kajian Analitis-Interkonektif)*

Pendahuluan
Human Relation, merupakan hubungan atau kerjasama antara dua individu atau lebih, khususnya dalam status hubungan atau interaksi social. Buruk atau baiknya human relation dapat diukur dari adanya kepercayaan yang bersifat timbal balik antara satu orang dengan orang lain serta dari adanya sebuah penghormatan atau penghargaan dan rasa tolong menolong yang kokoh. Bukan menjadi keraguan lagi bahwasanya human relation menjadi suatu keinginan yang sangat primordial bagi setiap yayasan atau sebuah organisasi, bahkan menjadi syarat utama dari terealisasinya tujuan-tujuan serta pencapaian visi dan misi sebagai kunci kesuksesan organisasi pada umumnya.

Human relation sering disebut juga dengan “interpersonal relation”, yaitu kerjasama sekelompok individu dari masyarakat social yang tumbuh dari adanya hubungan antara satu individu dengan individu yang lain. Interpersonal relation merupakan sebuah deskripsi yang jelas tentang tata pergaulan atau tingkah laku manusia dan karakteristik pr…

Kumpulan Novel Jar (untuk HP Aplikasi Java)

Bagi para novel mania, membaca novel tentunya adalah kesenangan tersendiri. Semacam interaksi personal dengan dunia imaji yang kerap menghentak-hentak ambisi. Di dunia maya, kita banyak menjumpai situs-situs yang menyediakan novel dengan berbagai format dan ekstensinya. Ada format PDF (portable document format), yang dapat dibuka dengan program Acrobat Reader atau sejenisnya. Ada juga yang dengan bentuk format htm, yang dapat dibuka dengan browsing atau internet eksplorer secara offline. Ada juga yang berbentuk format exe. Ada juga yang menggunakan windjvu-viewer (untuk membuka file extensi *.djv / *.djvu). Ada format "lit Viewer"(untuk membuka file extensi *.lit). Dan banyak "ada juga-ada juga" yang lain...

Tapi, pada postingan kali ini, saya akan berbagi lagi dengan sobat sekalian tentang Novel HP (aplikasi java). So, bagi sobat yang punya hobbi ngoleksi novel, tetapi jarang online dan tidak punya komputer, jangan khawatir. Berkat kecerdasan teknologi, kita yang …

Download Alfiyah MP3

Di kalangan pondok pesantren, nama Ibnu Malik dan Kitab Alfiyah adalah dua entitas yang sudah tidak asing lagi, terlebih bagi pondok pesantren salaf yang setiap harinya bergumul dengan kitab kuning dan tata gramatika bahasa Arab (Nahwu & sharrof). Di pondok saya sendiri, Mambaul Ulum Bata-bata, Pamekasan, Madura, kitab Alfiyah Ibnu Malik menjadi Kitab standart acuan dalam pembelajaran Kaidah bahasa Arab, dan menjadi syarat pelulusan ke tingkat Aliyah B, yang orientasinya memang menitik beratkan pada kajian kitan klasik.

Pada malam-malam tertentu, para santri diwajibakan membaca nadham (bait-bait) Alfiyah dengan bersama-sama, dengan lagu dan irama yang bermacam-macam. diharapkan, dengan tradisi pembacaan Alfiyah secara rutin dan intens, santri mamapu menhafal dan memahami isi kandungan kitab Alfiyah ini dengan baik dan mudah.

Di era teknologi dan informasi yang serba canggih ini, kitab Alfiyah dan kitab-kitab kuning lainnya sudah tidak dipelajari secara manual dan klasikal, tetapi …