Cara Ini dapat Meningkatkan Seo blogging dengan Preloader


RumahMed - Preloader merupakan hal yang Lumayan Penting. Kenapa saya bilang lumayan, karena Jika dibilang Sangat penting ya engga juga, jika dibilang engga penting ya salah. Kegunakan Preloader ini adalah untuk mempercantik tampilan Website atau Blogger. Dapat meningkatkan pengunjung juga. Pada Kesempatan kali ini saya akan share bagaimana cara menambahkan Preloader pada Blog. Pertama-tama yang perlu disiapkan adalah Kode Preloader. Preloader dapat membuat blog anda terlihat menarik dan pengunjung menjadi betah singgah di blog anda. Langsung saja Simak Tutorial Berikut.

Pertama buka Blogger anda : Blogger.com
Lalu masuk pada menu Tema

Klik Edit HTML kemudian cari kode ]]></b:skin> Copy kode berikut

<div id='loader'>
<div class="spinner"></div>
    </div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
    <script type='text/javascript'>
        $(window).load(function () {
            setTimeout(function () {
                $(&quot;.spinner&quot;).fadeOut(&quot;slow&quot;);
                setTimeout(function () {
                    $(&quot;#loader&quot;).fadeOut(&quot;slow&quot;)
                }, 1000)
            }, 1000)
        });
    </script>
<style>#loader{position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(#1f3a47,#0b1114);z-index:1000}.spinner{position:relative;margin:180px auto auto;box-sizing:border-box;background-clip:padding-box;width:200px;height:200px;border-radius:100px;border:4px solid rgba(255,255,255,0.1);-webkit-mask:linear-gradient(rgba(0,0,0,0.1),black 90%);transform-origin:50%60%;transform:perspective(200px)rotateX(66deg);animation:spinner-wiggle 1.2s infinite}@keyframes spinner-wiggle{30%{transform:perspective(200px)rotateX(66deg)}40%{transform:perspective(200px)rotateX(65deg)}50%{transform:perspective(200px)rotateX(68deg)}60%{transform:perspective(200px)rotateX(64deg)}}.spinner:before,.spinner:after{content:"";position:absolute;margin:-4px;box-sizing:inherit;width:inherit;height:inherit;border-radius:inherit;opacity:.05;border:inherit;border-color:transparent;animation:spinner-spin 1.2s cubic-bezier(0.6,0.2,0,0.8)infinite,spinner-fade 1.2s linear infinite}.spinner:before{border-top-color:#66e5ff}.spinner:after{border-top-color:#f0db75;animation-delay:0.3s}@keyframes spinner-spin{100%{transform:rotate(360deg)}}@keyframes spinner-fade{20%{opacity:.1}40%{opacity:1}60%{opacity:.1}}</style>

Berikut adalah Tutorial menambahkan Preloader pada Website atau blogger. Semoga bermanfaat untuk Semua.

Bagikan




Jangan lewatkan

Cara Ini dapat Meningkatkan Seo blogging dengan Preloader
4/ 5
Oleh