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'>Shoffa Ashhabul Kirom</span></span>
<span class='energybawah'/>
Keterangan : text warna biru 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.
Tidak ada komentar:
Posting Komentar