Cara membuat menu navigasi blog mirip situs CNN

Hari minggu saya di rumah saja. Dan ketimbang tidak ada kerjaan mending utak atik atau istilahnya main main sambil koding melalui w3school.

Kali ini saya ingin berbagi trik membuat menu navigasi atau navbar halaman web atau halaman blogger blogspot supaya mirip dengan situs CNN, siapa tahu ada yang berminat membuatnya dan siapa tahu karena tampilannya yang mirip membuat pengunjung pada berdatangan bukan? he he he...

Siapkan material warna 

Material warna CSS yang di pergunakan dapat dengan sangat jelas mewakili ciri ciri khas sebuah situs. Adapun ciri ciri Navbar atau Navigasi menu miliki situs CNN itu (paling tidak sampai saat ini) adalah: 

1. Navbar Active: Merah Kode warna CSS-nya: #FF0000;
2. Navbar Utama: Gelap Kode warna CSS-nya: #333;

Navbar di atas bukanlah gambar, akan tetapi sebundel kode HTML yang saya tulis bukan melalui opsi 'compose' melaikan opsi 'HTML' cobalah kalian bereksplorasi. Ini dapat diterapkan pada template lama dan template baru yang belum memiliki Menu Navigasi tentunya. 

Untuk memasangnya kalian harus terbiasa melakukan pengeditan halaman HTML blogger yakni dengan cara masuk kepengaturan blogger, pilih Theme atau Tema klik titik tiga bersusun di samping kanan layar agak ke atas, pilih edit HTML.

1. Tambahkan CSS 

Pada halaman editor blogger cari kode </head> dan letakan kode CSS berikut tepat di atasnya:

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
<style>
body {margin:0;font-family:Arial}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #FF0000;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 18px 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: 1;
}
.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: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 450px) {
.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: relative;}
.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>

2. Tambahkan HTML. 

Masih di dalam opsi editor HTML letakan saja kode berikut di bawah kode </head>:

<div class="topnav" id="myTopnav">
<a class="active" href="CNN#">CNN</a>
<a href="About#">About</a>
<a href="Contact#">Contact</a>
<div class="dropdown">
<button class="dropbtn">News
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="International#">International</a>
<a href="Asia#">Asia</a>
<a href="Indonesia#">Indonesia</a>
</div>
</div>
<a class="icon" href="javascript:void(0);" onclick="myFunction()" style="font-size: 15px;"><svg style="width:14px;height:14px" viewBox="0 0 20 20">
<path fill="#ffffff" d="M5,13L9,17L7.6,18.42L1.18,12L7.6,5.58L9,7L5,11H21V13H5M21,6V8H11V6H21M21,16V18H11V16H21Z" />
</svg></a>
</div>

3. Tambahkan kode Javascript 

Pada halaman editor HTML cari kode </body> dan leteakan J kode javascript berikut tepat di atasnya:

<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>

Save template.

Trik ini saya utak atik dari halaman w3school, coba deh klik link berikut dan ingat, jika ingin melihat hasilnya jangan lupa klik 'RUN' di atas menu ya...

Menu navigasi ala CNN

Kalau kalian sudah klik 'RUN' tombol warna hijau akan tampil hasil pekerjaan saya seperti pada gambar berikut di bawah, kalian juga pasti akan bisa melakukan hal yang sama:

halaman kerja Anissa di w3school

Atau lihat tangkapan layar video yang saya buat berikut untuk lebih jelasnya:

Alasan saya lebih memilih editor HTML w3school ketimbang CodePen adalah karena selama pengalaman saya bermain di kedua situs ini editor HTML w3school lebih cocok di terapkan ke dalam template blogger. Walau tampilan lamannya terlihat jadul namun Tutorialnya lebih simpel lho..

Trik diatas hanyalah dasar pembuatannya. Tentu setelah menguasai itu kita dapat mengembangkannya menjadi lebih mirip, tapi, lebih baik jangan mirip mirip amatlah cukup menarik perhatian dan membuat orang mengingat 'CNN' untuk memikat penunjung.

Tapi ingat: Jangan suka meniru karena peniru biasanya hanya menjadi nomor dua di belakang yang di tiru. Jadilah diri sendiri.