Kumpulan Kode HTML Dan Java Script Untuk Mempercantik Tampilan Artikel & Blog
 |
| Ilustrasi gambar Coding HTML dan Java Script |
Hello guys..
Ini adalah postingan pertama saya yang membahas tentang bloger. Maka pada kesempatan kali ini, saya akan mencoba berbagi beberapa kumpulan kode HTML dan Java Script untuk menghias/mempercantik tampilan artikel maupun blog kita.
Label dari artikel ini juga akan saya gunakan sebagai arsip jikalau merasa lupa dikemudian hari tentang apa yang telah saya pelajari secara otodidak selama berkecimpung di dunia bloger khususnya platform Blogspot.
Mungkin memang sudah menjadi hobby dan untuk melepaskan semua kegalauan sebagai jomblo yang ngenes ini 😥 eh.. bloger pemula maksudnya, maka hal pertama yang akan kita lakukan untuk mempublikasikan sebuah blog, tentunya adalah memperbaiki tampilan blog terlebih dahulu bukan guys?
Lucunya pengalaman pertama saat belajar mengotak-atik kode, saya sering kebingungan bersama dengan kegalauan yang hakiki.. hanya untuk sekedar mengedit sana-sini agar tampilan blog sesuai dengan apa yang kita inginkan.
Jadi bisa dibilang Coding HTML yang dipadukan dengan Java Script dan CSS adalah kegiatan yang lumayan menggalaukan,,, eh.. mengasyikan 😅
Kode-kode HTML dan Java Script yang akan saya bagikan di bawah ini hanyalah sebuah kode sederhana yang sengaja saya kumpulkan tanpa perlu melakukan pengeditan CSS karena template bawaan standar Blogspot maupun template premium sudah mendukung syntax penulisan kode tersebut.
Hanya saja fungsi-fungsinya atau opsinya yang belum disediakan oleh pengeditan standar pada Blogspot saat ini karena sifatnya yang memang terbatas.
Agak sedikit berbeda tentunya bagi pengguna Wordpress yang disediakan fitur lebih banyak, seperti penggunaan plugin yang bisa kita manfaatkan untuk kustomisasi.
Baca juga : INTRODUCE MY SELF (TESTING !)
Dan untuk penulisan kode yang harus melakukan pengeditan HTML pada CSS template yang kita gunakan, mungkin akan saya sharing per artikel kedepannya.
Baiklah mari kita simak pembahasannya berikut ini:
- Membuat Tombol ( BUTTON )
Silahkan salin kode di bawah ini:
<button>Teks Kamu</button>
Tampilan tombol di atas akan berbeda bentuk, warna dan modelnya tergantung dari CSS yang kita gunakan pada template blog ya guys,.
Jika ingin menyisipkan link pada tombol tersebut, maka caranya tinggal kita blok teks pada tombol tadi, kemudian klik opsi insert link yang sudah disediakan di tool bar blogspot dengan tampilan icon rantai.
- Membuat Teks Berjalan (MARQUEE)
Silahkan salin code di bawah ini:
<marquee>I Love U 💔</marquee>
Teksnya bisa kita ganti sesuai dengan keinginan dan apabila ingin merubah arah dan durasi gerakannya, bisa kita edit dengan menggunakan kode berikut ini:
<marquee direction="right" scrollamount="3">But She Don't Love Me 😢</marquee>
Pada contoh penulisan kode di atas bisa kita edit pada pilihan direction menjadi:
👉 right (Teks akan bergerak ke kanan)
👈 left (Teks akan bergerak ke kiri)
👇 down (Teks akan bergerak ke bawah)
👆 up (Teks akan bergerak ke atas)
Kemudian pada keterangan scroll amount merupakan angka dari durasi gerakannya yang dapat kita sesuaikan juga.
Maka dari contoh script di atas hasilnya akan muncul seperti di bawah ini:
Membuat teks menggunakan background warna dan bergerak bolak-balik dari kanan kekiri berulang dengan gerakan yang lambat, maka kodenya seperti di bawah ini:
<marquee bgcolor=yellow behavior=alternate scrolldelay=280>Aku Galau 😞</marquee>
- Membuat Teks Anti Copy Paste
Sebuah kode Java Script yang menonaktifkan blok teks. Artinya kita tidak dapat melakukan blok area secara langsung untuk sebuah teks saat akan melakukan penyalinan artikel pada blog atau website yang kita kunjungi, apabila sudah dipasangi kode seperti dibawah ini:
<script type="text/javascript">
//form tags to omit in NS6+:
var omitformtags=["input", "textarea", "select"]
omitformtags=omitformtags.join("|")
function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
return false
}
function reEnable(){
return true
}
if (typeof document.onselectstart!="undefined")
document.onselectstart=new Function ("return false")
else{
document.onmousedown=disableselect
document.onmouseup=reEnable
}
</script>
//form tags to omit in NS6+:
var omitformtags=["input", "textarea", "select"]
omitformtags=omitformtags.join("|")
function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
return false
}
function reEnable(){
return true
}
if (typeof document.onselectstart!="undefined")
document.onselectstart=new Function ("return false")
else{
document.onmousedown=disableselect
document.onmouseup=reEnable
}
</script>
- Membuat Kode Script Anti Klik Kanan
Kode Java Script yang akan menampilkan sebuah peringatan saat kita melakukan klik kanan mouse pada sebuah artikel blog maupun website, dengan menggunakan kode seperti di bawah ini:
<script language=JavaScript>
<!--
//
var message="ganti tulisan ini dengan pesan Kita";
///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false")
// -->
</script>
<!--
//
var message="ganti tulisan ini dengan pesan Kita";
///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false")
// -->
</script>
- Membuat Notifikasi Alert (Peringatan)
Copy kode di bawah ini dan ganti tulisan yang saya tandai berwarna hijau sesuai dengan keinginan, maka nanti akan memunculkan kotak dialog (text box) yang berisi sebuah peringatan yang telah diseting saat seseorang membuka halaman pada blog kita:
<body onLoad="alert('Wellcome Guys!!! Selamat Datang Di Blog Yang Galau ini 😘');"></body>
<body onUnLoad="alert('Mau Kemana? Jangan Tinggalin Aku dong !!! 😑');"></body>
Jika link yang telah kita sisipkan menggunakan kode di bawah ini maka saat diklik akan muncul sebuah peringatan berupa kotak dialog di bawah adress Bar pada browser:
<a href="http://labalabawirata.com"onClick="alert('Ayok Masuk Guys.. Klik Ok Yup!!'); return true">Labalaba Wirata</a>
.png "Onclick Link") |
| Contoh gambar Text Box Onclick Link |
Kode-kode yang telah saya bagikan di atas dapat diaplikasikan langsung pada artikel-artikel kita melalui pengeditan < > HTML View.
Atau kita juga dapat menggunakannya pada bagian-bagian navigasi blog seperti pada Side Bar, Menu Bar, atau pada Footer dan sebagainya, dengan cara menambahkan Gadget pada menu Tata Letak (Layout) di Blogspot.
Bagimanakah caranya?
- Pertama masuk terlebih dahulu pada tampilan menu blogspot kita,
- Pilih Tata Letak/Layout
- Pilih dibagian mana kira-kira kita akan menggunakannya (sebagai contoh saya akan memasang script pada Side Bar/menu samping)
- Klik edit atau + Add a Gadget
- Pilih HTML/JavaScript
- Isikan Title/Judul, atau dikosongkan juga boleh tergantung dari kode yang akan kita digunakan
- Isikan kode script pada kolom Content
- Klik save
Untuk lebih jelasnya, silahkan lihat gambar di bawah ini sesuai dengan urutan nomer seperti langkah-langkah yang saya sebutkan di atas
.png "Layout Blogspot") |
| Contoh Gambar Pengaturan Layout Blogspot |
.png "Gadget Blogspot") |
| Contoh gambar add Gadget Blogspot |
.png "Gadget HTML/JavaScript Blogspot") |
| Contoh gambar Pengeditan Gadget HTML/JavaScript Blogspot |
Langkah terakhir adalah kita harus mengklik simpan kembali pada tombol save yang ada di pojok kanan bawah halaman Layout seperti gambar di bawah ini untuk menyimpan perubahan.
.png "Layout Blogspot") |
| Contoh gambar pengaturan Layout Blogspot |
Kemudian coba kita lihat hasilnya dengan mengklik tombol icon mata disamping tombol save, atau langsung saja mengunjungi alamat blog kita pada tab/halaman baru di browser.
Ok guys.. setelah asyik bermain kode untuk si dia 🙊 eh kumat lagi kan... 😌
Sebenarnya masih banyak lagi kode-kode HTML dan Java Script lainnya yang dapat kita gunakan, terutama yang memerlukan pengeditan CSS pada template blog dan mungkin akan saya update pada artikel-artikel berikutnya.
👉 Note:
Penggunaan Java Script yang berlebih dapat mempengaruhi kecepatan loading dan SEO halaman dari blog kita. Jadi sebaiknya pertimbangkan terlebih dahulu untuk menggunakan banyak kode dan pergunakanlah dengan secukupnya.
Mungkin cukup sekian yang dapat saya bagikan dari Kumpulan Kode HTML Dan Java Script Untuk Mempercantik Tampilan Artikel & Blog, semoga dapat bermanfaat dan terima kasih atas kunjungannya 🙏
Selamat bercoding ria guys.. 😊
.png)
Komentar
Posting Komentar