Cara Bikin Menu Horizontal Halaman Bawah

By | 30 Maret

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
    1. curvasud sansiro

      silahkan mas,terimakasih atas kunjungannya

      Reply
    1. curvasud sansiro

      masih kalah cepat tuh mas,hehehe

      Reply
    2. Saud Karrysta

      Iya tuh Mas saya kalah cepatnya, namun artikel bikin menu ini, sangat bermanfaat Mas

      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
    1. curvasud sansiro

      ini juga baru percobaan sambil belajar html mbak,silahkan digunakan moga berhasil

      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
    1. curvasud sansiro

      silahkan dicoba mas mg berhasil…..thx atas apresiasinya

      Reply
  4. Nehand Bjn

    Sanga brmnfaat mas infonya…mksih yah mas bwt sharing nya.

    Reply
    1. curvasud sansiro

      thx atas pendapatnya mas,salam kenal

      Reply
  5. 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
    1. curvasud sansiro

      ada tuh mas,liat aja kehalaman paling bawah dari blog ini

      Reply
    1. curvasud sansiro

      monggo dicoba mas,moga aja berhasil.salam kenal

      Reply
    1. curvasud sansiro

      trims atas apresiasinya mas

      Reply
  6. Dwi Alfina

    keren gan 🙂 oiya blog ini sudah saya follow, ditunggu follbacknya

    Reply
    1. curvasud sansiro

      ok mbak,thx telah mengikuti blog ini….iya nanti akan kufollow balik

      Reply
    1. curvasud sansiro

      silahkan mas,semoga bermanfaat

      Reply
  7. jenx indah

    Template saya belum resvonsip kalau dibuat seperti itu harus yang responsip nggak

    Reply
    1. curvasud sansiro

      nggak harus mbak,jadi dapat dipakai kesegala template

      Reply
  8. 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

      silahkan kang lembu,baru oll ya.belum masuk tuh follownya

      Reply
    2. curvasud sansiro

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

      Reply
  9. 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
  10. 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
  11. Yahya Doank

    Wah mantap mas tipnya.. perlu di coba nih..

    Reply
    1. curvasud sansiro

      silahkan mas,makasih atas pendapatnya,salam kenal

      Reply
  12. Aditya Putra

    dari hari ke hari makin mantap aja artikelnya sob, sukses selalu dah

    Reply
    1. curvasud sansiro

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

      Reply
    2. Aditya Putra

      Belum sempat mas kemarin mau mampir malah hujan deres jadi batal mampirnya

      Reply
    3. curvasud sansiro

      ok deh tak tunggu kedatangannya mas

      Reply
  13. Index Apk

    kemaren udah saya coba mas, tapi letaknya kok ane ya mas??? *gk sesuai sama yang diinginin

    Reply
    1. curvasud sansiro

      koq bisa yamas,coba periksa lagi kodenya dan penempatan htmlnya

      Reply
  14. 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
    1. curvasud sansiro

      iya mbak begitulah kira2.makasih tambahan infonya

      Reply
  15. Devy Indriyani

    wow sangat-sangat kerennn sob, mohon bimbingannya untuk praktek ya sob,nanti kalau ada kesalahan saya tanya kembali,<br />salam kenal

    Reply
    1. curvasud sansiro

      silahkan dipraktekkan mbak,mudah koq moga berhasil.salam kenal balik

      Reply
    1. curvasud sansiro

      silahkan mas,moga berhasil

      Reply
  16. handri setiawan

    ijin untuk mencoba mas sepertinya bagus untuk blog saya yang satu nya salam kenal

    Reply
    1. curvasud sansiro

      monggo mas,semoga berhasil

      Reply
    1. curvasud sansiro

      tapi ingat disimpan mbak,entar lupa lagi.hehehe

      Reply
  17. Dwi Alfina

    saya bukmak dulu gan 🙂 thankyou

    Reply
    1. curvasud sansiro

      silahkan mbak,gratis koq

      Reply
  18. 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
    1. curvasud sansiro

      iyamas,ini juga percobaan…..ah mas daniel bisa aja,saya juga masih belajar koq

      Reply
  19. irvan robiansyah

    wih mantap, ijin coba gan caranya 😀

    Reply
    1. curvasud sansiro

      thx atas apresiasinya mbak,salam kenal

      Reply
  20. Saud Karrysta

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

    Reply
    1. curvasud sansiro

      silahkan mas jangan malu-malu sambil dimakan hidangannya ya.hehehe

      Reply
  21. Tari Cici

    saya nyimak dulu mas..<br />salam kenal..

    Reply
    1. curvasud sansiro

      silahkan mbak,terimakasih telah mampir.salam kenal balik

      Reply
  22. 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
  23. bhasyr

    Udah ngetes jos bgt. Keren kang. Sip.

    Reply
    1. curvasud sansiro

      terimakasih atas pendapatnya kang.salam kenal

      Reply
  24. 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

      eh ada juga toh cungkup dijawa tengah….aq cungkup jatim mas,salam kenal balik

      Reply
    2. naza

      oh… kirain cungkup jawa tengah… sempat kaget lo.. salam kenal juga..

      Reply
    3. 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
    1. curvasud sansiro

      makasih kunjungannya sis

      Reply
  25. Wahyu Eka Prasetiyarini

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

    Reply
    1. curvasud sansiro

      iya mbak termasuk ini salah satu solusinya

      Reply
  26. 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
    1. curvasud sansiro

      iyamas,sedikit nyari sensasi baru.hehehe….salam kenal balik

      Reply
  27. Ridha Harwan

    Demonya kok gak keliatan, sudah diganti klai yah.

    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.