Navigation Menu

Cara Membuat Background Efek Petir

by Aditya Nugraha Cyber 05.18 0 komentar
Background Efek Petir merupakan widget untuk membuat latar belakang Blog atau Website dengan gambar animasi petir. Buat yang hobby memodifikasi blog contohnya seperti saya pasti banyak yang menginginkan background blognya di ganti dengan foto sendiri atau gambar yang mereka inginkan sendiri. Salah satu modifikasi blog adalah dengan memasang background efek petir pada blog yang biasanya untuk mempercantik halaman atau tampilan blog. Efek petir ini menggunakan kode CSS 3 yang sederhana kemudian saya modifikasi sedikit menggunakan javascript untuk mempermudah pemasangannya di Blog. Contoh seperti yang terlihat pada postingan artikel ini apabila tidak terlihat klik disini. Buat yang tertarik memasang widget Background Efek Petir ini di blognya monggo disalin kodenya.

Cara Pemasangan :
  • Login ke blog sobat...

  • Klik "Layouts" selector box kemudian klik "Add a Gadget" setelah itu scroll ke bawah dan pilih "HTML / Javascript" atau bisa juga di taruh di kode Template Blog tepat di bawah kode "<Body>".

  • Copy kode berikut ini di kotak gadget.
    <script type="text/javascript">
var imgUrlLightning = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVBWSX-oGOHn8yQyvX-kLygw7A9-UbCiyQVLwPF1KIYXS7UNj1zlxGuQCv8uiSgJKHIy7K6WhI03cw-Ar1mTWPMVnUedoZaTHUkSQM7V8VjcDGY4kWgomxkKhDN0IzqpCgnGrfCrN567M/s1600/monozcore_petir.gif";
document.write("<style>img.bg{z-index:-1;min-height: 100%;min-width: 1024px;width: 100%;height: auto;position: fixed;top: 0;left: 0;}@media screen and (max-width: 1024px){img.bg{left: 50%;margin-left: -512px;}}<\/style><img src=\""+imgUrlLightning+"\" class=\"bg\"\/>");
</script>
    Keterangan :
    var imgUrlLightning = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVBWSX-oGOHn8yQyvX-kLygw7A9-UbCiyQVLwPF1KIYXS7UNj1zlxGuQCv8uiSgJKHIy7K6WhI03cw-Ar1mTWPMVnUedoZaTHUkSQM7V8VjcDGY4kWgomxkKhDN0IzqpCgnGrfCrN567M/s1600/monozcore_petir.gif";
    Kode yang berwarna biru merupakan alamat URL gambar latar petir yang bisa sobat ganti sesuai dengan keinginan sobat. Saya sediakan empat pilihan gambar animasi petir yang bisa sobat pilih atau sobat bisa menggantinya dengan gambar sendiri.

  • Klik "Save" dan lihat hasilnya...
Pilihan Gambar :

  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0dsqdpj8gJ5K72p46UW-EbGiN9WbR-uOQGocAayXFYGrFzYAu8qcpCIoZzlWSHzdubGzI9OSpVJGhNnTLHbQbelFljKZKELKJY7D-aH1v1EQY0FfyPOifT1YoaZ4nv2t3zxwiklizJ20/s1600/MonozCore_Petir2.gif


  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAoAvwZCAHiBx_MhSHrL-Yht_CezUv112o7bNtuUkPXAcLRL9T_a4ANBExt0jikGmaWB6JX37vuNOT5aMyL4kDq6XJ6JF8ool2qnDpZppB5L3cLEtoj9maXSY1nke8p1IHpTSX44vEr7A/s1600/MonozCore_Petir3.gif


  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVBWSX-oGOHn8yQyvX-kLygw7A9-UbCiyQVLwPF1KIYXS7UNj1zlxGuQCv8uiSgJKHIy7K6WhI03cw-Ar1mTWPMVnUedoZaTHUkSQM7V8VjcDGY4kWgomxkKhDN0IzqpCgnGrfCrN567M/s1600/monozcore_petir.gif


  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhai5AnVVtln3clyccdcbKYN5k8slWuGbXEiJUA6L3R5VvYEN08Ii4IALCk-DzUFc58BjZH7P6cd9MEGXIDJ8h14UB9SDjmo3xYASzaTy1rnl-9kxmPGgVTe8YkAIgqnjR2i7MMX6SCkfY/s1600/MonozCore_Petir4.gif
Oke sobat monozcore jangan lupa kritik dan sarannya yaa biar postingan berikutnya semakin unik dan menarik.. Buat yang masih bingung dengan pemasangan widget ini.. monggo ditanyakan lewat kotak komentar, email, facebook ataupun twitter monozcore... happy blogging...

Lorem ipsum dolor sit amet, cotur acing elit. Ut euis eget dolor sit amet congue. Ut vira codo matis. Sed lacia luctus magna ut sodales lorem.

0 komentar:

Langganan: Posting Komentar (Atom)