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.
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=’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.
baca juga : cara mengoptimalkan blog
Demikian artikel dari wongcungkup tentang Cara Bikin Menu Horizontal Halaman Bawah, semoga artikel ini bermanfaat bagi sobat semua.
salam,
saya langsung coba ajah nih kode scripnya <br />thanks mas sudah berbagi ilmu 🙂
silahkan mas moga berhasil
doakan saya yaa mas, biar berhasil pasang scripnya <br />:)
Siang Mas Curvasud, keren menu Horizontalnya Mas ijin coba yah..?<br />Terima kasih atas tutorialnya.
silahkan mas,terimakasih atas kunjungannya
Semoga saja saya dapat Pertamax di artikel Menu Horizontalnya Mas Curvasud
masih kalah cepat tuh mas,hehehe
Iya tuh Mas saya kalah cepatnya, namun artikel bikin menu ini, sangat bermanfaat Mas
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 😉
ini juga baru percobaan sambil belajar html mbak,silahkan digunakan moga berhasil
udah lama ndah utak atik kode script….jadi pingin nyoba juga nih kang…<br />:)<br /> btw loading nya blognya enteng bener nih 🙂
silahkan dicoba mas mg berhasil…..thx atas apresiasinya
sip kang..sami sami ya 🙂
Sanga brmnfaat mas infonya…mksih yah mas bwt sharing nya.
thx atas pendapatnya mas,salam kenal
boleh juga nih mas tutorial cara bikin menu horizontal pada halaman bawah, tapi nggak ada demonya yah mas saya pengen lihat contohnya 🙂
ada tuh mas,liat aja kehalaman paling bawah dari blog ini
wah, boleh juga nih mas, dicoba diblog saya… makasih ya
monggo dicoba mas,moga aja berhasil.salam kenal
keren gan lengkap bngt tutornya
trims atas apresiasinya mas
keren gan 🙂 oiya blog ini sudah saya follow, ditunggu follbacknya
ok mbak,thx telah mengikuti blog ini….iya nanti akan kufollow balik
save dulu bro, buat diutak atik dulu….
silahkan mas,semoga bermanfaat
Template saya belum resvonsip kalau dibuat seperti itu harus yang responsip nggak
nggak harus mbak,jadi dapat dipakai kesegala template
menu horizontalnya ijin simpen dulu ah, butuh seh cuman perlu waktu senggang buat masangnya.<br />follow sukses kayanya deh…?!ngga kliatan sih
silahkan kang lembu,baru oll ya.belum masuk tuh follownya
mau pasang widget follower malu kang soalnya baru dikit pengikutnya gak kayak punyanya kang lembu.hehehe
Kunjungan Malam Mas Cuvarsud, kembali simak dan pelajari Cara bikin Menu Horizontal halaman bawah nya. makasih Mas Cuvarsud. salam santun dari saya
malam jg mas…wah makasih banget karena banyak banget dedengkot blogger kayak massaud yang mampir keblog ini,salam hormat juga mas
kok gak ada demonya mas, soalnya pengen tahu bagaiman bentuknya gitu. hehee<br />terima kasih sharenya mas..
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
Wah mantap mas tipnya.. perlu di coba nih..
silahkan mas,makasih atas pendapatnya,salam kenal
dari hari ke hari makin mantap aja artikelnya sob, sukses selalu dah
hehehe…..bisa aja mas aditya ini,makasih atas apresiasinya,kapan nih mampir kerumahku?
Belum sempat mas kemarin mau mampir malah hujan deres jadi batal mampirnya
ok deh tak tunggu kedatangannya mas
kemaren udah saya coba mas, tapi letaknya kok ane ya mas??? *gk sesuai sama yang diinginin
koq bisa yamas,coba periksa lagi kodenya dan penempatan htmlnya
sepertinya cara ini juga bisa meningkatkan traffic, karena situs-situs besar seperti kapanlagi.com dan detik.com punya menu tambahan di bawahnya 😀
iya mbak begitulah kira2.makasih tambahan infonya
wow sangat-sangat kerennn sob, mohon bimbingannya untuk praktek ya sob,nanti kalau ada kesalahan saya tanya kembali,<br />salam kenal
silahkan dipraktekkan mbak,mudah koq moga berhasil.salam kenal balik
izin utak atik mas
silahkan mas,moga berhasil
ijin untuk mencoba mas sepertinya bagus untuk blog saya yang satu nya salam kenal
monggo mas,semoga berhasil
saya catat dulu mas,,,,
tapi ingat disimpan mbak,entar lupa lagi.hehehe
saya bukmak dulu gan 🙂 thankyou
silahkan mbak,gratis koq
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.. 😀
iyamas,ini juga percobaan…..ah mas daniel bisa aja,saya juga masih belajar koq
wih mantap, ijin coba gan caranya 😀
silahkan gan,mudah koq
mantap artikelnya mas…
thx atas apresiasinya mbak,salam kenal
Kunjungan rutin Mas Curvasud, kembali simak, artikel cara membuat menunya<br />salam sukses terus yah Mas 🙂
silahkan mas jangan malu-malu sambil dimakan hidangannya ya.hehehe
saya nyimak dulu mas..<br />salam kenal..
silahkan mbak,terimakasih telah mampir.salam kenal balik
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 🙂
iyamas sambil belajar memahami kode CSS dan HTML.hehehe…..salam kenal mas thx atas apresiasinya
Udah ngetes jos bgt. Keren kang. Sip.
terimakasih atas pendapatnya kang.salam kenal
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…
eh ada juga toh cungkup dijawa tengah….aq cungkup jatim mas,salam kenal balik
oh… kirain cungkup jawa tengah… sempat kaget lo.. salam kenal juga..
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
kunjungan rutin gan 🙂
makasih kunjungannya sis
bounce rate di blog saya kebetulan tinggi mas, jadi harus perbanyak nih pasang menu ya, bisa dibawah footer menu nya 🙂
iya mbak termasuk ini salah satu solusinya
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
iyamas,sedikit nyari sensasi baru.hehehe….salam kenal balik
Demonya kok gak keliatan, sudah diganti klai yah.
ijin mencoba ya mas, salam sukses .. .