Home » , » Cara Membuat Dan Memasang Screensaver Di Blog

Cara Membuat Dan Memasang Screensaver Di Blog

Written By Ku Copas on Saturday, 8 September 2012 | 9/08/2012 02:07:00 pm

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.

Cara Membuat Dan Memasang Screensaver Di Blog

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...

Artikel Terkait:

thumbnail Title: Cara Membuat Dan Memasang Screensaver Di Blog
Posted by:Ku Copas
Published :2012-09-08T14:07:00+07:00
Rating: 5
Reviewer: 737 Reviews
Cara Membuat Dan Memasang Screensaver Di Blog
Comments
8 Comments

8 comments:

  1. Coba-Coba gan heheh... mampir dong cek tkp

    ReplyDelete
  2. Thanks gan
    Dari http://yosua-pitoy.blogspot.com

    ReplyDelete
  3. coba dulu ahk,, mampir ya gan..
    thankxx ya info nya.... sukses sllu

    ReplyDelete
    Replies
    1. wokay... sukses jg buat km sob...

      Delete
  4. kunjungan silaturahmi,, dari www.new-satelit.com ,,salam kenal sob,,

    ReplyDelete
  5. waktu stand by nya berapa menit BOZZ, koq kaga keluar lagi, malah keluar pada saat dipanggil aja alamat blognya ???????????????????????

    ReplyDelete

 
Support : Google | Yahoo | Bing
Copyright © 2011-2013. KUCOPAS - All Rights Reserved
Sitemap | About Me | Contact Us | Privacy Policy
Proudly powered by Blogger