cara membuat saving mode dengan widget

Kode saving mode yang di tempatkan pada widget tata letak HTML /java script
silahkan copy kode dibawah ini :

<style type="text/css">body .saving{position: fixed;width: 100%;top: 0;left:0;height: 100%;opacity: 0.98;filter: alpha(opacity=98);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=98)";background: #000;border-bottom: 3px solid transparent;z-index: 999999;-o-transition: all 3s ease-in-out 10s;-moz-transition: all 3s ease-in-out 10s;-webkit-transition: all 3s ease-in-out 10s;}body:hover .saving {opacity: 0.0;height:0.001%;filter: alpha(opacity=0);-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";background: #0a7f01;border-bottom: 5px solid #333;-o-transition: opacity 2s ease-in-out 2.5s, background-color 3s linear 0.5s, height 1s ease-in 1.8s;-moz-transition: opacity 2s ease-in-out 2.5s, background 3s linear 0.5s, height 1s ease-in 1.8s;-webkit-transition: opacity 2s ease-in-out 2.5s, background 3s linear 0.5s, height 1s ease-in 1.8s;}body .saving p.esm1{margin: 0;padding: 0;width: 92%;background: transparent;font-size: 100px;font-family: "Serif", Times New Roman;color: #FF0000;text-shadow: 0 0 2px #ccc, 0 -5px 4px #ff3, 2px -6px 6px #fd3, -2px -8px 9px #f40, 2px -10px 10px #f10;position: relative;margin-top: 200px;line-height: 20px;font-weight: bold;text-align: center;border: 30px solid transparent;border-radius: 20px;-moz-border-radius: 20px;-webkit-border-radius: 20px;-o-transition: -o-transform 5s ease-out 8s, background-color 4s ease-out 12s;-moz-transition: -moz-transform 5s ease-out 8s, background 4s ease-out 12s;-webkit-transition: -webkit-transform 5s ease-out 8s, background 4s ease-out 12s;}body:hover .saving p.esm1{font-size: 10px;color: red;width: 25%;margin: 340px 0 0 300px;padding: 25px;background: #aaa;border: 20px solid #888;border-radius: 170px;-moz-border-radius: 170px;-webkit-border-radius: 170px;-o-transform:translate(600px,-500px) rotate(360deg) scale(0.2);-moz-transform:translate(600px,-500px) rotate(360deg) scale(0.2);-webkit-transform:translate(600px,-500px) rotate(360deg) scale(0.2);-o-transition: font 1.1s 0.1s, width 1.3s 0.4s, margin-left 0.8s 1.2s, -o-transform 1.2s linear 1.5s, background-color 0.6s ease-in 0.6s, margin-top 1.2s ease-in 0.5s, border 3s ease-in;-moz-transition: font 1.1s 0.1s, width 1.3s 0.4s, margin-left 0.8s 1.2s, -moz-transform 1.2s linear 1.5s, background 0.6s ease-in 0.6s, margin-top 1.2s ease-in 0.5s, border 3s ease-in;-webkit-transition: font 1.1s 0.1s, width 1.7s 0s, margin-left 0.8s 1.2s, -webkit-transform 1.2s linear 1.5s, background 0.6s ease-in 0.6s, margin-top 1s ease-in 0.5s, border 3s ease-in, -webkit-border-radius 3s ease-in;}.saving p span.esm2{font-size: 18px;opacity: 0.5;filter: alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";display: block;text-align: center;width: 300px;margin: -10px auto; font-weight: normal;padding: 2px 8px;background: #000;border: 1px solid #333;border-radius: 0;-moz-border-radius: 0;-webkit-border-radius: 0;color: #0000FF;text-shadow: none;font-family: Arial, Helvetica, sans-serif;-o-transition: 1s ease-out;-moz-transition: 1s ease-out;-webkit-transition: 1s ease-out;}.saving:hover p span.esm2{font-size: 10px;width: 200px;padding: 0;}.saving p span.esm3{color: #ccc;font-family: "Tahoma", Arial, Helvetica;display: block;margin:10px auto;background: url http://i964.photobucket.com/albums/ae124...) left center repeat-x;background: -moz-linear-gradient(top,#666,#111);background: -webkit-gradient(linear,0% top,0% bottom,from(#111),to(#666));opacity: 0.6;filter: alpha(opacity=60);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";width: 250px;text-shadow: 1px 1px 1px #000;border: 1px solid #333;border-radius: 4px;padding:2px 10px;-moz-border-radius: 4px;-webkit-border-radius: 4px;font-size: 12px;font-weight: normal;line-height: 16px;}.saving .by_Tejahtc {margin-left: 30px;text-align: center;color: #015828;font-size: 12px;font-weight: normal;position: absolute;bottom: 30px;width: 100%;height: 20px;left: 0;}.saving .by_Tejahtc span.esm4 {color: #aaa;font-style:italic;font-size:14px;font-weight:bold;text-transform:uppercase;}#recpost {width:210px;overflow: hidden;height: 327px;float: right;margin-top: 10px;padding: 4px 2px;background: transparent;border: 1px solid transparent;border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;-o-transition: all 1.5s ease-out;-moz-transition: all 1.5s ease-out;-webkit-transition: all 1.5s ease-out;}</style>

