Cara Membuat Efek Pemuatan Keren Untuk Blogspot


Cara Membuat Efek Pemuatan Keren Untuk Blogspot - Hallo sobat blogger semua, pada kesempatan ini saya akan membagikan tutorial tentang cara membuat efek pemuatan yang sangat keren untuk blogspot, untuk demonya seperti gambar dibawah ini.

Petunjuk Cara Pemasangan :
Untuk menambahkan kode ini buka blogger.com lalu klik "Edit HTML" dan cari tag </body> dan paste semua kode dibawah ini sebelum tag </body>

CSS
<!-- Start Page Loading --> <style>
 /*---------------------------------------- Pre-loader ------------------------------------------*/
#loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; } #loader-wrapper .loader-section { position: fixed; top: 0; width: 51%; height: 100%; background: #eceff1; z-index: 1000; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } #loader-wrapper .loader-section.section-left { left: 0; } #loader-wrapper .loader-section.section-right { right: 0; } #loader { display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: #3498db; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; z-index: 1001; } #loader:before { content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #e74c3c; -webkit-animation: spin 3s linear infinite; animation: spin 3s linear infinite; } #loader:after { content: ""; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #f9c922; -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite; } #loader-logo { display: block; position: absolute; left: 48%; top: 46%; background: url("https://i.imgur.com/Nj02xhh.png") no-repeat center center; z-index: 1001; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } .loaded #loader-wrapper { visibility: hidden; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); -webkit-transition: all 0.3s 1s ease-out; transition: all 0.3s 1s ease-out; } .loaded #loader-wrapper .loader-section.section-left { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .loaded #loader-wrapper .loader-section.section-right { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); } .loaded #loader { opacity: 0; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .progress { background-color: rgba(255, 64, 129, 0.22); } /* JavaScript Turned Off */ .no-js #loader-wrapper { display: none; } </style> <div id='loader-wrapper'> <div id='loader'></div> <div class='loader-section section-left'></div> <div class='loader-section section-right'></div> </div> <script type='text/javascript'> //<![CDATA[ /*Preloader*/ $(window).on('load', function() { setTimeout(function() { $('body').addClass('loaded'); }, 10); }); $(function() { "use strict"; var window_width = $(window).width(); var openIndex; // Detect touch screen and enable scrollbar if necessary function is_touch_device() { try { document.createEvent("TouchEvent"); return true; } catch (e) { return false; } } }); //]]> </script> <!-- End Page Loading -->



Jika sobat ingin kode tersebut dimuat di beranda, masukan kode diatas kedalam tag yang ditandai di bawah ini.

<b:if cond='data:blog.url == data:blog.homepageUrl'>[Masukkan kode pemuatan di sini]</b:if>


Semoga sukses!

0 Response to "Cara Membuat Efek Pemuatan Keren Untuk Blogspot"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

close