Welcome To My Blog

Minggu, 11 Desember 2011

Cara Membuat Efek Hantu Pada Blog

Buat sobat blogger yang punya tema template berlatar belakang gelap, nich ada script unik yang keren banget efek hantu terbang. Script ini akan menampilkan gambar hantu holloween yang sedang beterbangan secara random di blog sobat. Untuk melihat previewnya silakan lihat di MozWidget Blog.

 Script ini menggunakan javascript dan 3 gambar yang mempunyai ukuran 144 pixel sehingga tidak akan memberatkan waktu loading blog sobat. Script efek hantu beterbangan secara default menggunakan 3 gambar hantu holloween yang keren dan unik. Gambar hantu bisa disesuaikan dan juga bisa menggunakan lebih dari 3 gambar. Buat yang tertarik memasang script ini saya sarankan hanya di pasang pada halaman utama saja biar tidak menggangu pengunjung blog apabila membaca artikel keseluruhan di blog sobat.

Cara Pemasangan
Login ke blog sobat.
Klik "Design" kemudian klik "Edit HTML".
Cari kode </Head> kemudian copy-paste kode dibawah ini tepat diatas kode </Head>.


<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <SCRIPT SRC='http://monozcore-project.googlecode.com/files/MonozCore_Halloween.js' type='text/JavaScript'/>
 <SCRIPT type='Text/JavaScript'>
 function JSFX_StartEffects()
 {
     JSFX.AddGhost(&quot;https://lh6.googleusercontent.com/-SXwO9TSbVHw/Tss48oP8H7I/AAAAAAAAAfY/sFb02XmPRiQ/s144/ghost2_0.png&quot;);
     JSFX.AddGhost(&quot;https://lh3.googleusercontent.com/-v0PgPYW-N-s/Tssz7ufFA8I/AAAAAAAAAfI/sz3C2Z7q8Gs/s800/ghost1.gif&quot;);
     JSFX.AddGhost(&quot;https://lh5.googleusercontent.com/-SpLc1VaANcs/Tss47hTjmuI/AAAAAAAAAfQ/Qb_ANbbx674/s144/ghost3_0.png&quot;);
 }
 window.onload = JSFX_StartEffects;
 </SCRIPT>
</b:if>

Kode "<b:if cond='data:blog.url == data:blog.homepageUrl'>...</b:if>" merupakan kode blog yang berfungsi untuk menampilkan kode tertentu hanya pada halaman utama saja. Untuk mempelajari kode blog lebih lanjut silakan baca artikel tentang Jenis dan Fungsi Kode Untuk Mengatur Tampilan Widget BlogSpot.
Kode "JSFX.AddGhost(&quot;URL link gambar&quot;);"merupakan kode script untuk mendeklarasikan array gambar. Untuk menambah gambar silakan tambahkan baris kode script ini pada script diatas.
Kode "https://lh6.googleusercontent.com/-SXwO9TSbVHw/Tss48oP8H7I/AAAAAAAAAfY/sFb02XmPRiQ/s144/ghost2_0.png" merupakan kode URL link gambar yang digunakan. Untuk merubah gambar silakan ganti baris kode ini dengan URL link gambar yang ingin digunakan.

Klik "Save" dan lihat hasilnya...
.:Selamat Mencoba:.

Sabtu, 10 Desember 2011

Cara Membuat Background Bergerak Seperti Matrix

Info unik kali ini mengenai salah satu trik membuat gambar background blog menjadi dinamis. Trik ini menggunakan JQuery sederhana yang dikhususkan untuk membuat gambar background menjadi bergerak (Scrolling Background). Script ini membuat gambar background blog bergerak secara vertikal dari arah bawah ke arah atas. Buat sobat blogger yang ingin mencobanya silakan disimak trik membuat scrolling background berikut ini.


  • Login » blogger.
  • Rancangan » Edit HTML.
  • Apabila anda belum menggunakan kode JQuery silakan anda pasang kode JQuery dibawah ini tepat di atas Kode </Head>. 

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'></script>
  • Copy-Paste kode di bawah ini tepat di atas Kode </Head>. 

    <script type='text/javascript'>
    //<![CDATA[
    $(function(){
    // ***
    // Scrolling background
    // ***
    // height of background image in pixels
    var backgroundheight = 4000;

    // get the current minute/hour of the day
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();

    // work out how far through the day we are as a percentage - e.g. 6pm = 75%
    var hourpercent = hour / 24 * 100;
    var minutepercent = minute / 30 / 24 * 100;
    var percentofday = Math.round(hourpercent + minutepercent);

    // calculate which pixel row to start graphic from based on how far through the day we are
    var offset = backgroundheight / 100 * percentofday;

    // graphic starts at approx 6am, so adjust offset by 1/4
    var offset = offset - (backgroundheight / 1);

    function scrollbackground() {
    // decrease the offset by 1, or if its less than 1 increase it by the background height minus 1
    offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
    // apply the background position
    $('body').css("background-position", "50% " + offset + "px");
    // call self to continue animation
    setTimeout(function() {
    scrollbackground();
    }, 70
    );
    }
    // Start the animation
    scrollbackground();
    });

    //]]>
    </script>
  • Copy-Paste Kode CSS di bawah ini tepat di atas Kode </Head> untuk memasang gambar background. Anda dapat mengganti gambar background sesuai dengan yang anda inginkan dengan merubah alamat hosting gambar pada Kode CSS di bawah dengan alamat hosting gambar yang anda pilih.

    <style>
    body {
    background: black url(http://3.bp.blogspot.com/-tS5lZKl3Qag/TtjQUfMzi2I/AAAAAAAAAkA/QZc2FwvhW4o/s200/bg.gif)repeat center; background-attachment: fixed;
    }
    </style>
  • Keterangan : 
    - repeat // Pengulangan gambar arah x dan y.
    • repeat-x // Pengulangan gambar hanya arah horizontal.
    • repeat-y // Pengulangan gambar hanya arah vertikal.
    - http://3.bp.blogspot.com/-tS5lZKl3Qag/TtjQUfMzi2I/AAAAAAAAAkA/QZc2FwvhW4o/s200/bg.gif // URL Link gambar.
    - center // Lokasi gambar berada di tengah layar.
    • Left // Lokasi gambar berada di kiri gambar.
    • Right // Lokasi gambar berada di kanan gambar.

Pilihan Gambar Background 


  • http://3.bp.blogspot.com/-tS5lZKl3Qag/TtjQUfMzi2I/AAAAAAAAAkA/QZc2FwvhW4o/s200/bg.gif


  • https://lh3.googleusercontent.com/-uJ-Th52g6r0/TtjTcIlyYZI/AAAAAAAAAkM/4dNde9sGNKw/s800/bg_star.png


  • https://lh4.googleusercontent.com/-dQkfB1XjogQ/TtjaZFg_FNI/AAAAAAAAAkY/27E-kzfkkvc/s800/bg-clouds.jpg
.:Selamat Mencoba:.

Sabtu, 03 Desember 2011

Cara memberi burung twitter di blog

Pengen punya burung terbang di blog?
caranya gampang !
nih caranya :

1. Login Blogger
2. Ke Desain
3. Klik "Page Elements"
4. Klik "Add A Gadget"
5. Klik "HTML/JavaScript"
lalu copy kode berikut :

<script type="text/javascript" src="http://siaf-aceh.com/js/twiiter_siaf.js "></script><script type="text/javascript">
var twitterAccount = "Basirstillalone";
var tweetThisText = "Know the Admin of this blog";
tripleflapInit();</script>

ganti tulisan Basirstillalone menjadi username twitter anda

setelah di paste dan di edit, klik finish. Good luck gan