CARA MENGGUNAKAN SITUS W3SCHOOL UNTUK MEMODIFIKASI TEMPLATE BLOGGER - TRIK 1

Blogging sambil belajar koding otodidak.

W3SCOOL adalah sebuah situs untuk belajar programming terutama sekali sangat cocok buat kalian yang ingin belajar codin secara otodidak. Di W3SCHOOL kalian dapat belajar HTML, CSS, Javascript dan PHP mereka semua adalah bahasa bahasa web yang sangat cocok bahkan sangat baik untuk blogging. Artikel ini di tulis berdasarkan pengalaman nyata kami. Dan untuk kalian ketahui situs editblogtema terpengaruh besar dari cara belajar otodidak.

belajar teknologi web coding programming secara otodidak

Ini tentu saja saya tulis berdasarkan pengalaman saya dalam mempelajari teknologi web dan koding secara otodidak dan menjadikan blogging sebagai bahan praktiknya, yakni dengan cara mengutak atik halaman editor blogger dan menerapkan pelajaran dari situs W3SCHOOL tadi. Memodifikasi kode kodenya seperti yang disaran oleh situs tersebut. Hasilnya tidak memerlukan waktu lama untuk menjadi lebih mahir dari hari ke hari.

Baiklah saya luruskan: Semua artikel editblogtema adalah ditulis kebanyakan adalah tutorial dan tutorial tersebut sebagian besar kami kembangkan dari hasil belajar coding di W3SHOOL lho. 99% artikel kami orisional tidak menjiplak artikel manapun. Sumbernya memang belajar dari sana, tapi kami telah mengembangkannya. Wow begitu besarnya arti belajar, bukan? 

Dan yang penting, semua tutorialnya terkait HTML, XML, CSS, Javascript dan PHP dapat di terapkan ke dalam blogger 100%, asalkan kita mau mempelajarinya satu persatu, dan jangan sepotong sepotong.

Bukan hanya terbatas belajar coding untuk teknologi WEB seperti: HTML. XML, CSS, PHP  dan Javascript, kita juga dapat belajar python, bootstrap, SQL dan masih banyak lagi Lalu apa sih manfaat langsung belajar W3SCHOOL terhadap konten konten editblogtema? Baiklah saya jabarkan satu persatu:

1. BELAJAR MEMBUAT MENU NAVIGASI ATAU NAVBAR TEMPLATE BLOGGER 

Kalau kalian teliti editblogtema banyak sekali memberikan tutorial cara membuat menu navigasi blog, mengapa? Karena bukan hanya penting untuk SEO sebagai tool navigasi, desain navbar juga dapat mempercantik blog dan membuatnya tampil professional. Juga dapat memanjakan pengunjung dengan kemudahan navigasi tadi. 

Karena blogger berbasis HTML ketimbang Wordpress yang berbasis PHP persoalannya menjadi gampang bagi kami. Awal membuatnya belum begitu mengerti apa itu HTML dan cara bekerjanya. Beruntung W3SCHOOL menyediakan fitur 'HOW TO' yang sangat bermanfaat bagi pemula seperti saya. 

Dan ketika itu saya sangat panasaran bagaimana sih membuat navigasi menu yang ada fitur deropdown plus kotak pencarian dengan ikon kaca pembesar di ujung bar kanannya? Misalnya pada template viomagz buatan mas Sugeng. Jadi saya pelajari melalui contoh dengan menuliskan 'responsive navigation' pada kolom pencarian HOW TO. Hasilnya ada disana. Beruntungnya saya ketemu tutorial lengkapnya. Perhatikan pictorialnya secara detail berikut:

Buka HOW TO cari perihal pembuatan navigasi menu plus drop down yang responsif:
buka fitur how to w3school

Dengan membuka menu HOW TO kita dapat menemukan contoh teknologi pembuatan widget dan element HTML diantaranya ya pilihan atau contoh pembuatan menu navigasi.

