ediTEMP TAB MENU RESPONSIVE TANPA JAVA SCRIPT

TAB MENU RESPONSIVE TANPA JAVA SCRIPT

Salah satu syarat yang dimunculkan oleh google adsense adalah agar para blogger menempatkan sekaligus mengembangkan "menu navigasi", katanya hal ini ditujukan untuk mempermudah pengunjung blog dalam mencari materi yang ada pada blog yang dikunjungi tersebut. Selain itu, dengan dipasangnya TAB MENU atau MENU NAVIGASI, atau yang pada kesempatan ini ediTEMP memberi nama TAB MENU, tampilan blog akan menjadi lebih elegan atau kata orang pinternya tampilan tatap muka blog menjadi BEST APPEARANCE, inilah yang katanya lagi ... ujung ujung nya akan membuat pengunjung blog betah dan tidak ingin langsung go out dari blog kita.

Menu navigasi, terutama yang memiliki sifat responsive alias bisa menyesuaikan diri dengan berbagai ukuran layar dari alat yang dimiliki pengunjung blog, sudah sangat banyak diterbitkan oleh banyak sekali pakar blog, mulai dari yang sangat simpel hingga yang didukung dengan berbagai aksesori, dan itu semua dapat didapatkan secara free alias tidak usah membeli. tinggal kita pasang pada blog, langsung jadi!!!, paling paling bila perlu kita ubah warna dan kadang sedikit ukurannya saja sesuai selera masing masing.

Namun hasil dari pengembaraan ediTEMP di dunia maya ini, tab menu responsive yang tampilannya bagus bagus, kebanyakan disusun dengan ekstensi java script. Padahal hampir seluruh pakar blogger menjelaskan bahwa Java sript memang akan mengangkat derajat blog dari sisi appearances namun menurunkan kualitas performances, dan bila dibahasakan dengan bahasa katro, mungkin akan berbunyi seprti ini : "Tampilan antar muka menjadi lebih cantik, namun kecepatan loading blog menjadi terhambat"

Berawal dari kalimat terakhir pada bait di atas bait ini, dengan tertatih tatih (maklum, pengenalan IT ediTEMP 99,99% diperoleh melalui jalur autodidact) ediTEMP mencoba untuk mengutak atik TAB MENU agar bisa responsive, tampilan tidak terlalu buruk, dan yang paling penting hanya mengandalkan HTML dan CSS. TANPA MENGGUNAKAN JASA JAVA SCRIPT, ataupun link google font tertentu alias murni hanya HTML dac CSS saja. Tentunya hal ini dibuat dengan tujuan agar tidak memperlambat loading blog.

Setelah TAB MENU ini jadi, dan cukup memuaskan (menurut versi ediTEMP), kini ediTEMP mencoba untuk mengejawantahkan keinginan untuk berbagi, barangkali saja ada yang berminat untuk menggunakannya.

Sebenarnya secara mudah, bila ingin melihat TAB MENU hasil rekayasa ediTEMP, ya tinggal lihat bagian atas blog ini saja, pas dibawah header. Tapi rasanya kurang puas bila ediTEMP membuat posting tanpa satupun image yang disertakan, makanya mohon maaf anda juga bisa melihat tampilan TAB MENU dibawah ini.

1. Tampilan TAB MENU versi WEB



2. Special !!!! Menu List dibuat secara Horizontal, tidak seperti pada umumnya yang dibuata secara vertikal



3. Tampilan TAB MENU versi MOBILE sebelum klik PILIH MENU



4. Tampilan TAB MENU versi MOBILE setelah klik PILIH MENU



Bila ingin mencoba menerapkan tampilan TAB MENU yang seperti itu, silakan buka dashboard blogger, >>layout atau tata letak >> edit HTML >>
jangan lupa backup dulu itu template, buat jaga jaga apabila ternyata setelah pasang ternyata error atau mau kembali semula karena merasa tidak cocok.

bagi pemula, silakan pasang CSS di atas  ]]></b:skin>
bagi yang sudah biasa bermain template pasti tahu dimana saja css ini diletakkan

CSS TAB MENU:



  • silakan atur kembali max- width 1024px .... disesuaikan dengan lebar blog yang akan dipasang TAB MENU ini
  • juga atur warna (misal background:#098) menjadi sesuai selera anda
  • font: normal 500 14px berlin sans fb juga silakan ganti sesuai selera anda,
  • atau biarkan seperti itu juga gak papa...


Kemudian pasang HTML (bagi pemula yang masih menggunakan default template blogger) silakan pasang dibawah header seperti dibawah ini :

Untuk yang sudah biasa, pasti sudah tahu dimana memasang HTML ini....



HTML TAB MENU :



Sengaja ediTEMP biarkan alamat http://..... .... dan seterusnya

tujuannya untuk membantu pemahaman para pemula, silakan ganti dengan alamat

http:// sesuai dengan alamat halaman anda.

atau bila ingin dibiarkan (belun tersedia) silakan ganti

http://ediTEMPndeso.... dengan tanda pagar #

menjadi seperti ini:

<li><a href='#'>JUDUL TAB MENU</a></li>

SETELAH SEMUANYA SUDAH DISESUAIKAN DENGAN KEBUTUHAN ANDA, SILAKAN KLIK SAVE TEMPLATE dan coba lihat hasilnya....

Demikian pembahasan tentang TAB MENU RESPONSIVE TANPA JAVA SCRIPT yang bisa ediTEMP sajikan. Ralat, saran, masukan, kritik dan/atau pertanyaan, bisa disampaikan melalui kolom Komentar.

Belum ada Komentar

Poskan Komentar

Formulir Kontak

Nama

Email *

Pesan *