Header Ads Widget

Responsive Advertisement

Cara Memasang Screensaver Blog

Monoz 7:00 AM

Screensaver blog atau biasa disebut energy saving mode merupakan kode script yang diperkenalkan pertama kali oleh onlineleaf dalam gerakan kampanye save green environtment (hemat energi). Fungsi dari kode script ini, yaitu untuk membuat website atau blog berjalan dengan mengkonsumsi energi yang lebih sedikit dengan cara menutup tampilan blog saat sedang idle (diam tanpa ada aktivitas) dengan warna hitam dan gelap.

Penghematan energi pada tampilan monitor baik tabung CRT, LCD dan Plasma, yaitu dengan menampilkan warna hitam gelap, kenapa saya bilang warna hitam gelap karena warna hitam dapat juga dihasilkan dengan pencampuran warna dari RGB (Red-Green-Blue) sehingga tetap menghasilkan arus listrik walaupun warnanya hitam. Karena tujuan dari energy saving mode adalah untuk menghemat energi berarti warna hitam yang digunakan adalah warna hitam tanpa ada campuran RGB jadi saya sebut hitam gelap. Warna hitam gelap pada layar monitor dihasilkan dengan meniadakan arus listrik penghasil warna pada layar monitor sehingga dengan mematikan arus listrik ini kita sudah menghemat energi dan mengurangi emisi CO2 untuk konsumsi penggunaan listrik pada layar monitor. Penghematan yang dilakukan memang tidak terlalu signifikan tapi kalo dikali dengan pengguna komputer di seluruh dunia... lumayankan penghematannya....

Pada postingan artikel ini saya menyediakan 3 tipe screensaver yang bisa digunakan untuk blog, wordpress ataupun situs pribadi. Oh yaa widget screensaver ini menggunakan JQuery dan CSS3 yang pastinya unik dan menarik. Oke sob buat yang tertarik memasang widget screensaver tinggal dipilih dan langsung ke TKP...

Penting !!! ada baiknya sobat blogger mem-backup terlebih dahulu template blog sobat untuk menghindari  hal-hal yang tidak diinginkan dalam menerapkan widget ini.

Cara Pemasangan :
  • Login ke blog sobat...

  • Klik "More Options" selector box kemudian klik "Tata Letak" setelah itu pilih "Add Widget" dan pilih "HTML / Javascript", seperti gambar di bawah ini.





  • Copy-paste kode di bawah ini dan taruh di kotak gadget blog. Silakan sesuaikan beberapa parameter kode tersebut agar sesuai dengan tema blog sobat.


    1. SCREEN SAVER ENERGY SAVING

    Screensaver energy saving merupakan widget yang modifikasi dari onlineleaf. Widget asli buatan onlineleaf hanya menggunakan warna dan style yang sederhana, karena memang fungsinya yang dibuat untuk gerakan hemat energi. Widget screensaver energy saving yang saya modifikasi ini akan menampilkan screensaver dengan warna dan style yang bisa di konfigurasi supaya biar lebih energik dan menarik, selain itu screensaver ini bisa disesuaikan dengan tema warna template blog yang digunakan. Penasaran-kan... seperti apa sich screensaver hasil modifikasi ini... 


    <!-- Screen Saver -->
