Cara Bikin Menu Horizontal Halaman Bawah

Yanto Cungkup blogspot, edit html 80

Cara Bikin Menu Horizontal Halaman Bawah Artikel Blogspot. berbicara 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.