Membuat Saving Mode Blog dengan CSS - Hallo sahabat TIPS BELAJAR BISNIS ONLINE DAN INTERNET MARKETING, Pada Artikel yang anda baca kali ini dengan judul Membuat Saving Mode Blog dengan CSS, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Blogger Widget, Artikel tutorial, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Membuat Saving Mode Blog dengan CSS
link : Membuat Saving Mode Blog dengan CSS

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:

• Plugin All In One SEO Pack untuk Blogspot
• Kesalahan Utama dalam SEO

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.

Demikianlah Artikel Membuat Saving Mode Blog dengan CSS

Sekianlah artikel Membuat Saving Mode Blog dengan CSS kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Membuat Saving Mode Blog dengan CSS dengan alamat link https://tipstopmarketing.blogspot.com/2015/01/membuat-saving-mode-blog-dengan-css.html

Tweet