Memberi efek shutdown di blog

efek ini terinspirasi dari template blognya santa-mars.blogspot.com yang windows 8
gue udah tanya ke pemilik blognya tapi gue nggak ngerti maksudnya
ini ssnya

 

tapi setelah gue belajar javascript sedikit-sedikit dari http://www.w3schools.com/jsref/dom_obj_style.asp gue paham dan ini javascript versi gue

javascript ini lumayan simple karena hanya menggunakan fungsi display dan mengganti background

yang dibutuhkan

gambar shutdown  

script dan htmlnya

Javascript
<script type='text/javascript'>
function shutdown()
{
document.getElementById('wrapper').style.display = 'none';
document.body.style.backgroundImage="url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh28pZcPEjO7AM1QBJyEE9Sntha38v76Fb4yzpMfpSN7v2zKxOWoTQoDa2GCx93Y9Q1_g8v7RiG3NHnqCzzCtTZoD545rL1DJWrBe_XN8lD17Et9yTWAa-PAfySfNamBNMzujjTZIMenbs/s1600/shutdown.gif')";  
document.body.style.backgroundRepeat="repeat";
} </script'>

HTML
 <a href='#' onClick='shutdown()' title='Shutdown'>
<img alt='a' height='50' src='http://icons8.com/wp-content/uploads/2012/04/shutdown.png' style='cursor: pointer;' width='50'/>
</a>

 gampangkan klik gambar ini   atau yang ada di bottom menu 

maka terjadi efek shutdown

terus cara mengembalikannya gimana ya harus reload halaman atau bikin javascriptnya

ini untuk menyalakannya tapi script diatas harus diubah menjadi

function shutdown()

{
document.getElementById('wrapper').style.display = 'none';
document.body.style.backgroundImage="url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh28pZcPEjO7AM1QBJyEE9Sntha38v76Fb4yzpMfpSN7v2zKxOWoTQoDa2GCx93Y9Q1_g8v7RiG3NHnqCzzCtTZoD545rL1DJWrBe_XN8lD17Et9yTWAa-PAfySfNamBNMzujjTZIMenbs/s1600/shutdown.gif')";  
document.getElementById('antishutdown').style.display = 'block';
}   

ini html dan javascript antishutdownn ya

<script type='text/javascript'>

function live()
      {
      document.getElementById('wrapper').style.display = 'block';
document.getElementById('kincir').style.display = 'none';
document.getElementById("wrapper").style.MozTransition = "block 5s ease-in-out";

document.body.style.backgroundImage="url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy3dAlrm2k2DmObujZr8oU6Js56kvP2A5Ll2AXBSRIOOQNPgD5zhaD72yuYMRjTCskkZZ-8JaLpqOU8Iq0MqRDu9A4I_13NwTgxz9_UW25Zw9feEndgRt7XInMjE1GfclX9mP9Pq9hZLdN/s1600/Untitled-3.png')";
      }
</script>

<div id='kincir' style='z-index: -999999; display:none;bottom: 300px; left: 550px; position: fixed; right: 0px;font-size:32;font-weight:bold;color:#FFF;   '>
<img alt='a' onclick='live()' src='http://icons8.com/wp-content/uploads/2013/03/long_beard-78.png' style='cursor: pointer;'/>
CLICK THE IMAGE TO TURN ON
</div>

silahkan kreasikan sesuka hati ganti alamat gambarnya

kalau tanya-tanya tentang javascript mending pelajari dulu di http://www.w3schools.com/jsref/dom_obj_style.asp karena di sana ada demonya simple tapi langsung paham


kalau ada pertanyaan komen aja