Cara Bikin Menu Horizontal Halaman Bawah

By | 30/03/2014 at 11:28 am

Cara Bikin Menu Horizontal Halaman Bawah Artikel Blogspotberbicara tentang kode html dan CSS blog memang nggak ada habisnya, mulai mengedit yang memang diperlukan sampai cuma sekedar untuk mempercantik blog, dan kali ini wongcungkup akan coba mengikuti para senior dengan mencoba mengedit html untuk membuat menu horizontal dibagian bawah halaman artikel. sebelumnya silahkan baca dulu artikel sebelumnya yaitu 5 penyebab peringkat blog sobat turun.

Mungkin sobat sudah biasa melihat menu horizontal diheader halaman blog, karena setiap blog rata – rata sudah terpasang. tetapi masih jarang yang membuat menu horizontal dibagian bawah artikel.untuk DEMO nya silahkan lihat pada halaman paling bawah dari blog ini tepat diatas tulisan copyright@.

Menu horizontal ini berfungsi untuk mempermudah pengunjung didalam membuka kategori dari artikel dari blog sobat tanpa perlu susah menggeser scroll kehalaman atas lagi, selain itu untuk menambah kesan blog yang profesional.

Apakah sobat penasaran ingin membuatnya? maka jangan kemana – mana ikuti tutorial ini sampai selesai. OK berikut Cara Bikin Menu Horizontal Halaman Bawah :

  • loggin ke dasbord sobat lalu pilih menu template ==> klik edit template
  • cari kode ]]></b:skin> atau </style> tergantung template sobat (gunakan CTRL+F untuk mempermudah pencarian)
  • jika sudah ditemukan kode ]]></b:skin> atau </style> lalu copy code CSS dibawah ini tepat diatas kode ]]></b:skin> atau </style> yang tadi ditemukan.
