Judul : Cara Memasang Material Loader Pada Blog
link : Cara Memasang Material Loader Pada Blog
Cara Memasang Material Loader Pada Blog
Halo sobat master seo . Berjumpa lagi bersama saya Muhammad Al-Amin , disini saya akan kembali membawakan artikel seputar blogging dalam kategori tutorial . Nah kali ini saya akan memberika tutorial cara memasang material loader pada blog .
1. Pertama masuk ke blogger.com
2. Pilih tab Template -> Edit HTML
3. Pastekan css berikut tepat di atas </style> atau ]]></b:skin>
/* Material 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}@-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)}4.Pastekan Html berikut dibawah kode <body> atau <body
<div id='loader-wrapper'>
<div id='loader'>
</div>
<div class='loader-section section-left'></div>
<div class='loader-section section-right'></div>
</div>5.Pastekan javascript berikut tepat di atas kode </body>
<script>
//<![CDATA[
$(window).bind("load",function(){$("#loader-wrapper").fadeOut(1e3)});
//]]>
</script>
6.Simpan template sobat lalu lihat hasilnya Itulah tadi cara memasang material loader di blog , semoga bermanfaat bagi sobat semua . Jangan lupa subscribe artikel pintar untuk terus mendapatkan artikel terbaru seputar blogging,seo,adsense,internet,teknologi,games,software,desain,dan sebagainya . Sekian dan terimakasih .
Salam Blogger
Demikianlah Artikel Cara Memasang Material Loader Pada Blog
Sekianlah artikel Cara Memasang Material Loader Pada Blog kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel Cara Memasang Material Loader Pada Blog dengan alamat link https://tipstopmarketing.blogspot.com/2016/08/cara-memasang-material-loader-pada-blog.html
0 Response to "Cara Memasang Material Loader Pada Blog"
Post a Comment