INILAH NAVIGASI MENU BLOGSPOT YANG DAPAT DIBUAT STYLISH DENGAN BERBAGAI GAYA | editblogtema editblogtema: INILAH NAVIGASI MENU BLOGSPOT YANG DAPAT DIBUAT STYLISH DENGAN BERBAGAI GAYA

Logtema

×
tutorial dan teknik

INILAH NAVIGASI MENU BLOGSPOT YANG DAPAT DIBUAT STYLISH DENGAN BERBAGAI GAYA

Trik ini dapat sobat terapkan pada hampir semua tipe (baik model lama maupun model baru) template bawaan blogspot jika sobat ingin merombaknya atau mendesain ulang tampilannya sehingga menjadi tampak premium. Lihat gambar dibawah pada saat halaman blog dibuka melalui PC destop/laptop:
  1. Gaya pertama: Standar, tinggal pakai saja seperti yang dipakai oleh pembuatnya: editblogtema.
  2. Gaya kedua: Berwarna, ganti atau tambahkan kode warna: #1E90FF
  3. Gaya ketiga: Gradasi, ganti atau tambahkan kode warna gradasi: #0F466E;
    background:-webkit-linear-gradient(right,#0F466E 0%,#5093C475%);
Lihat gambar saja:
menu navigasi ala editblogtema dalam tiga style warna
Gambar menu navigasi editblogtema dalam 3 style
Terlebih dahulu saya promosikan fiturnya:
  1. Responsive dan mobile friendly, user friendly, simple UX
  2. Ringan dan fast loading
  3. Dapat diterapkan pada template lama (klasik) blogger hingga jenis template terbaru seperti Contempo, Emporio cs.
  4. Menggunakan elemen HTML dasar yang mudah diterapkan.
  5. Menu ini bekerja sempurna pada layar mobile atau layar hape yang lebih kecil. Perhatikan tampilan menu navigasi saat dibuka melalui ponsel seluler:
tampilan menu navigasi editblogtema saat dibuka melalui ponsel seluler
Tampilan menu navigasi dilihat dari layar mobile (hape)
Lihat demo videonya saat pembuatan masih tahap percobaan:
Saya berniat membuat pemasangan paket navigasi ini menjadi mudah dan portable dan dapat dipasang dengan mudah oleh setiap blogger melalui pengaturan blogger untuk kedepannya. Tetapi juga saya sedang melakukan beberapa percobaan pembuatan menu navigasi baru yang lebih baik yang tentunya dapat diterapkan lintas platform blog.

Melihat demo diatas sobat dapat membayangkan: Template diatas adalah template bawaan blogspot model sederhana (simple) yang tentu saja telah saya modifikasi struktur HTMLnya agar menjadi responsive terlebih dahulu, namun walaupun misalnya sobat tidak melakukan apa apa menu navigasi ini tidak akan meninggalkan eror saat diterapkan ke template asli (default atau bawaan) blogspot.

Hasilnya responsive, mobile friendly dan fast loading, bahkan dapat diterapkan hapir kesemua jenis template bawaan blogspot dan dapat dilakukan oleh pemula sekalipun.

Baiklah kita langsung saja kepada cara pembuatannya.

1. Tambahkan CSS

Masuk kepengaturan atau dasbor blogspot:
  • Pilih tema atau theme
  • Pilih edit HTML pada halaman editor HTML yang telah dibuka cari kode </head> dan copy-pastekan seluruh kode dibawah ini tepat diatasnya:
<style>
body {margin:0;font-family:Arial}
.topnav {
position: fixed;
z-index: 99;
width: 100%;
overflow: hidden;
background-color: #00BFFF;
border: solid;
color:#00BFFF;
}
.topnav a {
float: left;
display: block;
color: red; display: block;
color: white;
text-align: center;
padding: 16px 18px;
text-decoration: none;
font-size: 19px;
}
.active {
background-color:transparent;
}

.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 20px;
outline: 10px;
border-radius:30px;
border:none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: relative;
background-color: transparent;

box-shadow: rgb(135, 206, 250);
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left; 80%;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color:rgb(135, 206, 250);
color: black;
}
.dropdown-content a:hover {
background-color: rgb(135, 206, 250);
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 800px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 800px) {
.topnav.responsive {position: fixed;}
.topnav.responsive .icon {
position: fixed;
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;
}
}
body {
font-family: Arial;
}