<script>
var ssBGImg = "none";
var ssBGColor = "monozcore";
var ssTextColor = "white";
var ssInactivity = 10000;
var ssImgUrl = "http://lh6.googleusercontent.com/-o_3ZIXjWcNU/T5gXHjRvejI/AAAAAAAABuk/2JE6-jzyH2Q/s800/donkey_kong.png";
var ssBlogName = "MonozCore";
</script>
<script>
var ssInactivity, ssImgUrl, ssBlogName, ssBGColor, ssBGImg, ssTextColor;
var idleTime = 0;
var standby = false;
var ssTextTmp = '<!--[if lte IE 9]><style>div#energysaving{background-color:#619bb9;filter:progid:DXImageTransform.Microsoft.Gradient(GradientType="0", StartColorStr="#8099CCFF", EndColorStr="#FF000066");}</style><![endif]--><!--[if IE 10]><style>div#energysaving{background-image: -ms-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));}</style><![endif]--><style>div#energysaving{margin: 0;  padding: 0;  position: absolute;  left: 50%;  top: 50%; text-align: center;  z-index: 100;-moz-border-radius: 0;  -webkit-border-radius: 0;  border: 0; color:red;background-image: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));background-image: -o-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #327AA4), color-stop(0.5, #2E4B5A), color-stop(1, #5CB0DC));background-image: -webkit-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));background-image: linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));}@media screen { body>div#energysaving {position: fixed;}} div#energysaving p {  margin: 0;  padding: 0;  width: 100%;  font-size: 18px;  font-family: arial;  color:'+ssTextColor+';  position: relative;  top: 30%;  line-height: 20px;  font-weight: bold;  text-align: center;  text-shadow: none; } div#energysaving p span {  color:'+ssTextColor+';  font-size: 12px;  font-weight: normal; } div#energysaving div#copyrightmonozcore {  padding: 0;  margin: 0;  color:'+ssTextColor+';  font-size: 12px;  font-weight: normal;  position: absolute;  bottom: 20px;  text-align: center;  width: 100%;  height: 20px;  left: 0%; }</style>';
var ssTextTmp2 = '<style>div#energysaving{  -moz-border-radius: 0;  -webkit-border-radius: 0;  border: 0; background-color:'+ssBGColor+'; color:red; background-image:url("'+ssBGImg+'"); background-size:100% 100%; background-repeat:no-repeat; background-position:center center; background-attachment:fixed; margin: 0;  padding: 0;  position: absolute;  left: 50%;  top: 50%;  opacity: 0;  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  filter: alpha(opacity=0);  text-align: center;  z-index: 100; } @media screen { body>div#energysaving { position: fixed; } } div#energysaving p {  margin: 0;  padding: 0;  width: 100%;  font-size: 18px;  font-family: arial;  color:'+ssTextColor+';  position: relative;  top: 30%;  line-height: 20px;  font-weight: bold;  text-align: center;  text-shadow: none; } div#energysaving p span {  color:'+ssTextColor+';  font-size: 12px;  font-weight: normal; } div#energysaving div#copyrightmonozcore {  padding: 0;  margin: 0;  color:'+ssTextColor+';  font-size: 12px;  font-weight: normal;  position: absolute;  bottom: 20px;  text-align: center;  width: 100%;  height: 20px;  left: 0%; }</style>';
if (ssBGColor == "monozcore"){
jQuery(function() {jQuery("body").append(ssTextTmp)});}
else{jQuery(function() {jQuery("body").append(ssTextTmp2)});}
function CheckInactivity() { idleTime += 10; if(idleTime > 60) { 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; } } 
if(typeof(jQuery) == "undefined"){}
function InitJQuery() { if(typeof(jQuery) == "undefined") { setTimeout("InitJQuery();", 50); } else { jQuery(function() { jQuery(document).ready(function() { setInterval("CheckInactivity();", ssInactivity); jQuery(this).mousemove(function(e) { idleTime = 0; StopStandBy(); }); jQuery(document).keypress(function(e) { idleTime = 0; StopStandBy(); }); jQuery("body").append('<div id="energysaving"><p><img src="'+ssImgUrl+'"/><br /><br />Energy saving mode<br /><span>Move your mouse to go back to the page.</span></p><div id="copyrightmonozcore">Copyright 2010 '+ssBlogName+' - All rights reserved<br />Powered by MonozCore</div></div>'); jQuery("#energysaving").hide(); }); }); } } InitJQuery();

