Header Ads

  • Kumpulan JavaScript Unik Paling Dicari Pengguna Blogger



    Berbicara tentang blog tidak hanya mengenai content dan SEO, akan tetapi tampilan blog yang unik dengan hiasan menarik juga perlu dipertimbangkan sebagai acuan dalam mengelola halaman blog. Content memang yang utama, SEO juga merupakan sebuah keharusan, tetapi yang tidak kalah pentingnya adalah membuat tampilan blog yang unik dan menarik. Widget dan dekorasi pada sebuah blog merupakan sebuah trik untuk bisa membuat pengunjung blog anda menjadi betah.

    Ada banyak jalan menuju ROMA, begitupula jika kita berbicara mengenai dekorasi pada halaman blog, ada banyak trik yang bisa anda terapkan. Tapi harus diingat pula jangan sampai dekorasi yang anda terapkan menggangu tampilan konten blog yang anda buat. Satu trik dari sekian banyak dekorasi pada halaman blog adalah menggunakan kode JavaScript untuk membuat efek animasi ringan dan tidak membebankan performa browser pengunjung. Jika kebetulan anda sedang mencari referensi tentang dekorasi (hiasan) pada halaman blog maka anda beruntung telah sampai pada artikel ini.

    Pada artikel ini saya akan share beberapa script hasil blogwalking, tweaking dan modifikasi agar script bisa berfungsi dengan baik diberbagai perangkat jaman now. Kumpulan script ini boleh dibilang merupakan script yang paling banyak dicari dan susah didapat.

    Mengapa paling dicari ?
    Kumpulan script ini memiliki tampilan efek animasi yang unik dan menarik sehingga akan membuat tampilan blog anda menjadi dinamis dan atraktif. Selain unik kumpulan script ini merupakan script jadul sehingga tidak akan memberatkan performa browser pengunjung baik untuk perangkat mobile maupun perangkat PC.

    Mengapa susah didapat ?
    Kumpulan script ini merupakan script jadul, jadi susah untuk mencari script yang masih bisa berfungsi di browser modern (tanpa modifikasi kode) karena para pengguna blogger karbitan yang men-share script-script ini pada konten artikelnya sudah tidak pernah diupdate lagi, bahkan kebanyakan blog karbitan tersebut sudah mati suri namun masih eksis pada mesin pencari google.

    Saya heran koq cuma hasil copy-paste artikel blog karbitan bisa masuk ke database mesin pencari google, sedangkan pembuat konten aslinya malah tidak ter-index oleh google. Memang aneh bin ajaib si mbah google. Oke siap, buat yang sedang berburu script unik dan menarik silakan disimak informasinya.

    Informasi Singkat
    ECMAScript (atau ES) adalah spesifikasi bahasa scripting yang distandarisasi oleh Ecma International di ECMA-262 dan ISO / IEC 16262. Ini dibuat untuk menstandardisasi JavaScript untuk membantu mendorong beberapa implementasi independen. JavaScript tetap menjadi implementasi ECMAScript yang paling terkenal sejak standar pertama kali diterbitkan, dengan implementasi terkenal lainnya termasuk JScript dan ActionScript. ECMAScript umumnya digunakan untuk skrip sisi klien di World Wide Web, dan semakin banyak digunakan untuk menulis aplikasi dan layanan server menggunakan Node.js.

    Spesifikasi ECMAScript adalah spesifikasi terstandarisasi dari bahasa scripting yang dikembangkan oleh Brendan Eich dari Netscape; awalnya ECMAScript bernama Mocha, kemudian LiveScript, dan akhirnya JavaScript. Pada Desember 1995, Sun Microsystems dan Netscape mengumumkan JavaScript dalam siaran pers. Pada November 1996, Netscape mengumumkan pertemuan organisasi standar Ecma International untuk memajukan standarisasi JavaScript. Edisi pertama ECMA-262 diadopsi oleh Majelis Umum Ecma pada Juni 1997. Beberapa edisi standar bahasa telah diterbitkan sejak saat itu. Nama "ECMAScript" adalah hasil pertemuan antara organisasi yang terlibat dalam standardisasi bahasa script, terutama Netscape dan Microsoft, yang berselisih tentang siapa yang mendominasi bahasa script pada sesi standar awal pertemuan. Eich berkomentar bahwa "ECMAScript selalu merupakan nama dagang yang tidak diinginkan yang terdengar seperti penyakit kulit.

    Meskipun JavaScript dan JScript bertujuan untuk kompatibel dengan ECMAScript, keduanya juga menyediakan fitur tambahan yang tidak dijelaskan dalam spesifikasi ECMA.
    Sumber : Wikipedia


    PERINGATAN
    Perhatian ! sebelum melakukan perubahan pada kode HTML template blog, sebaiknya Anda melakukan backup kode HTML template blog terlebih dahulu, dikarenakan untuk menghindari hal-hal yang tidak diinginkan. Apabila terjadi kesalahan prosedur dalam melakukan perubahan kode HTML template blog, maka Anda dapat melakukan proses perbaikan dengan cepat dan mudah.

    Kumpulan script ini bisa dipasang di dalam kode template blog, di dalam kotak widget ataupun di dalam halaman artikel blog. Silakan sesuaikan sendiri untuk lokasi penempatan script di dalam blog anda.


    DAFTAR ISI
    1. Script Efek Gambar Berguguran
    2. Script Efek Turun Salju
    3. Efek Animasi Bintang Jejak Kursor
    4. Efek Hover Anchor Tag Rainbow
    5. Bonus Artikel [Kode Sumber]
    #1 Script Efek Gambar Berguguran


    #1 Script Efek Daun Berguguran
    Script ini menampilkan efek animasi gambar daun yang jatuh berguguran dari atas halaman blog menuju seperempat ke bawah lalu menghilang. Contoh animasi seperti yang terlihat di bawah ini.

    See the Pen Falling Leaf by Code Flare (@CodeFlareBlogspot) on CodePen.



    #2 Script Efek Falling in Love
    Masih sama dengan efek animasi di atas, yang membedakan adalah gambar animasi yang digunakan yaitu menggunakan gambar love berwarna merah. Contoh animasi seperti yang terlihat di bawah ini.

    See the Pen Falling in Love by Code Flare (@CodeFlareBlogspot) on CodePen.



    #3 Script Efek Falling Color Star
    Script ini menampilkan efek animasi bintang kerlap-kerlip dengan dengan warna-warni yang jatuh dari atas halaman blog menuju ke bawah lalu menghilang, apabila warna background halaman blog anda berwarna putih atau terang silakan anda rubah warna latar halaman anda atau silakan anda ganti gambar bintang dengan gambar yang sesuai.

    See the Pen Falling Star by Code Flare (@CodeFlareBlogspot) on CodePen.


    Selain gambar daun, gambar bentuk love dan gambar bintang, anda bisa juga menggunakan gambar lain sesuai dengan pilihan anda, caranya adalah dengan merubah isi variabel URL gambar dengan URL gambar yang akan anda pasang pada script falling image ini.

    Silakan tekan tombol bertuliskan JS pada kotak CODEPEN untuk melihat kode JavaScript kemudian pilih semua (select all) kode script tersebut dan tekan tombol CTRL + C untuk mulai menyalin kode script.

    #2 Script Efek Turun Salju


    #1 Script Efek Turun Salju Ringan
    Script ini menampilkan efek animasi hujan salju (snow) ringan yang jatuh dari atas halaman blog menuju ke bawah lalu menghilang, apabila warna background halaman blog anda berwarna putih atau terang silakan anda rubah warna saljunya agar efek animasi hujan salju bisa terlihat. Contoh animasi seperti yang terlihat di bawah ini.

    See the Pen My Falling Snow by Code Flare (@CodeFlareBlogspot) on CodePen.



    #2 Script Efek Turun Salju Besar
    Script ini menampilkan efek animasi hujan salju (snow) dengan butiran salju agak besar yang jatuh dari atas halaman blog menuju ke bawah lalu menghilang, apabila warna background halaman blog anda berwarna putih atau terang silakan anda rubah warna saljunya agar efek animasi hujan salju bisa terlihat. Contoh animasi seperti yang terlihat di bawah ini.

    See the Pen My Falling SnowStorm by Code Flare (@CodeFlareBlogspot) on CodePen.


    Silakan tekan tombol bertuliskan JS pada kotak CODEPEN untuk melihat kode JavaScript kemudian pilih semua (select all) kode script tersebut dan tekan tombol CTRL + C untuk mulai menyalin kode script.

    #3 Efek Animasi Bintang Jejak Kursor


    Script ini menampilkan efek bintang berjatuhan dan efek bentuk love berjatuhan pada saat mouse saat digerakan di halaman blog atau website. Efek bintang hanya menggunakan karakter ASCII tanpa menggunakan gambar jadi sangat amat ringan di render browser untuk perangkat modern jaman now.

    See the Pen Star Cursor Trail by Code Flare (@CodeFlareBlogspot) on CodePen.



    See the Pen Love Cursor Trail by Code Flare (@CodeFlareBlogspot) on CodePen.


    Silakan tekan tombol bertuliskan JS pada kotak CODEPEN untuk melihat kode JavaScript kemudian pilih semua (select all) kode script tersebut dan tekan tombol CTRL + C untuk mulai menyalin kode script.

    #4 Efek Hover Anchor Tag Rainbow


    #1 Efek Hover Warna Pelangi
    Script ini menampilkan efek pelangi pada saat kursor berada tepat di elemen achor tag [ <a>link</a> ]. Efek hover tersebut merubah warna elemen menjadi warna warni seperti pelangi. Script ini merupakan script jadul jadi sangat amat ringan di render browser untuk perangkat modern jaman now.

    See the Pen My Rainbow Hover Color by Code Flare (@CodeFlareBlogspot) on CodePen.


    Silakan tekan tombol bertuliskan JS pada kotak CODEPEN untuk melihat kode JavaScript kemudian pilih semua (select all) kode script tersebut dan tekan tombol CTRL + C untuk mulai menyalin kode script.

    #2 Efek Hover Kedap-Kedip (Blink)
    Efek hover ini murni hanya menggunakan kode CSS tanpa Javascript. Efek hover tersebut merubah background elemen menjadi warna latar yang kedap-kedip sehingga memiliki efek layaknya lampu disco. Kode ini hanya menggunakan kode CSS standar jadi sangat amat ringan di render browser untuk berbagai perangkat modern jaman now.

    CONTOH 1


    <style>
    a:hover {text-decoration:blink; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Bk47CJT4Ri8cboqMA6rCuWPiX92KGw1jDs8d5CqzxkxVT_0JaRWl1-tIk0sHbYoWK1OHOdye2gSUzG_jppg-yPMaffOCPolPawJyJXGbkP0CdqzlXDyl9wkRoBJ1GNbUEO4UjlQqGw/s1600/blink.gif);}
    </style>

    CONTOH 2


    <style>
    a:hover {text-decoration:blink; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_LUvnQuqvWl48XROsE51Ew49Tu9P4o6pBNwSFEREcnhtD2alPY5GrOgVEAWG7tZF1pRhpzRJZ9hc-qjh7IHUWXtUpTUW8FjZ8VwCwNBXoYUec2h4_l59CU3Au2TvvX4DKI74ndm1gBQ/s1600/str4.gif);}
    </style>

    Kode CSS ini menggunakan gambar animasi dengan format [GIF], apabila anda ingin menggunakan gambar kerlap-kerlip lainnya silakan anda rubah URL gambar animasi tersebut dengan URL gambar anda.


    #5 Bonus Artikel [Kode Sumber]


    Bonus artikel kali adalah eksternal file JavaScript yang saya bagikan melalui link download yang ada di bawah, file tersebut merupakan file dengan format JS yang bisa anda buka menggunakan berbagai aplikasi teks editor, seperti notepad, wordpad, MS Word dan lain sebagainya.

    File script berada didalam file kompresi dengan format ZIP, pastikan anda memiliki aplikasi unzip atau unrar untuk mengekstrak file-file script tersebut. Keterangan file dan password pembuka ada pada keterangan download box di bawah ini. Oke siap, buat yang tertarik silakan di download file script tersebut.



    Keyword


    Javascript, Script, Kode, Unik, Menarik, Kumpulan, Daftar, Effect, Efek, Animasi, Berjatuhan, Image, Gambar, Blog, Blogger, Blogspot, Hover, Anchor, Tag, A, Color, Warna, Pelangi, Kerlap-kerlip, Kedap-kedip, Blink, Disco, Background, Latar, Belakang, Falling, Snow, Storm, Hujan, Salju

    Incoming Search Term


    Cara membuat efek turun salju pada halaman web atau blog, Cara memasang script efek warna pelangi di hyperlink HTML, Efek lampu disko pada elemen A, Efek animasi gambar berjatuhan di halaman web atau blog, Efek gambar love gif berjatuhan, Kumpulan Javascript, Kumpulan Script, Daftar list kode kode unik untuk halaman blogger, script jejak kursor menggunakan karakter huruf, kode sumber javascript unik dan menarik

    1 comment:

    1. Membaca isi artikel ini jadi teringat sekitaran tahun 2014 awal mula mengenal dunia internet, begitu banyak blog baru yang menggunakan efek seperti ini, dan saat itu terlihat sangat menarik sekali, dan banyak peminatnya. Namun sekarang sepertinya tidak ada lagi blog yang menggunakannya.

      ReplyDelete

    Post Top Ad

    Post Bottom Ad