Selamat pagi bos kuh, semoga di pagi hari nan indah dan cerah ini kita tetap diberi kekuatan dan kesehatan untuk menjalani segala rutinitas, termasuk menghiasi blog kita.. hehe. Nah, pada kesempatan kali ini saya akan membagi cara membuat efek preloding keren dan responsive pada blog.
Apa itu efek preloading ? efek peloading yaitu merupakan sebuah transisi yang akan muncul otomatis ketika kita atau pengunjung memuat sebuah halaman web, dan kemudian selang beberapa saat efek itu akan hilang ketika halaman telah termuat sepenuhnya..
Apa perbedaan efek preloading yang responsive dan tidak responsive ?
Sebagaimana yang kita ketahui, bahwasanya pihak Google dan SEO sangat menganjurkan agar seluruh element blog atau website bersifat responsive, yang dengan kata lain mudah digunakan dalam semua perangkat, baik mobile maupun desktop (Mobile frindly atau user frindly). Hal ini jelas sangat berpengaruh terhadap kualitas pengunjung yang nongkrong ke blog kita. Semakin banyak elemen web yang responsive, semakin banyak pula pengunjung yang hadir.
Salahsatunya yaitu efek preloading. Efek preloading yang responsive akan membuat pengunjung merasa nyaman ketika menatapkan, karena efek ini di suguhkan dengan berbagai varian dan juga tidak memberatkan blog. Nah, langsung saja kita ke intinya ya bos kuh.
Tapi sebelum kita menyisipkan struktur tema preloading pada HTML kita, silahkan cari dulu kode jQuery yang ada bada blog bos kuh dengan jQuery library versi 1.7.1 agar semakin menambah nilai responsive blog bos kuh.
Caranya:
Cari kode jQuery yang telah terpasang pada blog bos kuh (Masuk blog => klik Tema => Edit HTML). Kemudian ganti dengan script jQuery di bawah ini:
Simpan kode jQuery ini di atas kode </body>
Jika sudah, tambahkan kode dibawah ini setelah kode <body>
Apa perbedaan efek preloading yang responsive dan tidak responsive ?
Sebagaimana yang kita ketahui, bahwasanya pihak Google dan SEO sangat menganjurkan agar seluruh element blog atau website bersifat responsive, yang dengan kata lain mudah digunakan dalam semua perangkat, baik mobile maupun desktop (Mobile frindly atau user frindly). Hal ini jelas sangat berpengaruh terhadap kualitas pengunjung yang nongkrong ke blog kita. Semakin banyak elemen web yang responsive, semakin banyak pula pengunjung yang hadir.
Salahsatunya yaitu efek preloading. Efek preloading yang responsive akan membuat pengunjung merasa nyaman ketika menatapkan, karena efek ini di suguhkan dengan berbagai varian dan juga tidak memberatkan blog. Nah, langsung saja kita ke intinya ya bos kuh.
Tapi sebelum kita menyisipkan struktur tema preloading pada HTML kita, silahkan cari dulu kode jQuery yang ada bada blog bos kuh dengan jQuery library versi 1.7.1 agar semakin menambah nilai responsive blog bos kuh.
Caranya:
Cari kode jQuery yang telah terpasang pada blog bos kuh (Masuk blog => klik Tema => Edit HTML). Kemudian ganti dengan script jQuery di bawah ini:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>Jika sudah selesai, masih di dalam edit HTML, sekarang cari kode </body>
Simpan kode jQuery ini di atas kode </body>
<script type='text/javascript'>
//<![CDATA[
// Preloader
$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]>
</script> Jika sudah, tambahkan kode dibawah ini setelah kode <body>
<div id='preloader'>
<svg class='spinner' height='50px' viewBox='0 0 66 66' width='50px' xmlns='http://www.w3.org/2000/svg'>
<circle class='path' cx='33' cy='33' fill='none' r='30' stroke-linecap='round' stroke-width='4'/>
</svg>
</div> *Jika proses tidak ada struktur tema yang rusak, maka tambahkan kode di bawah ini tepat di atas kode </head>
<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:calc(50% - 20px);left:calc(50% - 20px);animation:rotator 1.4s linear infinite}
@keyframes rotator{0%{transform:rotate(0deg)}100%{transform:rotate(270deg)}}
.path{stroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:dash 1.4s ease-in-out infinite,colors 5.6s ease-in-out infinite}
@keyframes colors{0%{stroke:#4285F4}25%{stroke:#DE3E35}50%{stroke:#F7C223}75%{stroke:#1B9A59}100%{stroke:#4285F4}}
@keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}100%{stroke-dashoffset:187;transform:rotate(450deg)}}
</style> Nah, sekarang saya akan membagikan efek preloading yang lain yaitu efek preloading Bounce DOT. Cara pemasangan sama sebagaimana cara di atas. Hanya tinggal mengganti kode preloading di atas yang ada setelah <body> dan </head> dengan kode dibawah ini:
<div id='preloader'>
<div id='container' class='spinner'>
<div id='dot'></div>
<div class='step' id='s1'></div>
<div class='step' id='s2'></div>
<div class='step' id='s3'></div>
</div>
</div> <style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#54B4F5;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
#container{margin:-45px -60px;width:120px;height:90px;position:absolute;top:50%;left:50%}
#dot{background:#FFF;border-radius:50%;width:30px;height:30px;position:absolute;bottom:30px;left:27px;transform-origin:center bottom;animation:dot .6s ease-in-out infinite}
@-webkit-keyframes dot{0%{transform:scale(1,.7)}20%{transform:scale(.7,1.2)}40%{transform:scale(1,1)}50%{bottom:100px}46%{transform:scale(1,1)}80%{transform:scale(.7,1.2)}90%{transform:scale(.7,1.2)}100%{transform:scale(1,.7)}}
.step{position:absolute;width:30px;height:30px;border-top:2px solid #FFF;top:0;right:0}
@-webkit-keyframes anim{0%{opacity:0;top:0;right:0}50%{opacity:1}100%{top:90px;right:90px;opacity:0}}
#s1{animation:anim 1.8s linear infinite}
#s2{animation:anim 1.8s linear infinite -.6s}
#s3{animation:anim 1.8s linear infinite -1.2s}
</style> Nah, itulah tutorial cara membuat efek preloading keren dan juga responsive untuk blog. Semoga artikel singkat ini dapat memberi manfaat pada kita semua.. aamiin.
S E L E S A I...
EmoticonEmoticon