Efek Awan Dan Pesawat Terbang di Blog

 


Iseng-iseng jalan ke negeri tetangga, sewaktu blogwalking ehh nemu script unik di blog tersebut. Awalnya sich ga tau mesti di apain nich script namun tiba-tiba dapet ide untuk berkreasi menggunakan script ini dan hasilnya seperti awan dan pesawat yang terlihat pada postingan artikel ini. Gimana sob... kerenkan... kalo blog sobat mempunyai tema tentang traveling, ulasan pesawat terbang atau pun cuma pengen tampilan blognya tampil beda monngo sob di pasang widget ini... Nah buat yang tertarik langsung aja dech ke TKP.

Perhatian !!! Selalu di biasakan untuk memback-up dahulu kode template blog sobat untuk menghindari dari hal-hal yang tidak diinginkan. Untuk pertanyaan, kritik maupun saran silakan tuliskan pada kotak komentar yang terletak di bawah postingan artikel.

Cara Pemasangan :
  • Login ke blog sobat...

  • Klik "Design" kemudian klik "Edit HTML" setelah itu klik centang pada "Expand Widget Templates", seperti gambar dibawah ini.


  • Cari kode <Body> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan taruh di bawah kode <Body> tersebut. Penempatan kode di bawah ini juga bisa ditempatkan sebagai widget sidebar atau upbar.

    <script src='http://code.jquery.com/jquery-1.4.4.min.js' type='text/javascript'></script>
    <style type="text/css">
    #cover-cloud {
    width:100%;
    height:200px;
    position:absolute;
    z-index:100;
    left:0;
    }
    #cloud {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgktgjTaTTo69JS9TDMRWt9n337NJsUm-Is9Ll2tG4pmvM9WAStYrJREaaE4OPkIK9QH17onk9EqmOsFaJO6rrLuVgB17WAcnG0yrZlo5010wES_MjGDzNxTg9jTzT_tj6fnpwRJNHWADs/s1600/cloud1.png) repeat-x 0 0;
    position: absolute;
    width:100%;
    height:188px;
    z-index: 200;
    }
    #cloud2 {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO7_sLnqz07Og81wxhxR50dRFe-sEnDjTnhQPpM7VFCCCPw1sqVm76OSdRMf5Rpe1RDELgkPY2iialWsgTDl73faKlpf5_TLZ6UJApB97P3748UPuvdgFbZpQgtonmQeaZ3wP0GoaxUSs/s1600/cloud2.png) repeat-x 0 0;
    position: absolute;
    width:100%;
    height:125px;
    z-index: 300;
    }
    #cloud3 {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmEGMvwcxERoJuxn3KI6aNnhymeOPFCpjYRQj-Om7cgFYpBdD5tIEr8IxQbLEbh-k7U_3kLtd20HrB85QzsRMiBpeJl3FkJ2TwjL3VWKYh1-qYHDL7ksbTL-Q50sbDkb4h4x4WlNUY3Cs/s1600/cloud3.png) repeat-x 0 0;
    position: absolute;
    width:100%;
    height:46px;
    z-index: 400;
    }
    </style>
    <script>
    var imgLinkUrlCloud="https://lh6.googleusercontent.com/-c4TjgNXUJPA/T4b2CqEp_GI/AAAAAAAABjY/yt4AWY6tGXQ/s800/red_baron.gif";
    </script>
    <script language='javascript' src='http://monozcore-project.googlecode.com/files/EfekAwandanPesawat.js'></script>
    <script language='javascript' src='http://monozcore-project.googlecode.com/files/jquery_spritely.js'></script>

    - Keterangan :
    • Teks yang berwarna merah merupakan kode script jQuery, jika sobat sudah ada kode script jQuery silakan sobat hapus kode script ini biar tidak terjadi error pada widget lain yang menggunakan kode script jQuery.
    • Teks yang berwarna biru merupakan link gambar pesawat, untuk mengganti gambar pesawat silakan ganti link tersebut dengan link gambar yang sobat inginkan. Usahakan menggunakan gambar dengan ukuran 144 pixel baik ukuran tinggi maupun ukuran lebar gambar. Pada postingan artikel ini terdapat beberapa pilihan gambar yang bisa sobat gunakan untuk menyesuaikan gambar pesawat dengan tema template blog sobat.

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









.: Semoga Bermanfaat :.
Efek Awan Dan Pesawat Terbang di Blog 4.5 5 Unknown Iseng-iseng jalan ke negeri tetangga, sewaktu blogwalking ehh nemu script unik di blog tersebut. Awalnya sich ga tau mesti di apain nich...


Tidak ada komentar:

Posting Komentar