Cara menambahkan menu navigasi di header blog dengan handphone

Terima kasih masih setia dengan blog saya, melihat beberapa hari ini keadaan blog ini terlantar membuat saya ingin memberikan wacana baru untuk anda sekalian.
Artikel ini saya beri judul cara membuat link navigasi di header blog dengan handphone, apa saja kegunaan nya?.
Semua tergantung dari siapa yang membutuhkan.
Bagi saya alat navigasi pada header sangatlah penting, selain dapat memudahkan visitor mencari link yang berkaitan dengan blog kita, kita juga bisa membuat mereka mudah menemukan kita di jejaring sosial, seperti facebook dan twitter, dan Penyajian nya tergantung pada isi link itu sendiri.
Lalu bagaimana memasang di header blog kita tanpa merusak tatanan template blog kita.
Cara nya adalah sebagai berikut:

Pertama.
Siapkan alat tempur kita.

1. Opera mini / UCweb
2. X-plore ( symbian )
3. Kopi / teh

Kedua
Pahami dulu karakter template.
ambil struktur header template anda.
Login blogger > Rancangan > Edit Html > Download template lengkap.

Lalu buka X-plore, cari tempat anda mendownload template anda.
lalu copy paste seluruh header, lalu pisahkan dahulu dari template untuk di edit.
Biasanya di dalam template terdapat bermacam-macam css style.
Dan terkadang membuat style navigasi tidak berhasil di karenakan terdapat masalah kecil dalam peletakan div.
Dalam beberapa template pernah saya menemukan permasalahan ini, biasanya karena struktur css nya seperti ini:

<!-- pembuka template -->
<div id='css body'>

<!-- header dibuka -->
<div class='header'></div>
<!-- header di tutup -->

<!-- content wrapper dibuka -->
<div class='content-wrapper'>

<!-- posting dibuka -->
<div class='posting'></div>
<!-- posting di tutup -->

<!-- sidebar dibuka -->
<div class='sidebar'></div>
<!-- sidebar di tutup -->

</div>
<!-- content-wrapper di tutup -->

<!-- footer dibuka -->
<div class='footer'></div>
<!-- footer di tutup -->

</div>

Perhatikan yang berwarna merah di atas, di sebabkan adanya contoh div di atas, apabila di tambah alat navigasi seperti ini:

<!-- pembuka template -->
<div id='css body'>

<!-- navigasi dibuka -->
<div class='navigation'></div>
<!-- navigasi di tutup -->

<!-- header dibuka -->
<div class='header'></div>
<!-- header di tutup -->

<!-- content wrapper dibuka -->
<div class='content-wrapper'>

<!-- posting dibuka -->
<div class='posting'></div>
<!-- posting di tutup -->

<!-- sidebar dibuka -->
<div class='sidebar'></div>
<!-- sidebar di tutup -->

</div>
<!-- content-wrapper di tutup -->

<!-- footer dibuka -->
<div class='footer'></div>
<!-- footer di tutup -->

</div>

Maka hasilnya akan saling menumpuk antara header dan navigasi.
Lalu solusi nya bagaimana??

Bila anda melihat posisi kerangka template blog anda seperti di atas, maka anda hanya perlu menghapus yang berwarna merah dan melanjutkan memasang style navigasi anda.
Menjadi:

<!-- pembuka template -->
<!-- navigasi dibuka -->
<div class='navigation'></div>
<!-- navigasi di tutup -->

<!-- header dibuka -->
<div class='header'></div>
<!-- header di tutup -->

<!-- content wrapper dibuka -->
<div class='content-wrapper'>

<!-- posting dibuka -->
<div class='posting'></div>
<!-- posting di tutup -->

<!-- sidebar dibuka -->
<div class='sidebar'></div>
<!-- sidebar di tutup -->

</div>
<!-- content-wrapper di tutup -->

<!-- footer dibuka -->
<div class='footer'></div>
<!-- footer di tutup -->

Simpan dan Selesai.

.::Bonus::.
Berikut contoh navigasi yang bisa di pasang pada blog anda.

Buka lagi template anda dengan X-plore
Lalu masukan kode berikut di antara CSS template anda.

/*Menu Navigasi atas jabungleopark----------------------------------------------- */<br />#masihsan {margin:auto;padding: 0;max-width: 100%;background: #ededed url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeQGSuxaS8ZrMHw3FF_FQdXRl-AGxs48LWQBeV-GMHMYsbhqH9mguCPc5oxi_hhsMBIp75Y1VmqQeqvIjUpllXWSPF-loVbkUqyTRZ7jiN7wWRbW909hPA7DE02xYs3XwViMxiK2xqB_mo/s200/bg.jpg) repeat-x;z-index:999; -webkit-box-shadow:0px 3px 4px 0px #383737; -moz-box-shadow:0px 3px 4px 0px #383737; -o-box-shadow:0px 3px 4px 0px #383737; -ms-box-shadow:0px 3px 4px 0px #383737; box-shadow:0px 3px 4px 0px #383737; position: relative;}<br />#masihsan-wrap2 {margin: 0 auto;padding: 0;max-width: 100%}<br />.masihsan {max-width:780px; margin:auto;}<br />.masihsan ul{list-style: none;padding: 0;float: left;}<br />.masihsan li { float: left;margin: 0;text-align: center;list-style: none;}<br />.masihsan li:hover {background: #dadada;}<br />.masihsan li a {font-family: 'Arial';font-size: 16px;display: block;padding:2px 5PX 2px 5px;color: #333333;text-decoration: none;}

Lalu cari header template anda dan taruh script ini di atas nya.

<!-- Navigasi start --><br /><div id='masihsan'><br /><div id='masihsan-wrap'><br /><div class='masihsan'><br /><ul><br /><li style='background:#b7b7b7;'><a expr:href='data:blog.homepageUrl' title='Beranda'>Beranda</a></li><br /><li><a href='http://blogger.com/profile/04410784378179181723'>Tentang</a></li><br /><li><a href='http://facebook.com/kangmas.ihsan'>Add me</a></li><br /><li><a href='http://twitter.com/jabungleopark'>Follow me</a></li><br /></ul><br /></div><br /></div><br /><div style='clear: both;'/><br /></div><br /><!-- Navigasi end -->

Save template editan anda dan upload di blogger lagi kemudian lihat hasilnya.

Semoga bermanfaat silahkan berkomentar.