Jumat, 27 Januari 2012

Cara Membuat Menu Horizontal Dekat Footer


By on 18.01

Cara Membuat Menu Horizontal Dekat Footer - Biasanya Menu Horizontal letaknya di bawah Header Blog, tapi ini lain sekarang Menu Horizontal bisa di Bawah Footer kaya di Blog Kucoba.com.
Lihat Gambar Di Bawah Ini.


Gambar ini saya ambil sebagai Contoh dari Kucoba.com

Sebelum kita masuk pada tahap Cara Membuatnya, kalian harus tau dulu Cara Membuat Menu Horizontal Dekat Footer ini biasnya sudah ada dari Hasil Download Template saat kita Mendownload Template, tapi setelah saya coba Copy Code nya ke Blog saya ternyata Berhasil tapi kemungkinan Berhasil Di Blog kamu hanay 50%.Dan jika kamu tetap tertarik bagaimana cara membuatnya sekarang Lihat langkah-langkah di bawah ini.

  • Login Ke Blog kamu.
  • Pilih Rancangan lalu Pilih EDIT HTML.
  • Sebelunya kamu Backup dulu Template dengan Cara Download Template Lengkap untuk mencegah hal-hal yang tidak di inginkan.
  • Lalu Cari Kode ]]></b:skin> 
  • Lalu letakan Kode di bawah ini tepat di atas Kode  ]]></b:skin> 
/* Menu Horizontal Bottom
---------------------------------------------*/
.menubottompic {background:#A00000 url(http://3.bp.blogspot.com/-xAQHs3Q1jK8/TruFi0ZlFjI/AAAAAAAABE8/3tZLNCQ6N_U/s1600/bg_menubottom.gif) repeat-x top left;width:100%;margin:0 auto;padding:0 auto;height:42px;}
.menubottom {width:950px;height:20px;margin:0 auto;padding:14px 0;}
.menubottom ul {margin: 0;padding-left:0px;color:#fff;text-transform:none;
list-style-type: none;font:normal 11px Arial,sans-serif;}
.menubottom li{display: inline; margin: 0;}
.menubottom li a{background:url(http://3.bp.blogspot.com/-FzrNlaNHfGU/TruFiCf-5TI/AAAAAAAABE0/TJ8hbElYB5E/s1600/bg_spritebottom.gif) no-repeat center right;float: left;display: block;text-decoration:none;
padding:1px 8px;color:#eee;line-height: 1.2em;}
.menubottom li a:visited{color:#eee;}
.menubottom li a:hover {color:#000;text-decoration:none;}

  • Langkah Selanjutnya cari kode </body>  biasanya kode </body> itu terletak bagian Akhir Template
  • Lalu letakan kode dibawah ini tepat di atas kode </body>
<div class='menubottompic'>
<div class='menubottom'>
<ul>
<li><a href='http://blazerracing.blogspot.com'>Home</a></li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Contact Us</a></li>
<li><a href='#'>Support</a></li>
<li><a href='#'>Resource</a></li>
<li><a href='#'>Hot Topics</a></li>
<li><a href='#'>Popular News</a></li>
<li><a href='#'>Social Media</a></li>
<li><a href='#'>Technology</a></li>
<li><a href='#'>Politics</a></li>
</ul>
</div>
<div style='clear:both;'/>
</div>
Keteranagan:

Ganti Kode Yang berwarna Biru Dengan URL Blog Kamu.
Ganti Tanda # Dengan URL tujuan.
Ganti Kode yang berwarna Merah dengan Judul.

Jika sudah selsai Klik dulu Pertinjau Jika berhasil Klik Simpan Template, dan jika tidak berhasil Bersihkan Edit.
Kode ini masih dalam tahap percobaan harap Tinggalkan Pesan Di Kotak Komentar jika ada kesalahan.

SELAMAT MENCOBA

About Syed Faizan Ali

Faizan is a 17 year old young guy who is blessed with the art of Blogging,He love to Blog day in and day out,He is a Website Designer and a Certified Graphics Designer.

28 komentar:

  1. saya coba pasang ya sob disalah satu blog ane,mduah2an sukses

    BalasHapus
  2. Ok Silahkan Sob mudah-mudahan Berhasil Yah, jika tidak Hubungi saya Ok

    BalasHapus
  3. Menu horizontal dekat footer .... ? Wah mantap kang..., salam kenal...

    BalasHapus
  4. Terima kasih tips nya sob, udah aku praktekkan di blog aku, salam kenal.

    BalasHapus
  5. sob kalau bikin menu yang bisa berturutan kaya yang di atas..
    gimana caranya??

    BalasHapus
  6. Coba sobat baca ini

    http://blazerracing.blogspot.com/2012/03/cara-membuat-menu-horizontal-drop-down.html

    atau

    http://blazerracing.blogspot.com/2012/04/cara-membuat-menu-drop-down-dengan-css3.html

    BalasHapus
  7. Tips dan trik yang mantap, telah aku praktekkan di blog aku, salam kenal persahabatan

    BalasHapus
  8. berhasil sob...berkunjung balik ya...

    BalasHapus
  9. Trips dan trik yang mantap, terima kasih atas kesediaan anda berbagi pengetahuan, salam kenal persahabatan.

    BalasHapus
  10. Info bermanfaat, mohon ijin untuk praktek, happy blogging, salam kenal persahabatan

    BalasHapus
  11. Silahkan da, terimakasih telah berkunjung.

    BalasHapus
  12. ntar tak cobain, Cz mau pergi sholat jum'at dulu..

    xixixixi,, nice share!

    BalasHapus
  13. thanks gan, sangat membantu....

    BalasHapus
  14. NIce Article, ini suatu hal yang brmanfaat. mksih ya saya udh coba dan berhasil :)

    BalasHapus
  15. makasih banyak aku sudah coba dan berhasil

    BalasHapus
  16. suksess gan,terimakasih

    BalasHapus
  17. sobat, ane udah coba, dan gimana untuk menyesuaikan dengan lebar blog kita sob ??

    BalasHapus
  18. ane coba dulu sob , kunjungi balik cirebon4rt.blogspot.com

    BalasHapus
  19. Kren tutorialnya, mampir ke okenusantara.blogspot.com atau inerie.blogspot.com

    BalasHapus
  20. Good Posting !!
    Thanks sobat,...
    Salam BLOG SQ

    BalasHapus
  21. Mantap Gan,
    Trims tutorialnya, sudah berhasil....

    BalasHapus
  22. makasie dpt ilu baru,,,,,
    sukses slalu,,,

    ditunggu umpan balinya
    vimax-shop.blogspot.com

    BalasHapus
  23. keren nih tutornya,boleh deh dicoba biyar mempercantik blog,wkwkwkwk :D
    visit back dong yuk ke http://be-bisnis-lah.blogspot.com/

    BalasHapus
  24. salam KEnal gan http://tutorialcid.blogspot.co.id/

    BalasHapus