* {
box-sizing: border-box;
}

.openBtn {
background: #fff;
border: solid;
border-color:#00BFFF;
border-radius:100px;
padding: 10px 15px;
font-size: 20px;
cursor: pointer;
position: fixed;
z-index: 150;
top: 8px;
left:75%;
}
.openBtn:hover {
background: #FFB6C1;
}
.overlay {
height: 100px;
width: 100%;
display: none;
position: fixed;
z-index: 100;
top: 0;
left: 10;

background-color: rgb(43, 191, 254);
}

.overlay-content {
position: relative;
top: 5%;
width: 60%;
text-align: center;
margin-top: 10px;
margin: auto;
}

.overlay .closebtn {
position: absolute;
top: 0px;
right: 1%;
font-size: 60px;
cursor: pointer;
color: white;
z-index: 110;
}

.overlay .closebtn:hover {
color: #FFB6C1;
}

.overlay input[type=text] {
padding: 15px;
font-size: 17px;
border: solid;
border-radius:30px;
float: left;
width: 110%;
background: #fff;
}
.overlay input[type=text]:hover {
background: #fff;
}
.overlay button {
float: left;
width: 10%;
padding: 15px;
background: #fff;
font-size: 17px;
border: none;
cursor: pointer;
}
.overlay button:hover {
background: #fff;
}

</style>
<link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.8.1/css/all.css' integrity='sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf' rel='stylesheet'/>


Save template. Perhatikan Kode yang saya sorot warna kuning background-color: #00BFFF;? Itulah kunci memberi warna menu navigasi ini.

2. Tambahkan HTML

Sama seperti langkah pertama

Masuk kepengaturan atau dasbor blogspot:
  • Pilih tema atau theme
  • Pilih edit HTML pada halaman editor HTML yang telah dibuka cari kode </head> dan copy-pastekan seluruh kode dibawah ini tepat dibawahnya:
<div class='topnav' id='myTopnav'>
<a class='active' href='/'><small><h1>Nama blog sobat</h1></small></a>
<a href='#'>Blog</a>
<a href='#'>Privacy</a>
<a href='#'>Formulir Kontak</a>
<a href='#'>Perihal</a>

<a class='icon' href='javascript:void(0);' onclick='myFunction()'>
<i class='fa fa-bars'/>
</a>
</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...' size='25' type='text'/>
</form>
</div>
</div>
<button class='openBtn' onclick='openSearch()'><i class='fa fa-search'/></button>

Save template

3. Tambahkan JavaScript

Masuk kepengaturan atau dasbor blogspot:
  • Pilih tema atau theme
  • Pilih edit HTML pada halaman editor HTML yang telah dibuka cari kode </body> dan copy-pastekan seluruh kode dibawah ini tepat diatasnya:
     <script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
}, 10);

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>

Save template. Selesai. Dan Lihat Demo:

www.editblogtema.net

Bagikan (share):

4 comments:

  1. salut dah sama agan yang satu ini, hobinya itu memang luar biasa, otak atik scrip,.kalau enggak biasa terkadang susah loh dan tentunya punya kesulitan yang luar biasa,..hajar terus mas

    ReplyDelete
    Replies
    1. Makanya harus dibiasakan deh he he he...beda kalau hobi, keuntungannya sedikit banyak adalah menambah kemahiran kita menulis program

      Delete
  2. mantap mas, sepertinya saya harus belajar banayk dengan mas yang satu ini,..ea

    ReplyDelete
  3. terlihat stylish dan responsive ya gan, menu navigasi ditambah dengan kotak pencarian, sehingga bisa memaksimalkan blog dan juga berguna untuk pembaca karena lebih mudah untuk menemukan konten blog yang mereka inginkan ;)

    ReplyDelete

🌐请给我们一个礼貌的评论与任何相关的主题
⚘⚘Kami menghargai semua masukan
👫👫 Namun kami juga menjunjung tinggi kesopanan