Cara Membuat Background Efek Petir

Aditya Nugraha Cyber

Rabu, 14 Januari 2015

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 :

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/AVvXsEiq9nsMWPMglrWGmELTs3Ges0Y2r8vYLvtxtoFK9EXpnuIpjeBVnrTxmtUNPy6VtjoXQk6HZrHFBtBI6K1kBft905rL2pQnEF8lM7YZBKoK9cHgIvN6uk14K5zIi0T8SADfz7R3yEIxj3w/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/AVvXsEiq9nsMWPMglrWGmELTs3Ges0Y2r8vYLvtxtoFK9EXpnuIpjeBVnrTxmtUNPy6VtjoXQk6HZrHFBtBI6K1kBft905rL2pQnEF8lM7YZBKoK9cHgIvN6uk14K5zIi0T8SADfz7R3yEIxj3w/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/AVvXsEg_uA30Sd5ycoK5oux6mAT0Jq5e-JLFcZm-9eH8vXerJIDfyg7wqbebm5HwkEXhP7nhMFRNsHJPsAPsTsNw0TTUlP6H0jV6FyChXoCqVw1fKdC03kahdLyMIGLqvWgzkkV2FYQhtg8rUO8/s1600/MonozCore_Petir2.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX0I1OChoJwVgiQqehHcNRZAUXCFoHyLi_I3Hih5jp2h34-pTLXnOnYaLvX3ZwTOBtuqg1gaA5zOkBrmhT4RpGMOtVRHlSV9ayIvBABmbh8bqgN-pCuw7R0sLkVB1qV8Q93lfgeIp-Wto/s1600/MonozCore_Petir3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq9nsMWPMglrWGmELTs3Ges0Y2r8vYLvtxtoFK9EXpnuIpjeBVnrTxmtUNPy6VtjoXQk6HZrHFBtBI6K1kBft905rL2pQnEF8lM7YZBKoK9cHgIvN6uk14K5zIi0T8SADfz7R3yEIxj3w/s1600/monozcore_petir.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvg2z1EtQ9aRw3Rb2mlKTITeFdyiT7sujddMM2_3z4uJVwNuP_dAC7XMYOypA2XFjEkyBRNyAdKLs0emiKF8TVLe14JyozkpXHtMCNWYxx9gX8CCCjF9wmfENaUkuXbSQuxw0hsafU4eI/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...

0 Comments

Peraturan Berkomentar :

√ Jangan berkomentar berbau SARA ( Suku, Agama, Ras, AntarGolongan ).
√ Berkomentar sesuai topik.
√ Komentar yang melanggar peraturan akan dihapus dan dianggap sebagai spam.
√ Anda boleh copy paste artikel tersebut, asalkan disertakan link artikel tersebut karena artikel dari blog renaldyways.blogspot.com sudah memiliki hak cipta google dan dipantau oleh DMCA.
√ Anda dapat berkomentar dengan link aktif asalkan, sebelumnya sudah melakukan perjanjian tukar link.

Tambahan :

√ Untuk berkomentar dengan Emoticon, silahkan klik tombol "Emoticon" dan copy dan paste kodenya di form komentar.
√ Untuk menyisipkan script, Anda bisa menggunakan fasilitas konversi kode di bawah.
√ Untuk menyisipkan gambar copy script Tulis URL gambar di sini dan jangan lupa tambahkan URL gambarnya.

Terima Kasih

Kang Aditya ^_^

Konversi KodeTutup Konverter!Out Of Topic Emoticon

Terima kasih telah berkomentar