Lalu Pilih Responsif Navbar:
pilih responsif navbar dropdown
Pada gambar di atas jelas saya telah memilih Responsif Navbar Dropdown. Pada menu kanan tampak bagaimana navbar terlihat setelah disentuh menggunakan kursor mouse atau sentuhan jari tangan pada saat kalian membuka blog melalui hape atau tablet layar sentuh. 

Namun jika kita ingin mempelajari sumber kodenya maka kalian harus mengklik 'Try it Yourself'.

Lihat sumber kodenya:
sumber kode dari tutorial w3school
Sumber kodenya dapat kalian edit dan hasilnya dapat kalian copy dan dapat langsung di terapkan ke dalam template blogger. Menurut saya pada waktu itu ini sangat membantu saya dalam mengedit template bawaan blogger menjadi terlihat premium. 

Responsif juga berarti navigasi menu di atas sesuai untuk ukuran segala layar, apakah itu PC desktop, PC Laptop, tablet Android dan iPad, hape Android dan iPhone. Pada ukuran layar desktop menu navigasi akan tampak horisontal, sedangkan pada layar kecil hape tombol akan terlihat dengan tombol hamburger menu. Keren bukan? Perhatikan kodenya:

Jika kalian ingin menerapkannya maka letakan kode CSS style berikut tepat di atas kode:</head>:
<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: 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: 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: 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: 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>
Kode berikut di letakan sesudah kode tag </head> atau di bawah <body....>
<div class="topnav" id="myTopnav">
<a href="#beranda" class="active">Beranda</a>
<a href="#berita">Berita</a>
<a href="#hubungi">Hubungi</a>
<div class="dropdown">
<button class="dropbtn">Lebih banyak
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#perihal">Perihal</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>
Javascript berikut di sebelum atau di atas kode </body>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
Jangan kuatir kode kode di atas dapat diterapkan hampir kesemua  template template bawaan blogger yang ingin kalian modifikasi terutama jika ingin menambah navigasi menunya, kecuali template varian 'Dynamic View' yang tidak akan cocok dengan browser browser modern. 

perlu juga di perhatikan agar template lama seperti sederhana (simple), PT.Keren sekali (awesome), jendela dan perjalanan yang dipergunakan harus di rombak terlebih dahulu strukturnya dengan menggunakan menjadi responsif. Sedangkan terhadap template template varian terbaru seperti contempo, emporio, soho dan Notable dapat langsung di terapkan. Lihat hasilnya:

NAVIGASI HALAMAN BLOG DENGAN DROPDOWN

Jika di buka melalui halaman yang lebih kecil akan berubah menjadi responsif.

Klik "lebih banyak" untuk menampilkan menu dropdownnya.


2. MEMBUAT TOMBOL PENCARIAN 

Saya baru mulai ikutan blogging tahun 2018 melalui editblogtema, karena bayangin saya kan masih SMA waktu itu. jadi cuma ikut ikutan dan membaca bahwa template viomagznya mas Sugeng itu adalah template sejuta umat, selain style navigasi menunya apalagi ciri ciri khasnya? Itu lho menu pencarian full. begitu tombol kaca pembesar di klik akan muncullah menu pencariannya yang memenuhi layar berikut gaya transparant dan animasinya yang halus, saya cari di HOW TO dan hasilnya saya menemukannya:
menu pencarian layar penuh
Kodenya dapat kalian terapkan langsung ke blogger sebagai berikut:

Letakan CSS di atas kode </head>
<style>
body {
font-family: Arial;
}
* {
box-sizing: border-box;
}
.openBtn {
background: #f1f1f1;
border: none;
padding: 10px 15px;
font-size: 20px;
cursor: pointer;
}
.openBtn:hover {
background: #bbb;
}
.overlay {
height: 100%;
width: 100%;
display: none;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
}
.overlay-content {
position: relative;
top: 46%;
width: 80%;
text-align: center;
margin-top: 30px;
margin: auto;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
cursor: pointer;
color: white;
}
.overlay .closebtn:hover {
color: #ccc;
}
.overlay input[type=text] {
padding: 15px;
font-size: 17px;
border: none;
float: left;
width: 80%;
background: white;
}
.overlay input[type=text]:hover {
background: #f1f1f1;
}
.overlay button {
float: left;
width: 20%;
padding: 15px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.overlay button:hover {
background: #bbb;
}
</style>
Letakan kode HTML berikut di bawah kode </head> atau <body..>
<div id="myOverlay" class="overlay">
<span class="closebtn" onclick="closeSearch()" title="Close Overlay">×</span>
<div class="overlay-content">
<form action="/action_page.php">
<input type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
Letakan kode Javascript berikut di atas kode </body>
<script>
function openSearch() {
document.getElementById("myOverlay").style.display = "block";
}
function closeSearch() {
document.getElementById("myOverlay").style.display = "none";
}
</script>

3. IMPIAN MEMBUAT MENU NAVIGASI RESPONSIF PLUS MENU PENCARIAN MIRIP VIOMAGZ.>

Cara ini hanya membuat menu navigasi tersebut mirip bukan berarti sama. Cara membuat menu navigasi viomagz beda jauh dengan cara yang saya sampaikan walaupun hasilnya mirip. Lagi lagi bersumber dari situs belajar online teknologi koding W3SCHOOL.

Yang saya lakukan terhadap sumber kode diatas adalah:
  1. Karena menu diatas tidak fixed, saya menambahkan dua hal pada kode CSSnya: position: fixed dan menambahkan z-index: 999;
  2. Lalu saya mengkombinasikan menu navigasinya dengan tombol pencariannya mengatur posisi tombol baik 'position' maupun z-idexnya.
  3. Menambahkan kode PHP pencarian.
  4. Dan hasilnya? Kalian bisa lihat demonya: DISINI(untuk yang tidak fixed) kami terapkan ke template bawaan blogger SOHO.
  5. Dan DISINI (untuk yang fixed) kami terapkan ke template bawaan blogger emporio.
Adapun ciri ciri menu navigasinya adalah:
  • Fixed. Artinya menu navigasi tetap berada di atas header halaman blog walaupun halaman tersebut di scroll (digulir) keatas atau kebawah. Manfaatnya sangat baik bagi pengunjung yang akan terbantu karena tidak kehilangan navigasi. 
  • Ini di atur melalui pengaturan CSS: position: fixed; } dan Js
  • Memiliki dropdown. Artinya ada menu yang apabila di klik akan memunculkan sederet sub-menu yang menurun. Teknik ini juga sangat membantu menghemat ruang lebar halaman blog sehingga menu navigasi tidak akan terlihat menumpuk dan mengurangi kerapian tampilan halaman blog.
  • Responsif. Artinya pada halaman lebar navbar nampak memanjang secara horisontal. Namun pada saat di tampilkan pada layar yang lebih kecil navbar akan menampilkan Judul Blog dan menu atau ikon Hamburger yang apabila di klik akan memunculkan semua menu menu blogger. Ini di ataur melalui pengaturan lebar @media screen dan Jquery.
  • Menu atau tombol pencarian pada ujung kanan navbar.
Tentu saja masih banyak situs lain yang setara atau lebih baik buat melatih skill koding dan bahkan programming, intinya sangat mungkin sekali bagi kalian untuk dapat memanfaatkan dunia internet buat belajar. Dan lihatlah hasilnya yang akan mendatangkan kepuasan yang tidak dapat di nilai dengan hanya sekedar hasil sen demi sen menjadi publiser adsense....(Lol)

Selamat belajar! 

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

Anissa Auliasari
Born in Riau Island. Love music, Social Media, watching youtube, reading, cooking cake. Now I am living in Bandar Lampung, Love HTML, Javascript, python and C++ Just only an ordinary with simple glitch..

Posting Komentar