Template bawaan jadi keren jika di pasang menu navigasi yang satu ini

menu navigasi blog editblogtema melalui layar hape mobile
Menu style editblogtema melalui layar hape/mobile
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 2 Demo:
DEMO
Diterapkan ke template model lama
template sederhana editblogtema
Template default editblogtema
Gambar di atas adalah template simple atau sederhana versi default model lama yang telah saya modifikasi dan ternyata jadi sangat bagus penampilannya setelah diberi menu navigasi editblogtema. 
DEMO2
Diterapkan kepada template model baru support v.3 (contempo)
tema emporio setelah di lengkapi dengan menu navigasi editblogtema
Template emporio nampak beda setelah dilengkapi dengan navigasi editblogtema
Bagaimana, keren bukan? Jelas dong template apapun jadi cool setelah dipasangi dengan menu navigasi yang satu ini. Itu emporio saya tidak perlu merobah apa apa tampilannya pada desktop tampak grid namun ketika konten dibuka akan menampilkan halaman utama yang penuh...

www.editblogtema.net

6 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  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

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

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

    BalasHapus
  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 ;)

    BalasHapus
  4. Menunya keren banget. Warnanya mantap, gaya warna gradasi mirip blog saya Om Koodok. Responsive pula. Keren.

    BalasHapus
  5. Ada template yang tinggal di pakai ga om yang bawaan blogspot

    BalasHapus
Lebih baru Lebih lama

Formulir Kontak