<div class='saving'>
<p class='esm1'>Title keyword blog uang<br/>
<span class='esm2'>Energy Saving Mode using CSS3</span><br/><br/>
<span class='esm3'>Move your mouse to go back to the page!<br/> Title keyword blog uang, website,Metadata,Judul sitemap,linsting,SEO Engine,Optimization,meta tag,Backlink, cari uang lewat blogger </span></p>
<div class='by_Tejahtc'>Original design by: <span class='esm4'> Titlekeywordbloguang.blogspot.co.id - Titlekeywordbloguang.blogspot.co.id</span> - Desember, 26/12/ 2016</div>
</div>

Ganti tulisan :Title keyword blog uang, website,Metadata,Judul sitemap,linsting,SEO Engine,Optimization,meta tag,Backlink, cari uang lewat blogger
Titlekeywordbloguang.blogspot.co.id - Titlekeywordbloguang.blogspot.co.id
sesuai selera anda.

BACA JUGA : JAGAD SEO

Kode energy saving mode using css3 silahkan copy kodenya dibawah ini 

1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode ]]></b:skin>
4. Copy salah satu kode css dibawah ini, lalu Paste diatas kode ]]></b:skin>
CSS Compress :

body::before,body::after{position:absolute;position:fixed;content:"";background:#000;-moz-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;-webkit-transition:all 1s ease-in-out;transition:all 1s ease-in-out;z-index:99999}body::before{border:10px solid #ccc;border-left:none;top:0;left:50%;right:0;bottom:0}body::after{top:0;left:0;border:10px solid #ccc;border-right:none;right:50%;bottom:0}body:hover::before{left:100%}body span.energyatas{position:absolute;position:fixed;right:0;left:0;top:46.5%;border:5px solid #ccc;margin:0 0 0 -1px;z-index:999999;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;-moz-transition:all 3s ease-in;-o-transition:all 3s ease-in;-webkit-transition:all 3s ease-in;transition:all 3s ease-in;-moz-box-shadow:0 0 20px 3px #6405C2;-webkit-box-shadow:0 0 20px 3px #6405C2;box-shadow:0 0 20px 3px #6405C2}body span.energybawah{position:absolute;position:fixed;right:0;left:0;top:46.5%;border:5px solid #ccc;margin:0 0 0 0;z-index:999999;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;-moz-transition:all 3s ease-in;-o-transition:all 3s ease-in;-webkit-transition:all 3s ease-in;transition:all 3s ease-in;-moz-box-shadow:0 0 20px 3px #6405C2;-webkit-box-shadow:0 0 20px 3px #6405C2;box-shadow:0 0 20px 3px #6405C2}body:hover::after{right:100%}body:hover::before,body:hover::after{visibility:hidden}body:hover span.energyatas{visibility:hidden;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;-webkit-transition:all .2s ease-out;transition:all .2s ease-out;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;top:0}body:hover span.energybawah{visibility:hidden;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;-webkit-transition:all .2s ease-out;transition:all .2s ease-out;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;top:100%}body span.energy{width:35%;border-bottom:5px solid #ccc;border-top:5px solid #ccc;padding:10px;background:#000;border-radius:20px;font-size:20px;color:#fff;text-align:center;position:absolute;position:fixed;left:32%;right:45%;top:40%;bottom:45%;margin:0 0 0 0;z-index:123455543123445556888;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;-moz-transition:all 3s ease-in;-o-transition:all 3s ease-in;-webkit-transition:all 3s ease-in;transition:all 3s ease-in;-moz-box-shadow:0 0 20px 3px #6405C2;-webkit-box-shadow:0 0 20px 3px #6405C2;box-shadow:0 0 20px 3px #6405C2}body:hover span.energy{visibility:hidden;-moz-transition:all .7s ease-out;-o-transition:all .7s ease-out;-webkit-transition:all .7s ease-out;transition:all .7s ease-out;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;right:0;z-index:99999999}

css beuty

body::before,

body::after {

  position:absolute;

  position:fixed;

  content:"";

  background:#000;

  -moz-transition:all 1s ease-in-out;

  -o-transition:all 1s ease-in-out;

  -webkit-transition:all 1s ease-in-out;

  transition:all 1s ease-in-out;

  z-index:99999;

}

body::before {

  border:10px solid #ccc;

  border-left:none;

  top:0;

  left:50%;

  right:0;

  bottom:0;

}

body::after {

  top:0;

  left:0;

  border:10px solid #ccc;

  border-right:none;

  right:50%;

  bottom:0;

}

body:hover::before {

  left:100%;

}

body span.energyatas {

  position:absolute;

  position:fixed;

  right:0;

  left:0;

  top:46.5%;

  border:5px solid #ccc;

  margin:0 0 0 -1px;

  z-index:999999;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

  filter:alpha(opacity=100);

  opacity:1;

  -moz-transition:all 3s ease-in;

  -o-transition:all 3s ease-in;

  -webkit-transition:all 3s ease-in;

  transition:all 3s ease-in;

  -moz-box-shadow:0 0 20px 3px #6405C2;

  -webkit-box-shadow:0 0 20px 3px #6405C2;

  box-shadow:0 0 20px 3px #6405C2;

}

body span.energybawah {

  position:absolute;

  position:fixed;

  right:0;

  left:0;

  top:46.5%;

  border:5px solid #ccc;

  margin:0 0 0 0;

  z-index:999999;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

  filter:alpha(opacity=100);

  opacity:1;

  -moz-transition:all 3s ease-in;

  -o-transition:all 3s ease-in;

  -webkit-transition:all 3s ease-in;

  transition:all 3s ease-in;

  -moz-box-shadow:0 0 20px 3px #6405C2;

  -webkit-box-shadow:0 0 20px 3px #6405C2;

  box-shadow:0 0 20px 3px #6405C2;

}

body:hover::after {

  right:100%;

}

body:hover::before,

body:hover::after {

  visibility:hidden;

}

body:hover span.energyatas {

  visibility:hidden;

  -moz-transition:all .2s ease-out;

  -o-transition:all .2s ease-out;

  -webkit-transition:all .2s ease-out;

  transition:all .2s ease-out;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

  filter:alpha(opacity=0);

  opacity:0;

  top:0;

}

body:hover span.energybawah {

  visibility:hidden;

  -moz-transition:all .2s ease-out;

  -o-transition:all .2s ease-out;

  -webkit-transition:all .2s ease-out;

  transition:all .2s ease-out;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

  filter:alpha(opacity=0);

  opacity:0;

  top:100%;

}

body span.energy {

  width:35%;

  border-bottom:5px solid #ccc;

  border-top:5px solid #ccc;

  padding:10px;

  background:#000;

  border-radius:20px;

  font-size:20px;

  color:#fff;

  text-align:center;

  position:absolute;

  position:fixed;

  left:32%;

  right:45%;

  top:40%;

  bottom:45%;

  margin:0 0 0 0;

  z-index:123455543123445556888;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

  filter:alpha(opacity=100);

  opacity:1;

  -moz-transition:all 3s ease-in;

  -o-transition:all 3s ease-in;

  -webkit-transition:all 3s ease-in;

  transition:all 3s ease-in;

  -moz-box-shadow:0 0 20px 3px #6405C2;

  -webkit-box-shadow:0 0 20px 3px #6405C2;

  box-shadow:0 0 20px 3px #6405C2;

}

body:hover span.energy {

  visibility:hidden;

  -moz-transition:all .7s ease-out;

  -o-transition:all .7s ease-out;

  -webkit-transition:all .7s ease-out;

  transition:all .7s ease-out;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

  filter:alpha(opacity=0);

  opacity:0;

  right:0;

  z-index:99999999;

Catatan :
- Kode CSS diatas sama saja fungsinya, hanya saja yang compress lebih padat, sedangkan yang beautify lebih cantik sehingga mudah untuk di edit.
- Untuk mengganti warna silahkan silahkan cari kode warnanya disini Kode Warna HTML.

5. Cari kode <body>
6. Copy kode html dibawah ini, lalu Paste dibawah kode <body>

<span class='energyatas'></span>

<span class='energy'><data:blog.title/><br/><span style='font-size:11px;color:#fff'>Gunakan Scroll Mouse/Keyboard Untuk Mengscroll Halaman</span></span>

Catatan :
<data:blog.title/> merupakan nama blog Anda, jika bisa diganti tuilsan sesuai selera anda

7. Klik Simpan Template1. Masuk ke Blogger.com

2. Klik Template => Edit HTML
3. Cari kode ]]></b:skin>
4. Copy salah satu kode css dibawah ini, lalu Paste diatas kode ]]></b:skin>
CSS Compress :

