Cara Membuat Icon Menu Versi Mobile di Atas Header/ Navbar Blog

0
Menambah menu icon versi mobile pada blog memang sangatlah banyak kegunaannya, Selain mempermudah pengunjung untuk akses blog shobat, juga menambah bagus blog agar bisa tampil seperti website profesional. Tidak seperti tampilan versi desktop yang sangatlah susah di akses karena terlalau lebar halamannya. Mungkin dengan Cara Menambah Menu Unik di Atas Header Blog jadi alternatif agar blog shobat bisa seperti tampilan versi mobile kerjaterus.com. sebagai contoh tampilan versi seluler di kerjaterus.com silahkan klik Disini

 Blogspot memang memiliki banyak kekurangan dalam tampilan versi selulernya dimana widget tidak bisa tampil di versi seluler jika tidak kita ulik. pada artikel sebelumnya, kerjaterus.com telah share juga Cara Menampilkan Widget di Tampilan Seluler Blog.
Jika shobat tertarik memasang menu navbar dengan icon versi mobile di blogspot versi kerjaterus.com seperti gambar di bawah ini, silahkan ikuti langkah langkahnya:

Langkah Pertama: 
Shobat masuk dulu ke akun Blog shobat
Buka di bagian Template
Klik Edit HTML
Kemudian cari kode ]]></b:skin> Setelah ketemu, tempatkan kode di bawah ini sebelum kode
]]></b:skin>

.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 #006B24;
}
.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 #80CC99;
}
.bilah-menu-seluler img:hover{
  background: #000000;
}

 Nb. Kode yang di warnai merah adalah warna backround dan gradiasi, warna background diatas menunjukkan warna hitam, silahkan ganti warna sesuka shobat.

Langkah Kedua:
Cari kode <div class='content-outer'> setelah ketemu, sisipkan kode di bawah ini kode <div class='content-outer'>

 <b:if cond='data:blog.isMobile'>
  <div class='bilah-menu-seluler'>
    <ul>
      <li><a href='http://kerjaterus.com/?m=1'><img alt='Beranda' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJfTkmFES3Jw0YGSo1to33vxhqRoFc3XlTj8as0jXzgKA2g6bS2ThoF8QvvCqKa01FneOBxUNaQD-0jloz2EIoS9HNx00113YsBvjWDjZTvzCGidmyceeh2sy0URmsPHlj6ue3-WqmC1wl/s1600/nav-icon.png' title='Beranda'/></a></li>
      <li><a href='http://www.kerjaterus.com/2013/03/site-map.html?m=1'><img alt='Sitemap' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoS4cbJJBUu98iRneCHo0238072rB3NoWZdQ4e98DztMIiFhtuAXVaX_E-kjSPwibKx_yF3gBbdabo9Q18rhych-gI6rTJjBswnyb2EMzO-B4rMyPgWPsBwRmj_CI_dreIJdzDu-PcKRQG/s1600/Iuze77NW11J-4.jpg' title='Sutemap'/></a></li>
      <li><a href='http://www.kerjaterus.com/2013/09/jasa-kirim-mobil-jakarta.html?m=1'><img alt='Contact' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSUhsN686PFiiytDrPJoddug31BGZXJSR36eI1lafESrA92sYYKVRFqlH_ddSNtc3phEomsXNUBCP8L0g7vhGxcBbG1ivkET7b3xjhIRa7iapWXc6ZMZ3dvbHe6mmfKeQWGasXB0uDSG_t/s1600/Iuze77NW11J-2.jpg' title='Contact'/></a></li>
      <li><a href='http://www.kerjaterus.com/2013/10/kak-imam.html?m=1'><img alt='About' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsDfRKGeAbo5wqJEr2d85M7qmLTHDjsagQt63m5DH1Uku57KTyKlMtngccpuO4QkatqUrpihK3BquSs57N8NOWkgu-dB1AZ3RpTXkHV_0-ni7-k8yIj1OP7SNa7E8N7_zQ01H7a_6XI-Ji/s1600/Iuze77NW11J-5.jpg' title='About'/></a></li>
      <li><a href='http://www.kerjaterus.com/2013/10/privacy-policy-kerjateruscom.html?m=1'><img alt='Privacy Policy' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHmoX6dLaxz3CV5z3IIxKJiw7Gg1n6rU9kbFVZ2S5DZ5Fr-_OCRPoLgVI2yQdoa9QJlZab_ls0NOkOF5K9v5FjTx79BEMBZR3O4x3KkUeponEBdnMlNOo-3BDRiqZlc5UMA2lvr8qeZ870/s1600/IMG_20131113_155826.jpg' title='Privacy Policy'/></a></li>
 <li><a href='http://www.kerjaterus.com/2013/10/disclaimer.html?m=1'><img alt='Disclaimer' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ7ZilNbDYyWIguM4gHkKjo0rDTydsoObhNl22NszhLalYREpeUnJGdNqtogDKwskRafbtioIZj0grdBECXsJft5FRui4_8ZA6Y3tKOQT-LJsLEDHjZmrJUbCvDwuuPnzhw2ZYF8wTFOOb/s1600/Iuze77NW11J-3.jpg' title='Disclaimer'/></a></li>
    </ul>
  </div>
</b:if>

Kemudian klik Simpan Template.
Tulisan yang di warnai Merah silahkan ganti dengan url yang akan di tampilkan sebagai menu.
Icon Menu di atas yaitu berisi BERANDA, CONTACT, SITEMAP, PRIVACY, dan DISCLAIMER
Silahkan ganti dengan menu sesuai selera shobat.
Template yang kerjaterus.com pakai adalah template dari ELTELU, jika shobat ingin template yang responsive seperti kerjaterus.com silahkan download XML dulu DISINI 
Silahkan Mencoba, Semoga Berhasil..
Kopi Dewa rengku

0 0 komentar: