BANGETHZ

Coding atau pengodean, dalam postingan bangethz kali ini akan menjelaskan cara memasang coding di blog kamu. Coding sendiri memiliki banyak format dan yang paling sering dipakai adalah HTML, CSS, JavaScript dan juga jQuery.
Untuk memasang di hosting berbayar atau website, mungkin tidak terlalu sulit. Karena tinggal kamu upload file CSS & JS ke hosting dan memanggil di HTML untuk menampilkannya.

Nah, bagamana jika kita ingin memasang di posting blogger? tentu kita membutuhkan coding untuk memasukan semua kode dalam satu posting tanpa merubah coding yang ada di template agar tidak terjadi error.
Tutorial bangethz ini mungkin sudah banyak yang paham caranya, bagi kamu yang belum mengerti & paham cara memasangnya mari kita lanjutkan.

Kerangka Dasar HTML

Untuk menampilkannya kita akan membuat kerangkanya terlebih dahulu & membutuh beberapa tag pembantu :

<html> -- Menyatakan pada browser bahwa file yang digunakan adalah HTML
<style> -- Tag untuk kode CSS
<script> -- Tag untuk kode JavaScript
<body> -- Tag untuk menampilkan isi file di HTML

Inilah tag-tag yang kita butuhkan untuk membuat kerangka HTML, mari kita susun dengan memberikan penutup setiap tag tersebut, seperti dibawah ini:

<html>
<style> --CSS-- </style>
<body> --FILE HTML--
<script> --JS-- </script>
</body>
</html>

Cara memasangan CSS

Gunakan tag <style> untuk pembungkus kode CSS & ditutup dengan </style>
Sebagai contoh, bangethz akan membuat widget HTML filter List:

LIVE DEMO

kode CSS nya seperti ini:

* {
box-sizing: border-box;
}

#ethzin {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 50%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}

#ethzUL {
list-style-type: none;
padding: 0;
margin: 0;
width: 50%;
}

#ethzUL li a {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}

#ethzUL li a.header {
background-color: #e2e2e2;
cursor: default;
}

#ethzUL li a:hover:not(.header) {
background-color: #eee;
}

Untuk meletakkan di postingan, kita akan menambah tag tepat di atas CSS dan di penutup tagnya di bawah CSS, Seperti ini (tag bangethz beri warna orange):

<style>
* {
box-sizing: border-box;
}

#ethzin {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 50%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}

#ethzUL {
list-style-type: none;
padding: 0;
margin: 0;
width: 50%;
}

#ethzUL li a {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}

#ethzUL li a.header {
background-color: #e2e2e2;
cursor: default;
}

#ethzUL li a:hover:not(.header) {
background-color: #eee;
}
</style>

Selesai untuk CSS, lanjut ke HTML

Cara memasang HTML

Untuk kode HTML kita buat tag <body> dan di akhir kode HTML kita beri penutup tag </body>
Posisi: di bawah kode penutup CSS </style>

<h2>Bangethz - Tabel Filter List</h2>

<input type="text" id="ethzin" onkeyup="myFunction()" placeholder="Cari berdasarkan nama.." title="Type in a name">

<ul id="ethzUL">
<li><a href="#" class="header">A</a></li>
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>

<li><a href="#" class="header">B</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>

<li><a href="#" class="header">C</a></li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Christina</a></li>
<li><a href="#">Cindy</a></li>
</ul>

Berikut hasil pemasangan yang baru kita buat (CSS & HTML), kode tag CSS orange & HTML biru

<style>
* {
box-sizing: border-box;
}

#ethzin {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 50%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}

#ethzUL {
list-style-type: none;
padding: 0;
margin: 0;
width: 50%;
}

#ethzUL li a {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}

#ethzUL li a.header {
background-color: #e2e2e2;
cursor: default;
}

#ethzUL li a:hover:not(.header) {
background-color: #eee;
}
</style>
<body>
<h2>Bangethz - Tabel Filter List</h2>

<input type="text" id="ethzin" onkeyup="myFunction()" placeholder="Cari berdasarkan nama.." title="Type in a name">

<ul id="ethzUL">
<li><a href="#" class="header">A</a></li>
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>

<li><a href="#" class="header">B</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>

<li><a href="#" class="header">C</a></li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Christina</a></li>
<li><a href="#">Cindy</a></li>
</ul>
</body>

Selesai....ups belum bro, kita belum memasang JavaScript & tag html untuk finishingnya.

Cara memasang JavaScript dan Finishing

JS atau JavaScript kita buat tag <script> dan seperti sebelumnya, di akhiri dengan </script>
Posisi: letakan dibawah kode HTML yang kita buat atau di atas tag </body>

function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("ethzin");
    filter = input.value.toUpperCase();
    ul = document.getElementById("ethzUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";

        }
    }
}

Hasil setelah diberi tag seperti ini dengan tag warna kuning

<script>
function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("ethzin");
    filter = input.value.toUpperCase();
    ul = document.getElementById("ethzUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";

        }
    }
}
</script>

Mari kita selesaikan semua coding dengan memberi pembuka <html> dan penutup </html>
Posisi: <html> letakan paling atas atau diatas tag <style> dan untuk penutupnya </html> letakkan paling akhir atau dibawah tag </script>
Dan inilah hasil akhir yang kita buat:

<!DOCTYPE html>
<html>
<style>
* {
box-sizing: border-box;
}

#ethzin {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 50%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}

#ethzUL {
list-style-type: none;
padding: 0;
margin: 0;
width: 50%;
}

#ethzUL li a {
border: 1px solid #ddd;
margin-top: -1px; /* Prevent double borders */
background-color: #f6f6f6;
padding: 12px;
text-decoration: none;
font-size: 18px;
color: black;
display: block
}

#ethzUL li a.header {
background-color: #e2e2e2;
cursor: default;
}

#ethzUL li a:hover:not(.header) {
background-color: #eee;
}
</style>
<body>
<h2>Bangethz - Tabel Filter List</h2>

<input type="text" id="ethzin" onkeyup="myFunction()" placeholder="Cari berdasarkan nama.." title="Type in a name">

<ul id="ethzUL">
<li><a href="#" class="header">A</a></li>
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>

<li><a href="#" class="header">B</a></li>
<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>

<li><a href="#" class="header">C</a></li>
<li><a href="#">Calvin</a></li>
<li><a href="#">Christina</a></li>
<li><a href="#">Cindy</a></li>
</ul>
<script>
function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("ethzin");
    filter = input.value.toUpperCase();
    ul = document.getElementById("ethzUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";

        }
    }
}
</script>
</body>
</html>

Publlikasikan posting masih dalam penulisan HTML (bukan compose) agar tidak terjadi error atau tampilan yang berantakan. untuk melihat hasil kamu bisa lihat di:

LIVE DEMO

Cara Memasang Coding di Blog

Kerangka Dasar HTML

Cara memasangan CSS

Cara memasang HTML

Cara memasang JavaScript dan Finishing