Cara Memasang Energy Saving Mode CSS3 di BlogDETIK

Posted on Desember 31st, 2010 oleh gubhugreyot

Aku benar-benar bersyukur menyambut datangnya tahun baru 2011. Yah, bagaimana tidak? Satu hoby besar ku hanyalah mengobrak-abrik template blog agar blog bisa tampil variatif. Jika beberapa bulan belakangan ini aku mandeg ngeblog di blogDETIK, tak lain dan tak bukan adalah mandegnya kreatifitas karena keterbatasan improvisasi yang mungkin dilakukan di blog hebat ini akibat batasan yang super ketat terhadap penambahan kode HTML baru yang berupa xHTML, kode CSS dan javascript. Sekali lagi bersyukur bahwa bersamaan dengan datangnya tahun yang baru, sebuah kebijakan baru telah datang. “Bebasnya menambah dan menyimpan kode HTML baru di template blogDETIK!”. Memang …, kebebesan ini tak sepenuhnya seperti yang diberikan blogger, namun demikian secuil kebebasan ini sebenarnya memberi peluang yang teramat besar untuk mengembangkan banyak inovasi baru guna menghasilkan blogdetik dengan gaya yang berbeda. Jika sampeyan telah membuka beberapa posting belakangan ini, pasti banyak hal baru yang sebelumnya tak mungkin kita lakukan, kini tak lagi jadi barang langka dan terlarang. Pemasangan Energy Saving Mode yang menggunakan jQuery.1.3.2.min.js, misalnya. Atau pasang favicon di address bar dan buat cursor image? Barang-barang tersebut dulu sama sekali tak mungkin terpasang dan memberi keindahan tapi kini? He …. Please … please …. buat saja sebanyak sampeyan suka!

Sebagai wujud ungkapan syukur terhadap blogDETIK, dalam tutorial blogDETIK dan panduan blogDETIK kali ini kita akan memberi panduan membuat “Energy Saving Mode Menggunakan CSS3″. He … he … boleh percaya, boleh tidak! Energy Saving Mode CSS3 ini benar-benar asli produk dalam negeri buah perasan keringat “anak sablentg” alias si gubhug reyot. Sekalipun telah terpostingkan di gubhugreyot.blogspot.com pada Sabtu, 16 Oktober 2010, karena panduan yang ada hanya untuk pemasangan di blogspot, maka kali ini kita coba berikan panduan khusus buat pemasangan di template blogDETIK. Semoga produksi anak bangsa ini memberi manfaat dan mampu meningkatkan semangat untuk menciptakan berbagai kreatifitas baru yang lain bagi teman-teman blogger dan d’blogger khususnya. Jika sampeyan ingin membuka panduan yang sementara juga sudah terpostingkan di blogspot, silahkan baca melalui link di bawah ini:

Panduan Membuat Energy Saving Mode

Perlu untuk disampaikan dalam forum ini, bahwa terciptanya energy saving mode CSS3 ini disebabkan oleh atensi blogger yang begitu besar untuk menggunakan energy saving mode di blog masing-masing, padahal jika kita menggunakan energy saving mode jQuery maka setidak-tidaknya bagi sobat blogger yang selama ini tak menggunakan jQuery.1.3.2.min.js atau jQuery.1.3.2.js maka tentu saja beban blog akan bertambah dengan digunakannya jQuery. Di luar hal tersebut, satu pertuimbangan yang lain adalah dampak negatif yang muncul akibat energy saving mode jQuery pada blog yang di dalamnya memanfaatkan scroll box untuk wadah link. Dari evaluasi yang dilakukan, setelah blog terbuka selama 10 menit dan energy saving mode jquery aktif untuk pertama kali, maka setelah cursor digerakkan dan blog kembali terbuka, maka beberapa link dalam scroll box menjadi tidak dapat terdeteksi oleh mouse (cursor). Akibat yang fatal ini terus terang akhirnya membuat sebuah pemikiran baru untuk memanfaatkan CSS3 sebagai desain alternatif. Jika sampeyan menggunakan energy saving mode CSS3 tentu saja hanya akan berfungsi dengan baik dalam arti efek menjadi terlihat hanya ketika pengunjung membuka blog di browser yang support terhadap CSS3. Sekalipun demikian sampeyan juga tak perlu kuwatir,. Biar efek indahnya tak terlihat di browser yang belum support CSS3, namun untuk sekedar menjalankan fungsi utamanya membuat layar menjadi terang ataupun gelap, desain ini tetap bisa bekerja dengan optimal. Dan satu lagi yang mungkin harus kita renungkan! Bukankanh semua browser yang sementara ini ada lambat laun tetap akan support CSS3?! Ya …, karena memang kode CSS terbaru ini akan menjadi pilar pembangunan desain web/blog di masa ke depan!

