Cara Bikin Menu Horizontal Halaman Bawah

1622 Views

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,

BURSA MEMBER

Kategori:edit htmlTag

Written by: Yanto Cungkup

Title: Cara Bikin Menu Horizontal Halaman Bawah
saya hanya manusia biasa yang berusaha berguna bagi sesama dan terbuka untuk menjalin persahabatan dengan siapa saja.
449 Artikel
80 Comments
  1. komentar
    • komentar
    • komentar
  2. komentar
    • komentar
  3. komentar
    • komentar
    • komentar
  4. komentar
    • komentar
  5. komentar
    • komentar
    • komentar
  6. komentar
  7. komentar
    • komentar
  8. komentar
    • komentar
  9. komentar
  10. komentar
    • komentar
  11. komentar
  12. komentar
    • komentar
  13. komentar
    • komentar
    • komentar
  14. komentar
    • komentar
  15. komentar
    • komentar
  16. komentar
    • komentar
  17. komentar
    • komentar
    • komentar
    • komentar
  18. komentar
    • komentar
  19. komentar
    • komentar
  20. komentar
    • komentar
  21. komentar
  22. komentar
  23. komentar
    • komentar
  24. komentar
  25. komentar
    • komentar
  26. komentar
  27. komentar
  28. komentar
    • komentar
  29. komentar
    • komentar
  30. komentar
    • komentar
  31. komentar
    • komentar
  32. komentar
    • komentar
    • komentar
    • komentar
  33. komentar
  34. komentar
    • komentar
  35. komentar
    • komentar
  36. komentar
  37. komentar

Add a Comment

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