ads

Filter Search (Logic Only)

Versi 1 (Untuk Pemahaman) :
<!DOCTYPE html>
<html>
<body>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<style>
#row{padding:5px 0}
</style>

<!-- List Label -->
<div id='row'>
<div>Genre</div>
  <input id='Action' type='checkbox' value="Action"/>
  <label for='Action'>Action</label>
    <input id='Adventurer' type='checkbox' value="Adventurer"/>
  <label for='Adventurer'>Adventurer</label>
</div>
<div id='row'>
<div>Status</div>
  <input id='Ongoing' type='checkbox' value="Ongoing"/>
  <label for='Ongoing'>Ongoing</label>
    <input id='Completed' type='checkbox' value="Completed"/>
  <label for='Completed'>Completed</label>
</div>
<button>Search</button>

<!-- Hasil -->
<div id='res'></div>

<script>
var loc = 'https://zeistmanga-bt.blogspot.com'; // Alamat Situs bisa diubah dengan = window.location.protocol + '//' + window.location.hostname
var num = '5'; // Jumlah Yang ditampilkan

$('button').click(function(){
var o = [];

// List Label jika kondisi checked terpenuhi
if(document.getElementById('Action').checked){
o.push(document.getElementById('Action').value);
}
if(document.getElementById('Adventurer').checked){
o.push(document.getElementById('Adventurer').value);
}
if(document.getElementById('Ongoing').checked){
o.push(document.getElementById('Ongoing').value);
}
if(document.getElementById('Completed').checked){
o.push(document.getElementById('Completed').value);
}

// Executor
document.getElementById('res').innerHTML = loc + '/search/label/' + o.join('+') + '?&max-results=' + num; // ubah script inner menjadi window.open, contoh window.open(loc + '/search/label/' + o.join('+') + '?&max-results=' + num) agar saat di click lgsg menuju ke link yg diminta
});
</script>
</body>
</html>
Versi 2 (Untuk Operasional) :
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<input class='genre' id='genre1' type='checkbox' value='Adventurer'/>
<label for='genre1'>Adventurer</label>
<input class='genre' id='genre2' type='checkbox' value='RPG'/>
<label for='genre2'>RPG</label>
<input class='genre' id='genre3' type='checkbox' value='FPS'/>
<label for='genre3'>FPS</label>
<input class='genre' id='genre4' type='checkbox' value='MMORPG'/>
<label for='genre4'>MMORPG</label>
<input class='genre' id='genre5' type='checkbox' value='Action'/>
<label for='genre5'>Action</label>
<input class='btn' type='submit'/>
<div id='result'></div>
<script>
var num = 5;
var newtab = true;
$('.btn').click(function(){
var validator = document.getElementsByClassName('genre');
var o = [];
for(var i=0;i<validator.length;i++){
   if(validator[i].checked){
    o.push(validator[i].value)
	}
}
window.open(location.protocol+ '//' + location.hostname + '/search/label/' + o.join('+') + '?&max-results=' + num, newtab == true ? '_blank' : '_self');
});
</script>

Cara Menggunakan Source Code

CSS tempat nya di dalam tag <style> atau <b:skin>. Contoh:

<style>
  /* CSS tempel di sini */
</style>
Javascript biasa nya di letakkan di atas tag </body> Contoh:

<script type='text/javascript'>/*<![CDATA[*/
  //Tempel Disini Script nya.
/*]]>*/</script>
</body>
HTML terserah mau pasang di mana. mau di template atau postingan terserah.
0