/* Name : Menu Horizontal halaman bawah
By : yanto cungkup | wongcungkup.com
Update : 30/03/2014———————————————*/
.menubawahbackground{background:rgb(0, 0, 51);width:100%;margin:0px;padding:0px;height:auto;border-bottom: solid #990000 3px;}
.menubawah {width:auto;height:20px;margin:10px auto;padding:14px 0;}
.menubawah ul {margin: 0;padding-left:30px;color:#fff;text-transform:none;list-style-type: none;font:normal 12px Georgia,Arial,sans-serif;}
.menubawah li{display: inline; margin: 0;}
.menubawah li a{background:#000033;float: left;display: block;text-decoration:none;padding:5px 2px 5px 20px;color:#eee;line-height: 1.2em;}
.menubawah li a:visited{color:#55e60e;}
.menubawah li a:hover {color:#e1e908;text-decoration:none;}

Sampai disini berarti kita sudah setengah perjalanan menuju finish, waktunya nyruput kopi dulu sob, kalau nggak punya kopi ya cukup gigit jari aja. OK sekarang kita lanjutkan memasukkan kode HTML untuk memanggil kode agar bisa tampil kehalaman yang kita inginkan.

Caranya adalah dengan mencari kode <div id=’footer’> atau yang kode sedikit mirip karena setiap template berbeda kodenya tergantung pembuat templatenya. setelah ketemu <div id=’footer’> lalu letakkan kode dibawah ini tepat diatas kode <div id=’footer’> yang telah ditemukan tadi.

<div class=’menubawahbackground’>
<div class=’menubawahbackground’>
<div class=’menubawah’>
<ul><li>
<a href=’LINK TUJUAN‘ rel=’nofollow’ target=’_blank’ title=’DAFTAR ISI’>DAFTAR ISI</a>
<a href=’LINK TUJUAN‘ rel=’nofollow’ target=’_blank’ title=’parse HTML’>PARSE HTML</a>
<a href=’LINK TUJUAN‘ rel=’nofollow’ target=’_blank’ title=’chek baclink’>CHEK BACKLINK</a>
<a href=’LINK TUJUAN‘ rel=’nofollow’ target=’_blank’ title=’rock lawas’>ROCK LAWAS</a>
<a href=’LINK TUJUAN‘ rel=’nofollow’ target=’_blank’ title=’anwar zahid’>ANWAR ZAHID</a>
<a href=’LINK TUJUAN‘ rel=’nofollow’ target=’_blank’ title=’iwan fals’>IWAN FALS</a>
<a href=’LINK TUJUAN‘ rel=’nofollow’ target=’_blank’ title=’join to blog’>JOIN BLOG</a></li>
</ul></div><div style=’clear:both;’/></div>

keterangan:
ganti tulisan warna biru (LINK TUJUAN) dengan link tujuan sobat
ganti tulisan warna merah dengan judul artikel/kategori dari link tujuan sobat

Setelah selesai memasangnya semuanya sekarang waktunya klik pratinjau untuk menghindari kesalahan penerapan, apabila dirasa sudah sempurna baru sobat simpan. gimana sob? mudah bukan? dan apabila sobat masih bingung tentang tata cara penerapannya silahkan berkomentar pada form dibawah.

Demikian artikel dari wongcungkup tentang Cara Bikin Menu Horizontal Halaman Bawah, semoga artikel ini bermanfaat bagi sobat semua.
salam,

80 thoughts on “Cara Bikin Menu Horizontal Halaman Bawah

  1. Saud Karrysta

    Siang Mas Curvasud, keren menu Horizontalnya Mas ijin coba yah..?<br />Terima kasih atas tutorialnya.

    Reply
  2. Wahyu Eka Prasetiyarini

    wah ilmu baru ini mas. Jarang sekali saya melihat ada menu navigasi yang dipasang di bagian bawah / footer blog. Sepertinya bisa dicoba nih tutorialnya untuk blog saya. Thanks ya mas atas share nya 😉

    Reply
  3. Purnomo Jr

    udah lama ndah utak atik kode script….jadi pingin nyoba juga nih kang…<br />:)<br /> btw loading nya blognya enteng bener nih 🙂

    Reply
  4. Anthonie E. Pratama

    boleh juga nih mas tutorial cara bikin menu horizontal pada halaman bawah, tapi nggak ada demonya yah mas saya pengen lihat contohnya 🙂

    Reply
  5. Cilembu thea

    menu horizontalnya ijin simpen dulu ah, butuh seh cuman perlu waktu senggang buat masangnya.<br />follow sukses kayanya deh…?!ngga kliatan sih

    Reply
    1. curvasud sansiro

      mau pasang widget follower malu kang soalnya baru dikit pengikutnya gak kayak punyanya kang lembu.hehehe

      Reply
  6. Saud Karrysta

    Kunjungan Malam Mas Cuvarsud, kembali simak dan pelajari Cara bikin Menu Horizontal halaman bawah nya. makasih Mas Cuvarsud. salam santun dari saya

    Reply
    1. curvasud sansiro

      malam jg mas…wah makasih banget karena banyak banget dedengkot blogger kayak massaud yang mampir keblog ini,salam hormat juga mas

      Reply
  7. Budi Smart

    kok gak ada demonya mas, soalnya pengen tahu bagaiman bentuknya gitu. hehee<br />terima kasih sharenya mas..

    Reply
    1. curvasud sansiro

      liat halaman paling bawah dari blog ini mas,menu diatas garis merah .nah nah liat kan,sengaja nggak pakai demo soalnya udah pakai sih,hehehe

      Reply
    1. curvasud sansiro

      hehehe…..bisa aja mas aditya ini,makasih atas apresiasinya,kapan nih mampir kerumahku?

      Reply
  8. Elsawati Dewi

    sepertinya cara ini juga bisa meningkatkan traffic, karena situs-situs besar seperti kapanlagi.com dan detik.com punya menu tambahan di bawahnya 😀

    Reply
  9. Daniel Erick

    wahh, baru lagi nie.. siap untuk ane pelajari gan.. biasanya menu Horisontal kan diatas artikel.. :D<br /><br />pengunjung blognya banyak juga nie, boleh bagi ilmu SEOnya donk gan.. 😀

    Reply
  10. Saud Karrysta

    Kunjungan rutin Mas Curvasud, kembali simak, artikel cara membuat menunya<br />salam sukses terus yah Mas 🙂

    Reply
  11. Blogs Of Hariyanto

    di halaman bawah…biasanya sich di halaman atas….benar-benar mendapat sesuatu yg baru nich…layak untuk dicoba……..Keep happy blogging always…salam dari Makassar 🙂

    Reply
    1. curvasud sansiro

      iyamas sambil belajar memahami kode CSS dan HTML.hehehe…..salam kenal mas thx atas apresiasinya

      Reply
  12. naza

    MAaf mas mau nanya yang tidak ada hubunganya ama post diatas, saya kaget pas tau nama blog ini namanya wongcungkup, yang saya tanyakan mas cungkup mana nih? Soalnya saya cungkup juga. Saya cungkup blora jawatengah. Mas cungkup mana ya?….<br /> Salam kenal…

    Reply
    1. curvasud sansiro

      ternyata banyak ya desa cungkup.soalnya dijatim aja yg kutahu ada 3 mas satu daerahku malang,dua daerah sidoarjo dan daerah lamongan.eh dijateng pun ada.hehehe

      Reply
  13. Wahyu Eka Prasetiyarini

    bounce rate di blog saya kebetulan tinggi mas, jadi harus perbanyak nih pasang menu ya, bisa dibawah footer menu nya 🙂

    Reply
  14. oyo sukarya

    siip Mas tipsnya, langsung utak-atik temple, keren jg jarang sekali mas blog menyimpan menu horizontal di tempatkan di bawah, kunjungan perdana salam kenal Mas

    Reply

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

This site uses Akismet to reduce spam. Learn how your comment data is processed.