Cara Membuat Energy Saving Mode keren di Blog

tampilan energy saving mode keren di blog

Cara Membuat Energy Saving Mode keren di Blog, Memasang Energy Saving Mode di Blog atau Cara Membuat Energy Saving Mode Dengan CSS di Blog -Mungkin setelah Teman-teman melihat gambar diatas muncul sebuah pertanyaan, kok gambarnya gelap ? nah, itu dia yang akan kita buat dan bahas kali ini. Gambar diatas adalah penampakan dari layar screen Energy Saving Mode

Mungkin teman-teman pernah melihat Energy Saving Mode pada tampilan layar komputer yang di diamkan atau tidak disentuh crousor mouse dan muncul tampilan-tampilan animasi atau poto, begutu juga Energy Saving Mode di Blog, bentuknya tidak jauh berbeda dengan tampilan layar screen pada komputer yang jika di diamkan akan muncul berbagai jenis dan bentuk animasi gambar atau layar screen lainnya, tergantung kreasi kita masing-masing.

Pada Cara Membuat Energy Saving Mode di Blog kali ini, kita akan membuat Energy Saving Mode yang berbentuk nama blog atau lainnya, seperti yang saya jelaskan diatas tergantung kreasi kita masing-masing.
Sebenarnya cara Membuat Energy Saving Mode keren di Blog sudah banyak yang posting, tapi disini saya akan menulisnya kembali, mungkin teman-teman ada yang belum tau bagaimana Cara Membuat Energy Saving Mode keren di Blog dan tampilan Energy Saving Mode itu seperti apa. Jika teman-teman belum tau Energy Saving Mode itu seperti apa, teman-teman bisa lihat disini

DEMO

Bagaimana ?? keren kan ..hehe

Memasang Energy Saving Mode diblog memang bukan suatu keharusan, tapi untuk mempercantik tampilan blog tidak ada salahnya kita memasang Energy Saving Mode. Tapi, menurut saya peribadi, memasang Energy Saving Mode diblog hanya membuat pengujung blog kita merasa kesulitan, terutama pengunjung yang menggunakan Laptop/PC, bisa jadi mereka langsung pergi meninggalkan blog kita.

Cara Membuat Energy Saving Mode keren di Blog Ok, tanpa panjang kali lebar, jika teman-teman tertarik memasang Energy Saving Mode ini, ikuti tutorial dibawah ini :

Seperti biasa, teman-teman harus masuk dulu ke wwww.blogger.com

Selanjutnya klik Template ---> Edit Template

Lalu cari kode ]]></b:skin> gunakan Ctrl+F untuk mempermudah pencarian

Lalu pastekan kode Css dibawah ini tepat di atas kode ]]></b:skin>

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; }

Setelah itu cari kode <body> dan pastekan kode Html dibawah ini tepat di bawah kode <body>

Note : kode <data:blog.title/> bisa teman-teman ganti dengan nama sendiri atau nama blog. Setelah itu simpan template. Sekian postingan saya kali ini, semoga bermanfaat.

Terimakasih sudah membaca (Cara Membuat Energy Saving Mode Keren di Blog)

Baca juga :

Kumpulan Efek Keren Untuk Bloogger

Cara Membuat Auto Readmore Keren Di Blog

Cara memasang Like Facebook google + twitter di bawah postingan

Jangan lupa tinggalkan komentar Anda, Mohon kritik dan sarannya

Description: Cara Membuat Energy Saving Mode keren di Blog
Reviewer: Dunia Komputer
Rating: 4.0
ItemReviewed: Cara Membuat Energy Saving Mode keren di Blog

Cara Membuat Energy Saving Mode keren di Blog

Artikel Terkait :

No comments: