CARA MEMBUAT MENU NAVIGASI BLOGGER STICKY MENGGUNAKAN W3SCHOOL - TRIK 2

Blogging sambil belajar koding otodidak.

Halo teman teman blogger, khususnya pemula yang pingin sekali blogging sambil belajar koding. Wow belajar koding gratis dan bisa praktik langsung melalui blogging. Pada kesempatan ini saya tetap mengangkat situs w3scool sebagai latarnya. Mengapa? Karena w3school adalah laman tutorial pertama yang membuat saya jadi 'melek koding' sejak dini. Dan terutama karena situs ini sangat cocok diterapkan ke dalam template template berbasis HTML.

blogging sambil belajar koding secara otodidak

Mengapa ia cocok banget sama template blogger? Alasanya begini teman teman:
  1. Melalui laman ini saya rasa kita dapat belajar CSS dari dasar
  2. Melalui laman ini kita dapat belajar HTML dari dasar
  3. Melalui laman ini kita dapat belajar Javascript dari dasar
  4. Bahkan belajar PHP (hypertext)
Dan bukan hanya itu, bukan hanya web programming, melaluinya kita dapat belajar C, C#, C+, Python, Java, Bootstrap dll. Yang sering online dan minat teknologi web maupun aplikasi sudah pasti tahu. 


Baiklah mari kita belajar membuat Navbar atau navigasi menu yang sticky alias lengket dan menerapkannya ke dalam template Blogger! Namun terlebih dahulu lihat hasil template yang kami buat  setelah mempelajarinya melalui w3school:


Bagaimana? setelah di scroll navbar hanya bergeser sedikit keatas, dan setelah header menghilang ia bertahan di atas bukan? Iini beda dengan navbar editblogtema yang kami buat dengan cara berbeda. Triknya ada pada halaman w3school pada bagian 'HOW TO' klik disini
contoh kode navbar sticky


Pada link tersebut kalian dapat memperhatikan kode berikut dan copy kan ke notepad atau langsung ke dalam editor HTML template blogger:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

Letakan kode berikut di atas kode </head>
<style>
body {
margin: 0;
font-size: 28px;
font-family: Arial, Helvetica, sans-serif;
}

.header {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
}

#navbar {
overflow: hidden;
background-color: #333;
}

#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}

#navbar a:hover {
background-color: #ddd;
color: black;
}

#navbar a.active {
background-color: #4CAF50;
color: white;
}

.content {
padding: 16px;
}

.sticky {
position: fixed;
top: 0;
width: 100%;
}

.sticky + .content {
padding-top: 60px;
}
</style>
</head>
<body>

Letakan kode berikut di bawah kode </head>
<div class="header">
<h2>Scroll Down</h2>
<p>Scroll down to see the sticky effect.</p>
</div>
<div id="navbar">
<a class="active" href="javascript:void(0)">Home</a>
<a href="javascript:void(0)">News</a>
<a href="javascript:void(0)">Contact</a>
</div>
<div class="content">
<h3>Sticky Navigation Example</h3>
<p>The navbar will stick to the top when you reach its scroll position.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

Letakan kode berikut di atas kode </body>
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
</body>
</html>

Ingat kode yang saya warnai merah silahkan dihapus saja (diabaikan) 

CARA MERUBAH BAGIAN HEADER AGAR OTOMATIS MENJADI JUDUL BLOG
Nah setelah itu perhatikan kode yang berwarna biru: <h2>Scroll Down</h2> Silahkan di hapus dan di ganti dengan: 
<h1><a expr:href='data:blog.homepageUrl'/><font size='5'><data:blog.title/></font></h1>
Kode pengganti ini akan otomatis berubah menjadi Judul blog, kalian bisa memperbesar hurufnya dengan mengganti angka 5 menjadi lebih besar, tapi ingat huruf yang besar disini tidak responsif dan akan berantakan pada tampilan layar hape (mobile).

Save template.

Sebenarnya tombol pencarian itu juga dibuat melalui fitur  HOW TO w3school, dengan sedikit modifikasi. Silahkan bertanya jika kurang mengerti melalui kolom komentar.


Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini! Share:

Beri Komentar atau, Ajukan Pertanyaan

3 Comments

  1. Saya belajar banyak dari blog ini,mudah mudahan di update terus.tapi saran saya kalau bisa tolong demonya di pisah biar sesuai sama yang di jelaskan melalui tutorial artikelnya.

    Beberapa artikel di blog ini yg saya ikuti terkadang tidak sesuai sama demonya.dan hanya di arahkan ke home blog ini sendiri.

    Pada hal menurut pantauan saya bagian bagian beranda blog ini sering mengalami perubahan dari waktu ke waktu.

    Alangkah demonya dibuat secara terpisah pada tiap tiap artikel yang membahas berbagai kode kode html,Java Script,maupun cssnya biar memudahkan pengunjung maupun pemula yang ingin belajar kode-kode seperti saya.

    ReplyDelete
    Replies
    1. Benar banget, terimakasih atas sarannya. Itulah kelemahan kami, halaman demo kadang di pakai untuk keperluan lain sehingga linknya putus. Dan itu juga menyebabkan link internal blog ini jadi buruk. Kami sedang membenahinya.

      Sekali lagi terimakasih sarannya akan memotivasi kami untuk lebih serius. Dan mohon maaf atas ketidaknyamanannya...

      Delete
  2. Saya masih awam soal koding dan membuat desain blog, taunya bawaan blogspot saja hehe... Memang butuh waktu untuk menguasai ilmu tersebut. Dan blog ini termasuk ahlinya

    ReplyDelete

2 IN 1: from EDITBLOGTEMA to EDITBLOGTEMPLATE