Tutorial buat Script Bucin HTML Terbaru Gampang
Hallo kawan EvilicaCell bertemu lagi dengan saya admin dari situs tutorial paling work didunia ini, di kesempatan kali ini saya akan share cara membuat script bucin format HTML bisa dibuat dari HP ataupun laptop yang cocok untuk ngajak balikan mantan, nembak gebetan, minta maaf dan lain-lain.
Kenapa saya bilang bisa untuk ngajak balikan mantan, nembak gebetan dan lain-lain? karena script bucin yang saya buat disini fleksible banget gan, bisa kita ubah kata-kata ataupun kalimat nya sesuka hati, dan lebih keren nya lagi, bisa bisa pasang foto atau animasi apa saja. Jadi script dan tutorial ini dijamin fleksible cocok untuk segala tujuan h3h3..
Oke langsung saja, lalu bagaimana cara membuat script bucin HTML versi terbaru dari EvilicaCell? simak artikel ini sampai akhir dan tolong jangan malas untuk membaca agar tidak gagal paham.
Tutorial membuat script nembak gebetan ini sebenarnya sudah pernah saya share di artikel sebelum nya, akan tetapi script nembak gebetan versi sebelum nya kurang responsive di tampilan mobile, oleh karena itu saya sudah modifikasi se responsive mungkin untuk tampilan mobile dan sedikit saya tambahkan script agar terlihat lebih keren lagi.
Cara membuat script bucin HTML ini sudah saya coba dan berhasil untuk segala perangkat, bisa di laptop, PC ataupun HP smartphone. Dan untuk bukti sekaligus mempermudah memahami cara buat script bucin versi mobile, saya akan sertakan video tutorial di akhir artikel.
Tutorial Buat Script Bucin HTML Terbaru 2024 Keren Gampang:
- Pertama yang harus kalian lakukan adalah > buka notepad pada Windows kalian bisa ketik langsung notepad di start menu Windows > lalu klik Run as administrator
- Buat kode pertama yaitu <html> untuk kode pembuka dan </html> untuk kode penutup, maka hasil nya akan seperti ini
- Selanjutnya buat kode <head> pembuka dan penutup, dan buat kode
<body> pembuka dan menutup di tengah-tengah antara kode
<html> membuka dan kode </html> menutup. Maka hasilnya akan
seperti ini
<html>
<head>
</head>
</html> - Selanjutnya kita buat kode body yang berfungsi sebagai kanvas yang ada di tengah layar, masukan kode <body> dan penutup nya </body> lalu ketik dibawah kode </head> maka hasilnya akan seperti ini
<html>
<head>
</head>
<body>
</body>
</html> - Selanjutnya masukan script <meta name="viewport" content="width=device-width, initial-scale=1"> dibawah kode <head> maka hasilnya akan seperti ini
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
</html> - Selanjutnya untuk menambahkan kode style agar responsive di tampilan mobile, kalian bisa masukan kode berikut dibawah kode <meta name
<style>
div.example {
padding: 20px;
}
@media screen and (min-width: 601px) {
div.example {
font-size: 50px;
}
}
@media screen and (max-width: 600px) {
div.example {
font-size: 25px;
}
}
</style> - Selanjutnya kalian bisa masukan kode berikut <div class="example"><h2><font color="red"><marquee>Hallo sayang, apa kabar?</marquee></font></h2> didalam kode <body> maka hasilnya akan seperti ini
<html>
<head>
</head>
<body>
<div class="example"><h2><font color="red"><marquee>Hallo sayang, apa kabar?</marquee></font></h2>
</body>
</html> - Perhatikan kode red diatas tadi, itu adalah kode warna, jadi jika kalian ingin ganti menjadi warna lain, silahkan ganti sesuka hati, contoh blue, black atau yang lain. Dan perhatikan kalimat berwarna biru, kalian bisa ganti dengan kalimat atau pertanyaan lain.
- Selanjutnya kita masukan kode gambar dengan cara copy kode ini dan paste dibawah kode <div class="example"
<img alt="background-image" src="https://yt3.ggpht.com/ytc/AMLnZu8AC5rZyKtuLgyM_lqfCtHFkCscIpG_IB8Pa72S=s900-c-k-c0x00ffffff-no-rj" height="200" />
- Perhatikan kode yang berwarna merah, itu adalah URL atau link gambar, jadi jika kalian mau ganti dengan gambar lain atau foto lain, kalian tinggal copy paste saja URL (link) nya.
- Perhatikan kode height="200", kode ini adalah ukuran besar gambar nya, jadi jika kalian ingin gambar nya lebih besar, maka ubah angka 200 jadi lebih besar, contoh 300 atau 400
- Selanjutnya kita buat kalimat atau pertanyaan, copy kode berikut dan paste dibawah kode <img alt
<p>Ini adalah kalimat atau pertanyaan nya</p>
lalu akhiri dengan kode </div> untuk penutup dari kode <div class="example" tadi, maka hasilnya akan seperti ini:<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
padding: 20px;
}
@media screen and (min-width: 601px) {
div.example {
font-size: 50px;
}
}
@media screen and (max-width: 600px) {
div.example {
font-size: 25px;
}
}
</style>
</head>
<body>
<div class="example"><h2><font color="red"><marquee>Hallo sayang, apa kabar?</marquee></font></h2>
<img alt="background-image" src="https://yt3.ggpht.com/ytc/AMLnZu8AC5rZyKtuLgyM_lqfCtHFkCscIpG_IB8Pa72S=s900-c-k-c0x00ffffff-no-rj" height="200" />
<p>Ini adalah kalimat atau pertanyaan nya</p>
</div>
</body>
</html> - Perhatikan kata atau kalimat pertanyaan diatas yang berwarna merah, kalian bisa ganti dengan kata-kata sendiri dan untuk kodee </div> biarkan saja secara default.
- Selanjutnya kita buat tombol jawaban negative dan tombol jawaban positive, caranya copy kode berikut dan pasti di bawah kode </div> penutup.
<div id="By" style="position:absolute; left:64px; top:510px; width:210px;
height:210px;">
<input type="button" value=" Iya boleh " onClick="f1()" />
</div>
<div ID="Bn" style="position:absolute; left:166px; top:510px; width:210px; height:210px;">
<input type="button" value=" ih noo " onMouseOver="f()" />
</div> - Perhatikan kode value yang berwarna merah, kalian bisa ganti dengan kata jawaban positive dan jawaban negative
- Selanjutnya kita buat JavaScript nya dengan cara copy kode berikut dan paste dibawah kode </style> penutup.
<script type="text/javascript">
flag=1
function f1()
{
alert("Makasih ya")
alert("Berarti skrg kita balikan ya")
alert("Aku sayang kamu")
window.location = "https://wa.me/6287xxxxxxxxxx?text=iya%20aku%20sayang%20kamu";
}
function f()
{
if(flag==1)
{
Bn.style.top=600
Bn.style.left=300
flag=2
}
else if(flag==2)
{
Bn.style.top=600
Bn.style.left=50
flag=3
}
else if(flag==3)
{
Bn.style.top=510
Bn.style.left=166
flag=1
}
}
</script> - Perhatikan kode berwarna merah, kalian ganti dengan nomor WhatsApp kalian, agar setelah si target klik tombol jawaban positive akan otomatis chat ke nomor WhatsApp kalian, lalu perhatikan kata berwarna biru, kalian bisa ganti dengan kata-kata lain.
- Untuk kode alert di step 16 yang berwarna hijau, kalian bisa ganti dengan kata lain, ini berfungsi untuk kata jika target mengklik tombol jawaban positive.
Perhatikan step ke 16 dengan kode alert, itu adalah notifikasi pada browser jika si target klik tombol jawaban positive, jika kalian ingin notifkasi nya lebih banyak, kalian bisa cek artikel berikut "cara buat kode Pop Up berkali-kali"
Oke sampai tahap ini kalian sudah berhasil membuat script bucin responsive di tampilan mobile ataupun desktop, selanjutnya kalian bisa berkreasi sesuka hati dengan mengganti link gambar atau kalimat & kata lain.
Jika kalian adalah orang pemalas dan ingin copy paste secara keseluruhan, kalian bisa copy kode dibawah berikut lalu paste di notepad dan save as lalu beri format HTML agar file menjadi format HTML.
<html>Untuk mempermudah memahami cara membuat script bucin, kalian bisa tonton video tutorial dibawah berikut: (video dibawah ini juga sebagai bukti kalau script bucin HTML ini sudah saya coba dan berhasil)
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div.example {
padding: 20px;
}
@media screen and (min-width: 601px) {
div.example {
font-size: 50px;
}
}
@media screen and (max-width: 600px) {
div.example {
font-size: 25px;
}
}
</style>
<script type="text/javascript">
flag=1
function f1()
{
alert("Makasih ya")
alert("Berarti skrg kita balikan ya")
alert("Aku sayang kamu")
window.location = "https://wa.me/6287xxxxxxxxxx?text=iya%20aku%20mau%20balikan%20sama%20kamu";
}
function f()
{
if(flag==1)
{
Bn.style.top=700
Bn.style.left=300
flag=2
}
else if(flag==2)
{
Bn.style.top=700
Bn.style.left=50
flag=3
}
else if(flag==3)
{
Bn.style.top=610
Bn.style.left=166
flag=1
}
}
</script>
</head>
<body>
<div class="example"><h2><font color="red"><marquee>Hallo sayang, apa kabar?</marquee></font></h2>
<img alt="background-image" src="https://yt3.ggpht.com/ytc/AMLnZu8AC5rZyKtuLgyM_lqfCtHFkCscIpG_IB8Pa72S=s900-c-k-c0x00ffffff-no-rj" height="200" />
<p>Ini adalah kalimat atau pertanyaan nya</p>
</div>
<div id="By" style="position:absolute; left:64px; top:610px; width:210px;
height:210px;">
<input type="button" value=" Iya boleh " onClick="f1()" />
</div>
<div ID="Bn" style="position:absolute; left:166px; top:610px; width:210px; height:210px;">
<input type="button" value=" ih noo " onMouseOver="f()" />
</div>
</body>
</html>
Bagi kalian yang ingin benar-benar belajar coding, kalian bisa simak artikel "cara dasar edit template blog dengan metode inspect element" untuk penjelasan dan tutorial nya.
Oke mungkin sekian tutorial cara membuat script bucin HTML untuk tampilan mobile atau HP dari EvilicaCell, jika masih ada yang bingung atau kesulitan kalian bisa komentar dibawah dan silahkan subscribe channel YouTube EvilicaCell untuk mendapatkan update seputar tutorial lain-nya.
Jika ada yang bingung atau ingin di tanyakan, komentar aja gan h3h3
BalasHapusiya bang, h3h3
Hapus