Cara Bikin Menu Horizontal Halaman Bawah

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,


About Yanto Cungkup 487 Articles
saya hanya manusia biasa yang berusaha berguna bagi sesama dan terbuka untuk menjalin persahabatan dengan siapa saja.

80 Komentar

  1. 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 😉

  2. 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…

Leave a Reply

Alamat email Anda tidak akan dipublikasikan.


*