body::before,body::after{position:absolute;position:fixed;content:"";background:#000;-moz-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;-webkit-transition:all 1s ease-in-out;transition:all 1s ease-in-out;z-index:99999}body::before{border:10px solid #ccc;border-left:none;top:0;left:50%;right:0;bottom:0}body::after{top:0;left:0;border:10px solid #ccc;border-right:none;right:50%;bottom:0}body:hover::before{left:100%}body span.energyatas{position:absolute;position:fixed;right:0;left:0;top:46.5%;border:5px solid #ccc;margin:0 0 0 -1px;z-index:999999;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;-moz-transition:all 3s ease-in;-o-transition:all 3s ease-in;-webkit-transition:all 3s ease-in;transition:all 3s ease-in;-moz-box-shadow:0 0 20px 3px #6405C2;-webkit-box-shadow:0 0 20px 3px #6405C2;box-shadow:0 0 20px 3px #6405C2}body span.energybawah{position:absolute;position:fixed;right:0;left:0;top:46.5%;border:5px solid #ccc;margin:0 0 0 0;z-index:999999;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;-moz-transition:all 3s ease-in;-o-transition:all 3s ease-in;-webkit-transition:all 3s ease-in;transition:all 3s ease-in;-moz-box-shadow:0 0 20px 3px #6405C2;-webkit-box-shadow:0 0 20px 3px #6405C2;box-shadow:0 0 20px 3px #6405C2}body:hover::after{right:100%}body:hover::before,body:hover::after{visibility:hidden}body:hover span.energyatas{visibility:hidden;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;-webkit-transition:all .2s ease-out;transition:all .2s ease-out;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;top:0}body:hover span.energybawah{visibility:hidden;-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;-webkit-transition:all .2s ease-out;transition:all .2s ease-out;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;top:100%}body span.energy{width:35%;border-bottom:5px solid #ccc;border-top:5px solid #ccc;padding:10px;background:#000;border-radius:20px;font-size:20px;color:#fff;text-align:center;position:absolute;position:fixed;left:32%;right:45%;top:40%;bottom:45%;margin:0 0 0 0;z-index:123455543123445556888;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);opacity:1;-moz-transition:all 3s ease-in;-o-transition:all 3s ease-in;-webkit-transition:all 3s ease-in;transition:all 3s ease-in;-moz-box-shadow:0 0 20px 3px #6405C2;-webkit-box-shadow:0 0 20px 3px #6405C2;box-shadow:0 0 20px 3px #6405C2}body:hover span.energy{visibility:hidden;-moz-transition:all .7s ease-out;-o-transition:all .7s ease-out;-webkit-transition:all .7s ease-out;transition:all .7s ease-out;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter:alpha(opacity=0);opacity:0;right:0;z-index:99999999}

css beuty

body::before,

body::after {

  position:absolute;

  position:fixed;

  content:"";

  background:#000;

  -moz-transition:all 1s ease-in-out;

  -o-transition:all 1s ease-in-out;

  -webkit-transition:all 1s ease-in-out;

  transition:all 1s ease-in-out;

  z-index:99999;

}

body::before {

  border:10px solid #ccc;

  border-left:none;

  top:0;

  left:50%;

  right:0;

  bottom:0;

}

body::after {

  top:0;

  left:0;

  border:10px solid #ccc;

  border-right:none;

  right:50%;

  bottom:0;

}

body:hover::before {

  left:100%;

}

body span.energyatas {

  position:absolute;

  position:fixed;

  right:0;

  left:0;

  top:46.5%;

  border:5px solid #ccc;

  margin:0 0 0 -1px;

  z-index:999999;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

  filter:alpha(opacity=100);

  opacity:1;

  -moz-transition:all 3s ease-in;

  -o-transition:all 3s ease-in;

  -webkit-transition:all 3s ease-in;

  transition:all 3s ease-in;

  -moz-box-shadow:0 0 20px 3px #6405C2;

  -webkit-box-shadow:0 0 20px 3px #6405C2;

  box-shadow:0 0 20px 3px #6405C2;

}

body span.energybawah {

  position:absolute;

  position:fixed;

  right:0;

  left:0;

  top:46.5%;

  border:5px solid #ccc;

  margin:0 0 0 0;

  z-index:999999;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

  filter:alpha(opacity=100);

  opacity:1;

  -moz-transition:all 3s ease-in;

  -o-transition:all 3s ease-in;

  -webkit-transition:all 3s ease-in;

  transition:all 3s ease-in;

  -moz-box-shadow:0 0 20px 3px #6405C2;

  -webkit-box-shadow:0 0 20px 3px #6405C2;

  box-shadow:0 0 20px 3px #6405C2;

}

body:hover::after {

  right:100%;

}

body:hover::before,

body:hover::after {

  visibility:hidden;

}

body:hover span.energyatas {

  visibility:hidden;

  -moz-transition:all .2s ease-out;

  -o-transition:all .2s ease-out;

  -webkit-transition:all .2s ease-out;

  transition:all .2s ease-out;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

  filter:alpha(opacity=0);

  opacity:0;

  top:0;

}

body:hover span.energybawah {

  visibility:hidden;

  -moz-transition:all .2s ease-out;

  -o-transition:all .2s ease-out;

  -webkit-transition:all .2s ease-out;

  transition:all .2s ease-out;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

  filter:alpha(opacity=0);

  opacity:0;

  top:100%;

}

body span.energy {

  width:35%;

  border-bottom:5px solid #ccc;

  border-top:5px solid #ccc;

  padding:10px;

  background:#000;

  border-radius:20px;

  font-size:20px;

  color:#fff;

  text-align:center;

  position:absolute;

  position:fixed;

  left:32%;

  right:45%;

  top:40%;

  bottom:45%;

  margin:0 0 0 0;

  z-index:123455543123445556888;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

  filter:alpha(opacity=100);

  opacity:1;

  -moz-transition:all 3s ease-in;

  -o-transition:all 3s ease-in;

  -webkit-transition:all 3s ease-in;

  transition:all 3s ease-in;

  -moz-box-shadow:0 0 20px 3px #6405C2;

  -webkit-box-shadow:0 0 20px 3px #6405C2;

  box-shadow:0 0 20px 3px #6405C2;

}

body:hover span.energy {

  visibility:hidden;

  -moz-transition:all .7s ease-out;

  -o-transition:all .7s ease-out;

  -webkit-transition:all .7s ease-out;

  transition:all .7s ease-out;

  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

  filter:alpha(opacity=0);

  opacity:0;

  right:0;

  z-index:99999999;

BACA JUGA : JAGAD SEO JAGADPOKER

Catatan :
- Kode CSS diatas sama saja fungsinya, hanya saja yang compress lebih padat, sedangkan yang beautify lebih cantik sehingga mudah untuk di edit.
- Untuk mengganti warna silahkan silahkan cari kode warnanya disini Kode Warna HTML.

5. Cari kode <body>
6. Copy kode html dibawah ini, lalu Paste dibawah kode <body>

<span class='energyatas'></span>

<span class='energy'><data:blog.title/><br/><span style='font-size:11px;color:#fff'>Gunakan Scroll Mouse/Keyboard Untuk Mengscroll Halaman</span></span>

Catatan :
<data:blog.title/> merupakan nama blog Anda, jika bisa diganti tuilsan sesuai selera anda

7. Klik Simpan Template

cara membuat saving mode dengan widget 2016-12-26T12:33:00+07:00 Rating: 4.5 Diposkan Oleh: aikaNet