Cara Membuat Dan Memasang Screensaver Di Blog

KUCOPAS - Cara Membuat Dan Memasang Screensaver Di Blog. Kali ini saya akan share kembali artikel posting trik blog tentang cara mudah membuat dan memasang screensaver di blog. Sebenarnya dulu sudah lama sekali sekitar satu tahun yang lalu saya sudah pernah share artikel ini, namun karena ada kendala dan perbaikan dalam template blog saya, akhirnya artikel ini hanya saya simpan dalam draf dan kini akan saya perbarui lagi.

Sekedar pengertian untuk sobat semua, memasang Screensaver diblog ini hanyalah semacam pernak-pernik untuk mempercantik tampilan blog. Fungsinya adalah semacam Energy Saving Mode yang menggunakan CSS dan efeknya bisa terlihat saat bila mouse pointer di diamkan atau tidak digerakkan, maka screensaver ini akan muncul untuk menutupi halaman blog yang dibuka pada layar komputer atau laptop. Namun bila mouse digerakkan, maka screensaver ini akan menghilang dengan gerakan memutar dan terbuka lagi halaman blog tersebut.

Trik membuat dan memasang Screensaver dengan CSS di blog ini saya dapat dari sobat Teja HTC, namun kode CSS-nya saya modifikasi sedikit. Untuk mengetahui tampilanya screensaver di blog ini seperti apa, kurang lebih seperti gambar screenshot berikut di bawah ini.

DEMO

Cara pemasangannya diblog sangatlah mudah, karena tanpa Edit HTML dalam template blog sobat. Jika sobat tertarik untuk membuat dan memasang screensaver dengan CSS ini diblog sobat, silahkan sobat ikuti langkah-langkahnya sebagai berikut.

Cara Membuat Dan Memasang Screensaver Di Blog

1. Silahkan sobat >> Masuk/Login >> Ke Blogger.com menggunakan akun sobat.
2. Pada Dashboard tampilan blogger baru, pilih dan klik menu >> Tata Letak >> klik >> Tambah Gadget >> Pilih dan klik >> HTML/JavaScript.
3. Kemudian Masukkan semua Kode CSS berikut pada kotak HTML/JavaScript.

<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'>KUCOPAS<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:

• Sobat bisa mengedit kode CSS tersebut dengan catatan bila sudah mahir mengenai kode CSS.
• Warna HIJAU silahkan sobat ganti dengan Nama sobat atau Nama blog sobat.
• Warna MERAH silahkan sobat ganti dengan kata-kata atau tulisan sesuai dengan keinginan sobat.

4. Setelah sobat selesai mengganti dan mengedit kode CSS diatas, jangan lupa kilk >> Simpan dan nikmati hasil screensaver yang sudah terpasang disemua halaman blog sobat.

Demikian artikel posting ringan tentang trik Cara Membuat Dan Memasang Screensaver Di Blog yang dapat saya share, semoga bisa sangat bermanfaat bagi sobat KUCOPAS semua. Happy Blogging...