Jumat, 11 April 2014

Membuat Screensaver Pada Blog

Diposting oleh Chery di 22.24 0 komentar

Membuat Screensaver Pada Blog


Screensaver atau yang biasa disebut energy saving mode merupakan sebuah tampilan stanby dari layar dimana seluruh aktivitas dihentikan sementara. Screensaver akan tampil ketika blog dalam keadaan diam tanpa aktivitas dengan memunculkan sebuah halaman baru yang menutupi seluruh layar. Namun tampilan layar akan kembali normal ketika mouse digerakan. Selain untuk memperindah tampilan blog, screensaver juga digunakan untuk menghemat energy.
Itu tadi merupakan sedikit penjelasan mengenai screensaver. Sekarang saya akan membagikan cara untuk memasangnya pada blog anda.


Langkah-langkah membuat screensaver pada blog:
  • Login.
  • Pilih menu "Tata Letak".
  • Klik "Tambahkan Gadget".
  • Pilih widget "HTML/JavaScript".
  • Isi konten dengan kode yang ada dibawah,
<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_kucopas {
    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_kucopas 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'>Chery Gultom<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/>Gerakkan mouse anda dan silahkan baca kembali posting kami!</span></p>
<div class='by_kucopas'>Support design by: <span class='esm4'>KUCOPAS</span> - September 2012</div>
</div>
Keterangan: sumber script, c-gultom.blogspot.com. ganti kode berwarna merah sesuai dengan keinginan anda.

  • Klik "Simpan".



Scrensaver diatas hanya memunculkan sebuah text/tulisan. Jika anda ingin menggunakan gambar pada screensaver diblog anda, caranya sama saja, hanya pada bagian "HTML/JavaScript" isikan konten-nya dengan kode dibawah,
<script type="text/javascript" src="https://sites.google.com/site/vikrymadzblogspotcom/vikrymadz/screensavervikry.js">
</script>
<style type='text/css'>
div#energysaving, div#energysaving * {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border: 0;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaLxn9UxtXv5rttB3-0X2DyY52CPQ7yhS82b-bLtsM7cwwXlC1E-RaNWwrLrWBhlJqI0GQNZqshHCsbh5_zQosIv6bKENNKalzDovrxduk_ZZpbOtYE1OiwO07v4_3EiyeUrC5BgIA4RJc/) no-repeat center center fixed black;
}
div#energysaving p span {
    display:none;
    visibility:hidden;
}
</style>
Keterangan : ganti kode berwarna merah dengan URL gambar anda.

  • Klik "Simpan".


Sekarang anda hanya perlu memilih ingin menggunakan script yang mana.
Hanya itu penjelasan yang bisa saya berikan tentang membuat screensaver pada blog.
Kurang lebihnya mohon maaf.
Semoga bermanfaat.




Sumber : www.c-gultom.blogspot.com

Leave a Reply