Home Blogger Tips dan Trik Tutorial Blogger

Cara menciptakan imbas Loading Rubik Pada Blog

12:25 AM
A+ A- Print Email
Pada kesempatan kali ini, akan saya share sebuah tutorial bagaimana Tutorial menciptakan dampak loading blog yang menarik dengan imbas rubik. membuat loading blog dengan dampak rubrik ini, akan membuat tampilan blog semakin menarik dan tentunya para pengunjung yang tiba ke blog sobat akan betah berlama lama.

Cara membuat efek Loading Rubik Pada Blog


 jika teman tertarik untuk memberikan imbas rubrik yang mengacak pada blog, berikut tutorialnya:

 1.Sobat masuk terlebih dahulu pada blog sobat.
2. Pada dasbor blogger, klik sajian Template.
Cara membuat dampak Loading Rubik Pada Blog

 3. Selanjutnya di dalam menu Template, klik Edit HTML.
Cara menciptakan dampak Loading Rubik Pada Blog

 4. Carilah aba-aba </head> untuk mempermudah pencarian, klik CTRL + F pada keyboard
5. sehabis arahan </head> di temukan, letakkan instruksi di bawah ini tepat berada di atas instruksi </head>
<style>
/*  loader https://www.serhamo.net/*/
#SEO BLOG-load
position: fixed;
z-index: 50;
top: 0; left: 0;
opacity: 0.9;
width: 100%; height: 100%;
background: #FDFEF8 url(http://3.bp.blogspot.com/-WqA4mLrQVsw/U4COhzzQi2I/AAAAAAAABrw/57-G3Pw25ek/s128-no/Loading.gif) no-repeat center;
line-height: 350px;
text-align: center;
font-size: 36px;
color: #353231;
text-indent: -9999px;

.MD #SEO BLOG-load display: none;
@media only screen and (device-width: 768px)
#loading
position:absolute;
width:1040px;
min-height:768px;


#SEO BLOG-progbar
position: absolute;
top: 0; left: 0;
background: #ED0000;
opacity: 0.8;
width: 0;
height: 5px;

#md-loader
height: 100%;
display: none;

</style>
<script>
(function($)
$(&quot;html&quot;).removeClass(&quot;MD&quot;);
$(&quot;#header&quot;).ready(function() $(&quot;#bingangbingung-progbar&quot;).stop().animate( width: &quot;25%&quot; ,1500) );
$(&quot;#footer&quot;).ready(function() $(&quot;#bingangbingung-progbar&quot;).stop().animate( width: &quot;75%&quot; ,1500) );
$(window).load(function()
$(&quot;#bingangbingung-progbar&quot;).stop().animate( width: &quot;100%&quot; ,600,function()
$(&quot;#bingangbingung-load&quot;).fadeOut(&quot;fast&quot;,function() $(this).remove(); );
);
);
)(jQuery);
</script>

  6. Selanjutnya, masih di dalam Edit HTML, carilah aba-aba <head>
7. sesudah instruksi <head> ditemukan, masukkan kode di bawah ini tepat di bawah aba-aba <head>
<div id='SEO BLOG-load'><div id='SEO BLOG-progbar'/><div id='md-loader'>Loading...</div></div>
8. Terakhir, klik Simpan Template dan lihat perubahan pada blog sobat.
, ,