xHTML dan Kode CSS Energy Saving Mode CSS3

<style type="text/css">
/* original code by: gubhugreyot.blogspot.com - gubhugreyot.blogdetik.com - Oct 2010 */
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: #333;text-shadow: 1px 1px 2px #ccc;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;}/* original code by: gubhugreyot.blogspot.com - gubhugreyot.blogdetik.com - Oct 2010 */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;}/* original code by: gubhugreyot.blogspot.com - gubhugreyot.blogdetik.com - Oct 2010 */.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_gubhugreyot {margin-left: 30px;text-align: left;color: #015828;font-size: 12px;font-weight: normal;position: absolute;top: 550px;width: 100%;height: 20px;left: 0;}/* original code by: gubhugreyot.blogspot.com - gubhugreyot.blogdetik.com - Oct 2010 */.saving .by_gubhugreyot 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'>gubhug reyot<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 nikmati kembali posting kami!</span></p>
<div class='by_gubhugreyot'>Original design by: <span class='esm4'> gubhugreyot.blogspot.com - gubhugreyot.blogdetik.com</span> - Oktober 2010</div>
</div>

Jika sampeyan tertarik untuk memasang Energy Saving Mode CSS3 di blog sampeyan, silahkan copy dan pastekan xHTML dan kode CSS-nya ini di template melalui Widgetize Any HTMl yang bisa di buka melalui halaman dasbor. Untuk mengikuti panduan cara menyimpan kode HTML baru secara lengkap, silahkan buka panduan di bawah ini:

Panduan Cara Memasang atau Menyimpan Kode HTML di blogDETIK

Keterangan/Catatan:

1. Yang pertama-tama sebelum pemasangan Energy Saving Mode CSS3, GR hanya memohon agar seluruh teks gubhugreyot.blogspot.com - gubhugreyot.blogdetik.com yang terdapat di dalam desain ini jangan di hapus. Itung-itung ini sebagai upah atas waktu dan tenaga yang telah tercurah saat pembuatan desain hingga bisa digunakan oleh sobat2 blogger tercinta!.
2. Dalam link di atas akan dijumpai cara pemasangan Javascript Energy Saving Mode.
3. Cara penyimpanan kode tak berbeda antara Kode CSS, javascript ataupun xHTML, oleh karena itu ikuti panduan tersebut dengan seksama.
4. Pada langkah Nomor 6 diperlihatkan contoh penempatan javascript dalam box Widgetize Any HTML. Lakukan cara yang sama akan tetapi yang dimasukkan dalam box dan disimpan adalah HTML dan Kode CSS Energy Saving Mode CSS3.
5. Jika ada sebuah box Widgetize Any HTML yang sebelumnya telah digunakan untuk menyimpan kode CSS, javascript ataupun xHTML seperti misalnya Kode CSS Favicon Address Bar ataupun yang lain, maka simpanlah xHTML dan kode CSS di atas atau di bawah kode kode yang telah tersimpan di dalamnya. Jadi pada dasarnya dalam satu box Widgetize Any HTML dapat digunakan secara berulang-ulang dengan berbagai macam dan fungsi kode.
6. Untuk mengikuti secara lengkap panduan tentang pembuatan Energy Saving Mode CSS3, silahkan buka di gubhugreyot.blogspot.com!

Berbagai tutorial dan panduan blogger dan blogDETIK dapat sampeyan buka dengan

» Happy Blogging «