</script>
<!-- End Screen Saver -->

    KETERANGAN :
    • var ssBGImg merupakan variabel untuk memasang gambar background screensaver. Untuk menggunakan gambar pada background silakan masukan url gambar yang ingin digunakan. Saran saya jangan menggunakan gambar dengan ukuran file lebih dari 50 Kb karena akan memberatkan waktu loading blog.
    • var ssBGColor merupakan variabel untuk warna background. Warna background dapat menggunakan teks warna standar HTML (black, blue, yellow) atau dalam kode hex (#ffffff, #fAFb17, #619bb99). Untuk warna background seperti yang digunakan MonozCore gunakan teks warna "monozcore".
    • var ssTextColor merupakan variabel untuk warna text. Warna text dapat menggunakan teks warna standar HTML (black, blue, yellow) atau dalam kode hex (#ffffff, #fAFb17, #619bb99).
    • var ssInactivity merupakan variabel untuk waktu start idle. Lamanya waktu untuk memulai screensaver. Satuan waktu yang digunakan dalam milisecond.
    • var ssImgUrl merupakan variabel untuk gambar screensaver. Untuk menggunakan gambar pada screensaver silakan masukan url gambar yang ingin digunakan. Saran saya jangan menggunakan gambar dengan ukuran file lebih dari 50 Kb karena akan memberatkan waktu loading blog.
    • var ssBlogName merupakan variabel untuk nama blog copyright. Nama yang akan tampil pada teks copyright.


    2. SCREEN SAVER MATRIX

    Screensaver Matrix merupakan widget screensaver bertemakan matrix. Sesuai dengan judulnya widget ini akan menampilkan huruf-huruf yang berjatuhan seperti yang terlihat di film Matrix untuk lebih jelasnya silakan dilihat contohnya. 


    <script>
var matrixCredit = 'MonozCore';
var matrixOpacity = 0.8;
</script>
<script>
var matrixTmp = '<div id="matrixDiv" style="display:none;opacity:'+matrixOpacity+';position:fixed;margin:0;top:0;left:0;z-index:999999999999999999;">';
matrixTmp +='<canvas height="'+window.innerHeight+'" id="matrixcode" width="'+window.innerWidth+'">Sorry This Browser Does Not Support WebGL<\/canvas>';
matrixTmp +='<\/div>';
matrixTmp +='<div id="txtCredit" style="display:none;z-index:9999999999999999999;color:#fff;width:100%;position:fixed;bottom:0;text-align:center;font-size:12px;font-family:Arial;">Move your mouse to turn off screen saver.<br />Copyright 2016 ' + matrixCredit + ' - All rights reserved.<br />Powered by MonozCore</div>';
$("body").append(matrixTmp);

var matrixStyle=window.screen;
var widthMatrix = matrixcode.width=matrixStyle.width;
var heightMatrix = matrixcode.height;
var yPositions = Array(300).join(0).split('');
var ctmatrix=matrixcode.getContext('2d');
var matrixdraw = function () {
  ctmatrix.fillStyle='rgba(0,0,0,.05)';
  ctmatrix.fillRect(0,0,widthMatrix,heightMatrix);
  ctmatrix.fillStyle='#0F0';
  ctmatrix.font = '10pt Georgia';
  yPositions.map(function(y, index){
    text = String.fromCharCode(1e2+Math.random()*33);
    x = (index * 10)+10;
    matrixcode.getContext('2d').fillText(text, x, y);
 if(y > 100 + Math.random()*1e4)
 {
   yPositions[index]=0;
 }
 else
 {
      yPositions[index] = y + 10;
 }
  });
};

function RunMatrix(){
if(typeof Game_Interval != "undefined"){clearInterval(Game_Interval);}
Game_Interval = setInterval(matrixdraw, 33);
$("#matrixDiv").show('clip');
$("#txtCredit").show('clip');
}

function StopMatrix(){clearInterval(Game_Interval);$("#matrixDiv").hide('fade');$("#txtCredit").hide('fade');}

var idleTime = 0;
var standby = false;
function CheckInactivity() {
    idleTime += 10;
    if (idleTime > 60) {
        InitializeStandBy();
    }
}

function InitializeStandBy() {
if (!standby && tvSrc == false && gameboxshow == false) {
RunMatrix();
standby = true;
}else{idleTime = 0;CheckInactivity();}
}

function StopStandBy() {
if (standby) {
idleTime = 0;
StopMatrix();
standby = false;
}
}

function InitJQuery() {
if (typeof(jQuery) == "undefined") {setTimeout("InitJQuery();", 10000);
} else {
setInterval("CheckInactivity();", 10000);
$(this).mousemove(function(e) {StopStandBy();});
$(this).keypress(function(e) {StopStandBy();});
}
}

window.onload = InitJQuery();
</script>

    KETERANGAN :
    • var matrixCredit = 'MonozCore'; // merupakan nama blog yang akan ditampilkan pada saat screensaver berjalan. Silakan diganti dengan nama blog sobat.
    • var matrixOpacity = 0.8; // merupakan tingkat transparansi screensaver. Silakan sobat sesuaikan nilai transparansi sesuai dengan keinginan sobat. Nilai transparansi berkisar dari 0.1 sampai 1.0 semakin kecil nilai transparansi maka efek screensaver makin transparan.


    3. SCREEN SAVER WARPDRIVE

    Screensaver WarpDrive merupakan widget screensaver dengan efek luar angkasa yang berjalan dengan kecepatan cahaya. Sama seperti screensaver matrix widget ini menggunakan canvas yang ada di HTML5. Widget ini akan berjalan pada browser yang sudah mendukung HTML5 dan CSS3 untuk jelasnya silakan dilihat contohnya. 


    <script>
var matrixCredit = 'MonozCore';
</script>
<script>
window.requestAnimFrame = (function()
{
   return  window.requestAnimationFrame       || 
           window.webkitRequestAnimationFrame || 
           window.mozRequestAnimationFrame    || 
           window.oRequestAnimationFrame      || 
           window.msRequestAnimationFrame     || 
           function(callback)
           {
               window.setTimeout(callback);
           };
})();

var warpdriveTmp ='<div id="txtCredit" style="display:none;z-index:+9999999999999999999;color:#fff;width:100%;position:fixed;bottom:0;text-align:center;font-size:12px;font-family:Arial;">Move your mouse to turn off screen saver.<br />Copyright 2016 ' + matrixCredit + ' - All rights reserved.<br />Powered by MonozCore</div>';
$('body').append(warpdriveTmp);

var mosbitcontainer = document.createElement( 'canvas' );
mosbitcontainer.id="warpDrive";
mosbitcontainer.style.opacity = 0.9;
mosbitcontainer.style.position = "fixed";
mosbitcontainer.style.zIndex = -1;
mosbitcontainer.style.left = 0;
mosbitcontainer.style.top = 0;
document.body.appendChild(mosbitcontainer);
	
var width = window.innerWidth,
height = window.innerHeight,
canvas = document.getElementById("warpDrive"),
mousex = width/2, mousey = height/2;
canvas.width = width;
canvas.height = height;

var G=canvas.getContext("2d");
G.globalAlpha=0.25;

var Rnd = Math.random,
    Sin = Math.sin,
    Floor = Math.floor;

var warpZ = 12,
    units = 500,
    stars = [],
    cycle = 0,
    Z = 0.025 + (1/25 * 2);

function addCanvasEventListener(name, fn)
{
   canvas.addEventListener(name, fn, false);
}
addCanvasEventListener("mousemove", function(e) {
   //mousex = e.clientX;
   //mousey = e.clientY;
});

function wheel (e) {
   var delta = 0;
   if (e.detail)
   {
      delta = -e.detail / 3;
   }
   else
   {
      delta = e.wheelDelta / 120;
   }
   var doff = (delta/25);
   if (delta > 0 && Z+doff <= 0.5 || delta < 0 && Z+doff >= 0.01)
   {
      Z += (delta/25);
   }
}
addCanvasEventListener("DOMMouseScroll", wheel);
addCanvasEventListener("mousewheel", wheel);

function resetstar(a)
{
   a.x = (Rnd() * width - (width * 0.5)) * warpZ;
   a.y = (Rnd() * height - (height * 0.5)) * warpZ;
   a.z = warpZ;
   a.px = 0;
   a.py = 0;
}

for (var i=0, n; i<units; i++)
{
   n = {};
   resetstar(n);
   stars.push(n);
}

var rf = function()
{
   G.fillStyle = "#000";
   G.fillRect(0, 0, width, height);
   
   var cx = (mousex - width / 2) + (width / 2),
       cy = (mousey - height / 2) + (height / 2);
   
   var sat = Floor(Z * 500);
   if (sat > 100) sat = 100;
   for (var i=0; i<units; i++)
   {
      var n = stars[i],            
          xx = n.x / n.z,         
          yy = n.y / n.z,
          e = (1.0 / n.z + 1) * 2;   
      
      if (n.px !== 0)
      {
         
         G.strokeStyle = "hsl(" + ((cycle * i) % 360) + "," + sat + "%,80%)";
         G.lineWidth = e;
         G.beginPath();
         G.moveTo(xx + cx, yy + cy);
         G.lineTo(n.px + cx, n.py + cy);
         G.stroke();
      }
      
      n.px = xx;
      n.py = yy;
      n.z -= Z;
      
     if (n.z < Z || n.px > width || n.py > height)
      {
        resetstar(n);
      }
   }
   
   cycle += 0.01;
   if(standby == true){requestAnimFrame(rf);}
};
//requestAnimFrame(rf);

function RunWarpDrive(){
requestAnimFrame(rf);
mosbitcontainer.style.zIndex = +9999999;
$('#warpDrive').show('clip');
$('#txtCredit').show('clip');
}

function StopWarpdrive(){$('#warpDrive').hide('fade');$('#txtCredit').hide('fade');mosbitcontainer.style.zIndex = -1;}

var idleTime = 0;
var standby = false;
function CheckInactivity() {
    idleTime += 10;
    if (idleTime > 60) {
        InitializeStandBy();
    }
}

function InitializeStandBy() {
if (!standby && tvSrc == false && gameboxshow == false) {
RunWarpDrive();
standby = true;
}else{idleTime = 0;CheckInactivity();}
}

function StopStandBy() {
if (standby) {
idleTime = 0;
StopWarpdrive();
standby = false;
}
}

function InitJQuery() {
if (typeof(jQuery) == "undefined") {setTimeout("InitJQuery();", 10000);
} else {
setInterval("CheckInactivity();", 10000);
$(this).mousemove(function(e) {StopStandBy();});
$(this).keypress(function(e) {StopStandBy();});
}
}

window.onload = InitJQuery();
</script>

    KETERANGAN :
    • var matrixCredit = 'MonozCore'; // merupakan nama blog yang akan ditampilkan pada saat screensaver berjalan. Silakan diganti dengan nama blog sobat.

  • Klik "Save" dan lihat hasilnya...
Oke sobat monozcore jangan lupa meninggalkan jejak komentarnya yaa... biar postingan berikutnya semakin unik dan menarik.. happy blogging...

.: Semoga Bermanfaat :.
Tags:
Monoz

Posted by: Monoz

Post a Comment

0 Comments