Membuat Saving Mode Blog dengan CSS
Membuat Saving Mode Blog dengan CSS - Saving mode pada website atau blog berfungsi sebagai penghemat daya laptop, tapi juga bisa mempercantik tampilan sebuah blog. Kebanyakan script pada fitur saving mode dengan menggunakan javascript, tapi kali ini Tukang Toko Online akan membagikan cara membuat membuat saving mode pada blog dengan script CSS dan HTML, sehingga bisa cukup ringan dan tidak membebani loading blog anda.
Sekilas tampilan saving mode akan tampak seperti screen shot di bawah ini:
Anda juga bisa membaca artikel yang berkaitan berikut ini:
Langkah 1# masuk ke dashboard blog anda, menuju ke opsi template >> klik edit HTML.
Langkah 2# pasang kode menurut panduan berikut ini:
Taruh kode berikut di atas kode ]]></b:skin>
Taruh kode html berikut di bawah kode <body>
Sekilas tampilan saving mode akan tampak seperti screen shot di bawah ini:
Anda juga bisa membaca artikel yang berkaitan berikut ini:
Berikut panduannya:
Langkah 1# masuk ke dashboard blog anda, menuju ke opsi template >> klik edit HTML.
Langkah 2# pasang kode menurut panduan berikut ini:
Taruh kode berikut di atas kode ]]></b:skin>
/* saving mode
----------------------------------------------- */
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}
/* end saving mode
----------------------------------------------- */
Taruh kode html berikut di bawah kode <body>
<span class='energyatas'/>
<span class='energy'><data:blog.title/><br/><span style='font-size:11px;color:#fff'>Gunakan Scroll Mouse/Keyboard Untuk Mengscroll Halaman</span></span>
<span class='energybawah'/>
Keterangan : text warna merah bisa anda ganti sendiri.
Langkah 3# save template
Cukup mudah langkah untuk membuat fitur saving mode pada blog anda. Anda bisa menerapkannya pada blogspot anda. Semoga bermanfaat.
Langkah 3# save template
Cukup mudah langkah untuk membuat fitur saving mode pada blog anda. Anda bisa menerapkannya pada blogspot anda. Semoga bermanfaat.
Posting Komentar untuk "Membuat Saving Mode Blog dengan CSS"
#/ Jangan melakukan SPAM.
#/ Link/URL di kolom komentar otomatis inaktif.
#/ Komentar SARA dan Makian langsung dihapus.
#/ Iklan langsung dihapus