Di hari yang cerah ini saya akan share Cara Membuat Icon Menu Versi Mobile di Atas Header/Navbar Blog. Dengan icon menu versi mobile ini akan memudahkan pengunjung untuk mengakses blog anda dan tentunya blog versi mobile anda akan terlihat lebih menarik dan keren.
Cara Membuat Icon Menu Versi Mobile di Atas Header/Navbar Blog:
Langkah Pertama:
1. Masuk ke akun Blog anda
2. Masuk ke bagian Template
3. Klik Edit HTML
4. Kemudian Cari kode ]]></b:skin>
5. Letakkan kode berikut ini di atas kode ]]></b:skin>
Catatan: kode yang di warnai merah adalah warna background dan gradisi, warna background diatas menunjukan warna hitam, anda bisa ganti warnanya sesuka anda..bilah-menu-seluler{text-align:center;width:100%;min-height: 34px;z-index: 99;background: #000000;background: -moz-linear-gradient(center top ,#000000 0%, #000000 100%);background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#000000));background: -o-linear-gradient(top, #000000, #000000);background: -ms-linear-gradient(top, #000000,#000000);border-bottom: 2px solid #4169E1;}.bilah-menu-seluler ul{margin:0px;padding:0px;}.bilah-menu-seluler li{display:inline;}.bilah-menu-seluler img{width:30px;max-width:30px;height:24px;max-height:24px;margin:2px;padding:2px;border-bottom: 1px dotted #4169E1;}.bilah-menu-seluler img:hover{background: #000000;}
Langkah kedua:
1. Cari kode <div class='content-outer'>
2. Letakkan kode berikut ini diatas kode <div class='content-outer'>
Catatan: Silahkan ganti tulisan yang di warnai biru dengan url dan judul yang mau di tampilkan sebagai menu. Anda juga bisa mengganti icon menu dengan icon menu yang lain, dengan cara mengganti url gambar yang di warnai merah.<b:if cond='data:blog.isMobile'><div class='bilah-menu-seluler'><ul><li><a href='http://wahidlovers.blogspot.com/?m=1'><img alt='Beranda' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGg-l3WlB9_If2hhNjPVzabQT-ZtkRQwv3y60UZfitFUcUg3nwYSdiKm1icKtdW_nD_ynnxEx0iDvUnZnY0vrlpChWF6zN-_QToRyk5KWTHqNEgq-oX8ZUcyMRFcuP4F8V_CycigQsuMcx/s1600/nav-icon.png' title='Beranda'/></a></li><li><a href='http://wahidlovers.blogspot.com/p/blog-page.html?m=1'><img alt='Sitemap' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7PmeOsDPXnIaIs842AZEr43oTqXbuBowa5-TNTzaRAnaVNZqP_LqV94eROkskecLbeNBnDClBoBRqmXiDBO9vooaswaT0gzeW7-A_gtdJCMG37nG5gl7unbDjOD_8073QA_Bo2EaJRnYp/s1600/Iuze77NW11J-4.jpg' title='Sitemap'/></a></li><li><a href='http://wahidlovers.blogspot.com/2013/08/contact.html?m=1'><img alt='Contact' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgda3TaSEru5u2qGiStAF_9EH59y39cNWJ6SErk-gzjeOUsrShJJRA0qeFeS0-PkaIlgwk5ERI5sbcidQfGN0_BrEkQ3dmm_VDTb-2affzGLgBAjF-7rh_aS-13VSVVNkxxNqS2r2uKUfOB/s1600/Iuze77NW11J-2.jpg' title='Contact'/></a></li><li><a href='https://plus.google.com/u/0/+Abdurrahman78/about'><img alt='About' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfvvHz89UBbSRC1b6fsJLyHRuRZbVBiOVoFGuhRdRqXUx9wePmhEnsuiYgElvU2g2fGJBKsYXf6NCjGyqUPDJgZna_qrcDhQp502U1ALfFDcxcmblyK3Bu2FnZD-QBSDPLqQTphh2kAcIC/s1600/Iuze77NW11J-5.jpg' title='About'/></a></li><li><a href='http://wahidlovers.blogspot.com/p/privacy-policy.html?m=1'><img alt='Privacy Policy' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Gf9JgS2ZaYqunNX-NC5zEDNprvz7w2o-IJbnYvhmstKtZDT-4hyZSAatVeEVUuS9FFySX-6OZFWZzCnrLdhNiL8_dWJC2IcopT2_uESgI-VsZReSIJMLsh8KnPbTRoW-DInpY6T7WhKr/s1600/IMG_20131113_155826.jpg' title='Privacy Policy'/></a></li><li><a href='http://wahidlovers.blogspot.com/p/disclaimer-for-wahid-lovers-if-you.html?m=1'><img alt='Disclaimer' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRe1kXyYawY2SBTrodgLDzIT9iu__tKrqXWTPXFtrFM2zSvp5xw6vaHjOQ4s54QOT-zjTcd_qJ4Qt7vC_aUy8FsYmBJIuV1MI_1xQngqdbnWbPle5x_vb2BVffnl2ib5zOgsVJeZ0uA8s9/s1600/Iuze77NW11J-3.jpg' title='Disclaimer'/></a></li></ul></div></b:if>