Membuat Screensaver Blog Dengan Kreasi Sendiri

trik ini mgkn sudah banyak yg tw tp ane sekedar share bwt tmn2 blogger yg blom tw hehe.... mksd jdul diatas adalah membuat modus hemat energy pada blog. jika blog kita dibiarkan beberapa detik maka akan mncul screen saver. itu sudah biasa namun kta bisa memeri sedikit kreasi pada penggunaan scriptnya. contohnya pada blog saya.. saya memberikan animas gif pada screensaver tersebut. coba anda biarkan blog saya selama 20 detik maka akan muncul animasi screensaver. biasanya pada sebuah blog hanya muncul screensaver gelap biasa. tp saya memodifikasi sedikit sehingga pada layar ada gambar animasi gif... di bawah ini adalah scriptnya . perhatikan kode berwarna pink.  kode sesudahnya adalah gambar yg saya taruh pada javascript screensaver sehingga muncul gambar . sobat blogger bisa mengubah gambar tersebut pada kode "http://gambar anda.gif"
setelah iu anda simpan di notepad dengan format screensaver.js . dan kemudian sobat upload di http://code.google.com jika sobat punya akun code.google. jika tidak sobat bisa buat account di sini

var idleTime = 0; var standby = false; function CheckInactivity() { idleTime += 10; if(idleTime > 20) { InitializeStandBy(); } } function InitializeStandBy() { if(!standby) { var h = 0; h = jQuery(window).height(); jQuery("#energysaving").show().css({ height: "0", width: "0", left: "50%", top: "50%" }).animate({ width: "100%", height: h, left: "0", top: "0", opacity: "1" }, 1000); standby = true; } } function StopStandBy() { if(standby) { jQuery("#energysaving").animate({ width: "0", height: "0", opacity: "0", left: "50%", top: "50%" }, 500); setTimeout('jQuery("#energysaving").hide();', 800); standby = false; } } document.write('<link rel="stylesheet" href="http://www.onlineleaf.com/savetheenvironment.css" type="text/css">'); if(typeof(jQuery) == "undefined") { document.write('<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>'); } function InitJQuery() { if(typeof(jQuery) == "undefined") { setTimeout("InitJQuery();", 50); } else { jQuery(function() { jQuery(document).ready(function() { setInterval("CheckInactivity();", 10000); jQuery(this).mousemove(function(e) { idleTime = 0; StopStandBy(); }); jQuery(document).keypress(function(e) { idleTime = 0; StopStandBy(); }); jQuery("body").append('<div id="energysaving"><img src="http://www.lmm.jussieu.fr/~neukirch/work-images/spaghetti/animation_10.gif"></img><p><<---------------------LONGFIELD--------------------->><br /><span>bumi bisa panas komputerpun juga.. tp kalo jaringan internet apa bisa panas juga yaa????? .</span></p><div id="copyrightOnlineLeaf">Copyright 2011 <font style="color: #666666;">www.longfield.co.nr</font> - All reservedkopi panas 2010</div></div>'); jQuery("#energysaving").hide(); }); }); } } InitJQuery();

"http://www.onlineleaf.com/savetheenvironment.css" pada kode di atas juga bisa di modifikasi. saya pernah mengunjungi beberapa blog dan melihat beliau menambahkan css3 sehingga menimbulkan efek khusus. kode ini sobat bisa juga memodifikasi sendiri. dan langkah terakhir stelah sobat mengupload javascript di atas maka buat format seperti di bawah ini



<script src="http://http://longfield21.googlecode.com/files/screensaver.js">
</script>


dan kode setelah src=" sampai tanda kutip terakhir sobat ganti dengan javascript yg telah sobat upload dan letakkan di atas </body>

simpan dan liat hasilnya

Membuat button Box Elegan CSS3

screen shot :

di bawah ini adalah format nge-stel buton. jadi kerangka ringkasnya yaitu <style>-----</style>
anda hanya perlu menentukan type,class atau id yang akan anda pilih dan warna serta efek hover khusus jika anda mw bisa anda kreasikan sendiri...silakan ambil kode merah saja dan letakkan di atas ]]></b:skin>. dan
terlihat di bawah kode warna kuning adalah yang saya pilih "type" karena class saya udah terpake untuk efek lain drpd rombak ulang mending cari alternatif kan?? wkkwkwkwk.. dan penempatan class anda atus sesuai keinginan anda misalkan pada link widget saya di bawah ada tombol pasang widget ini itu juga menggunakan efek css3

 ... yah segitu saja bwt sobat smwa selamat berkreasi

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <title>Button http://fauzilhaqqi.net</title>

    <style type="text/css">

      input[type=button], button {

        /* tempat menambahkan style */

        padding: 5px;

        width: 90px;

        outline-width: 0;

        border: 1px solid #000;

        border-radius: 50px;

        -moz-border-radius: 50px;

 

        -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);

        -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);

        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);

 

        background-image: -webkit-gradient(linear,

            left top, left bottom,

            color-stop(0.0, rgba(255, 255, 255, 0.8)),

            color-stop(0.01, rgba(255, 255, 255, 0.6)),

            color-stop(0.5, rgba(255, 255, 255, 0.3)),

            color-stop(0.5, rgba(255, 255, 255, 0.2)),

            color-stop(1.0, rgba(255, 255, 255, 0.0)));

        background-image: -moz-linear-gradient(top,

            rgba(255, 255, 255, 1.0) 0%,

            rgba(255, 255, 255, 0.6) 1px,

            rgba(255, 255, 255, 0.3) 50%,

            rgba(255, 255, 255, 0.2) 50%,

            rgba(255, 255, 255, 0.0) 100%);

 

        -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9),

            inset 0px 1px 0px rgba(255, 255, 255, 0.5);

        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.9),

            inset 0px 1px 0px rgba(255, 255, 255, 0.5);

 

        background-color: #474;

        color: #fff;

        text-shadow: rgba(0, 0, 0, 0.5) 0px -1px 0px;

 

        -webkit-transition: background-color 0.2s ease-in-out,

            color 0.2s ease-in-out,

            -webkit-box-shadow 0.2s ease-in-out;

        -moz-transition: background-color 0.2s ease-in-out,

            color 0.2s ease-in-out,

            -moz-box-shadow 0.2s ease-in-out;

        -o-transition: background-color 0.2s ease-in-out,

            color 0.2s ease-in-out,

            box-shadow 0.2s ease-in-out;

      }

      input[type=button]:hover, input[type=button]:focus,

      button:hover, button:focus {

        -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9);

        -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.9);

        background-color: #696;

      }

      input[type=button]:active, button:active {

        background-color: #242;

        color: #ccc;

        -webkit-transition-duration: 0.0s;

      }

      body { padding: 20px; }

    </style>

  </head>

  <body>

    <input type="button" value="Login" />

  </body>

</html>