September 06, 2019

CARA MEMBUAT MENU NAVIGASI BLOGGER YANG RAPI, LENGKAP DAN RESPONSIF

simple dan rapi
tampilan menu navigasi
Membuat navigasi menu tidaklah terlalu sulit, namun kriteria Navigasi blogger yang baik  dan lengkap itu adalah:
  1. Responsive kompatibel dipergunakan baik desktop, laptop, tablet maupun hape (smartphone)
  2. Harus rapi dan enak dilihat, familiar bagi pengguna atau pengunjung blog
  3. Memiliki menu dan submenu (opsi dropdown)
  4. Tombol klik khusus saat tampil pada layar smarphone
  5. Dilengkapi dengan menu atau tombol pencarian.
  6. Warna bar dan huruf bisa diganti
  7. Mudah dipasang
Nah sepulang kerja saya bermain di codepen "ngepen" disana mengutak atik HTML CSS. Hasilnya adalah atikel tutorial kali ini yang telah saya cobakan ke beberapa blog teman, bekerja sangat baik pada template lama dan pada varian varian terbaru template blogspot blogger.

Silahkan lihat DEMO terlebih dahulu: D E M O

Baiklah kita masuk kecara pembuatannya:

1. Tambahkan HTML
Masuk ke-pengaturan blogger>pilih tema>pilih edit HTML, pada halaman editor HTML cari kode <body> dan tambahkan kode dibawah ini tepat dibawah atau diatasnya.
<div class='Header1'/> <div class='topnav' id='myTopnav'>
<a class='active' href='/'><b><a expr:href='data:blog.homepageUrl'><data:blog.title/></a></b></a>
<a href='#news'>News</a>
<a href='#contact'>Contact</a>
<div class='dropdown'>
<button class='dropbtn'>Dropdown
<i class='fa fa-caret-down'/>
</button>
<div class='dropdown-content'>
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
<a href='#'>Link 3</a>
</div>
</div>
<a href='#about'>About</a>
<a class='icon' href='javascript:void(0);' onclick='myFunction()' style='font-size:15px;'><i class='fas fa-th fa-lg'/></a>
</div>
<div id='top-scrollbar'>
<div id='top-scrollbar-bg'>
</div>
</div>
<progress max='1' value='0'>
<div class='progress-container'>
<span class='progress-bar'/>
</div>
</progress>
<div style='padding:16px'>
<a class='icon' href='javascript:void(0);' onclick='myFunction()'/></div><div class='overlay' id='myOverlay'><span class='closebtn' onclick='closeSearch()' title='Close Overlay'>&#215;</span><div class='overlay-content'><form action='/search' id='searchthis' method='get' style='display:inline;'><input id='search-box' name='q' placeholder='cari...dan tekan enter' size='25' type='text'/></form></div></div>
<button class='openBtn' onclick='openSearch()'><i class='fa fa-search' style='color:#000;'/></button>
2. Tambahkan CSS style
Masih pada halaman editor HTML cari kode </head> jika sudah ketemu tambahkan kode berikut dibawah ini tepat diatasnya.
<style>
body {margin:0;font-family:Arial}
.topnav {
overflow: hidden;
background-color: #fff;
position: fixed;
top:0;
z-index:99;
width: 100%;
border: solid;
border-color: #DCDCDC;
}
.topnav a {
float: left;
display: block;
color: #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #fff;
color: black;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 100;
position: fixed;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #fdd;
color: black;
}
.dropdown-content a:hover {
background-color: #fdd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: fixed;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
</style>
<style>
body {
font-family: Arial;
}
 * {
box-sizing: border-box;
}
.openBtn {
background: transparent;
border: none;
border-radius:180px;
border-color: transparent;
padding: 10px 15px;
font-size: 20px;
cursor: pointer;
position: fixed;
z-index: 99;
top: 6px;
right:9%;
}
.openBtn:hover {
background: transparent;
}
.overlay {
height: 62px;
width: 100%;
display: none;
position: fixed;
z-index: 100;
top: 0;
left: 19;
background-color:#DDDDDD;
}
.overlay-content {
position: relative;
top: 3%;
width: 100%;
text-align: center;
margin-top: 10px;
margin: auto;
}
.overlay .closebtn {
position: absolute;
top: 5px;
right: 11%;
padding: 0px 0px 0px 0px;
z-index: 99;
font-size: 40px;
cursor: pointer;
color: #87CEFA;
}
.overlay .closebtn:hover {
color: #000;
}
.overlay input[type=text] {
padding: 15px;
font-size: 17px;
border: solid;
border-color: transparent;
border-radius:0px;
float: left;
width: 100%;
background: #fff;
height: 56px;
}
.overlay input[type=text]:hover {
background: #fff;
}
.overlay button {
float: left;
width: 10%;
padding: 15px;
background: transparent;
font-size: 17px;
border: none;
cursor: pointer;
}
.overlay button:hover {
background: transparent;
}
</style>
3. Tambahkan JavaScript
Masih pada dihalaman editor HTML blogger, cari kode </body> dan letakan kode berikut tepat diatasnya:
<script>
function myFunction() {
var x = document.getElementById(&quot;myTopnav&quot;);
if (x.className === &quot;topnav&quot;) {
x.className += &quot; responsive&quot;;
} else {
x.className = &quot;topnav&quot;;
}
}
function openSearch() {
document.getElementById(&quot;myOverlay&quot;).style.display = &quot;block&quot;;
}
function closeSearch() {
document.getElementById(&quot;myOverlay&quot;).style.display = &quot;none&quot;;
}
</script>
Terakhir Save Tema. Sebelum melakukannya silahkan back up template terlebih dahulu. Atau lakukan pada template percobaan. Jika menemukan kesuliatan silahkan komentar dibawah ini.

www.editblogtema.net

A coding addict, a hard smoker, love boxing even not a boxer. Love maths even not a scientist

9 comments:

  1. Mantap mas,...mau bertsnya mas, cara memasang kode play store di bawah templete vio magz bagsimana mas ya, karena yang ada hanya tombol ig, fb, twitter saja

    ReplyDelete
    Replies
    1. Aslinya malah tidak ada tapi jika tetap ingin memasangnya harus melakukan kustom pada bagian footernya. adapun ikon play store android memang belum ada di librari font awsome. Kalau App Store apple malah sudah ada.

      sebagai gantinya harus membuat sendir ikonnya melalui opsi "img...png" misalnya.

      Perhatikan kode yang bisa diletakan dibawah footer viomagz yang ada hanya facebook, instagram, hingga youtube:

      <a href="https://web.facebook.com/facebookkalian/"><img alt="Facebook" border="0" height="55" src="https://1.bp.blogspot.com/-uZ8Xxh94d8g/Wurunx3skaI/AAAAAAAABTc/W8CUT8-JKFwza7t98r2ssogpCOecVLzlwCLcBGAs/s200/logo-facebook-bulat-biru-256x256.png" title="Find Us on Facebook" /></a>&nbsp;

      <a href="https://twitter.com/twitterkalian/"><img alt="Twitter" border="0" height="55" src="https://3.bp.blogspot.com/-h1TC4hqLhps/WurvQQbnhII/AAAAAAAABTk/bJV2cCuRBDgbkWU5AMy5Q3boPgUt_V1UACLcBGAs/s200/twitter-png-3.png" title="Follow Us On Twitter" /></a>&nbsp;

      <a href="https://www.instagram.com/instagramkalian/?hl=id"><img alt="Instagram" border="0" height="55" src="https://4.bp.blogspot.com/-RW_Z3hlVDag/WugFYAYvnJI/AAAAAAAABNc/Mz113nVoIhMQSb3MebADydniofaVajyggCLcBGAs/s200/instagram.png" title="Follow Us On Instagram" /></a>&nbsp;

      <a href="alamat youtube kalian"><img alt="Youtube" border="0" height="55" src="https://3.bp.blogspot.com/-8mvWSfh9xsM/WugF1FRbSHI/AAAAAAAABNw/T1iu5zcaLlktjAx_-6Pt8KP3-6K2rGLWgCLcBGAs/s200/youtube_14198.png" title="Follow Us On Youtube" /></a>

      Delete
  2. Sip mas, saya cari dulu perbedaannya

    ReplyDelete
  3. Jazakallahu khairan atas tutorialnya... sangat bermanfaat

    ReplyDelete
  4. Keren banget !
    Asik bisa utak atik blog sendiri.

    ReplyDelete
  5. Bagi icon youtube di navigasi bawah mas ... 😁

    ReplyDelete
    Replies
    1. Cari dan ganti CSSnya dengan:
      .hbzsocial-icons ul li.social-facebook a {
      background-position: -62px 1px;
      }

      .hbzsocial-icons ul li.social-facebook a:hover {
      background-color: #3b5998;
      }

      .hbzsocial-icons ul li.social-twitter a {
      background-position: -254px 1px;
      }

      .hbzsocial-icons ul li.social-twitter a:hover {
      background-color: #00aced;
      }

      .hbzsocial-icons ul li.social-instagram a {
      background-position: -95px 0px;
      }

      .hbzsocial-icons ul li.social-instagram a:hover {
      background-color: #ffffff;
      }

      .hbzsocial-icons ul li.social-pinterest a {
      background-position: -160px 1px;
      }
      .hbzsocial-icons ul li.social-pinterest a:hover {
      background-color: #cb2027;
      }

      .hbzsocial-icons ul li.social-rss a {
      background-position: -190px 0px;
      }

      .hbzsocial-icons ul li.social-rss a:hover {
      background-color: #F87E12;
      }

      .hbzsocial-icons ul li.social-youtube a {
      background-position: -287px 1px;
      }

      .hbzsocial-icons ul li.social-youtube a:hover {
      background-color: #F87E12;
      }


      Tidak semua diganti ya... hanya bagian itu, mengapa adalah karena pengaturan background-postionnya saja.

      Atau...

      Atur saja nilai jarak posisi background tersebut sampai dia mencapai nilai tertentu yang dapat menjangkau ikon youtube. Ikon ini png, bukan librari ikon ikonnya boostrap atau ikon awsome.

      Delete
    2. Naah makanya saya bingung, kayaknya gak ada pemakaian bostrap/awesome kok bsa. 😁 Mklum kurang bgt paham.

      Oya, mkasih mas sudah beres terpasang.

      Delete