Cara Membuat Loading Laser Ala Youtube

Cara Membuat Laoding Laser Ala Youtube - Jika anda sering membuka youtube pasti sering melihat notice dibawah navigasi browser anda ataupun diatas logo Youtube yap namanya adalah New Youtube Progress Bar, Progress bar-nya muncul setiap kali Anda membuka video baru di YouTube.

Caranya Adalah

Step 1 : Login Ke Bloger Anda
Step 2 : Seperti biasa buka html editor di blog
Step 3 : letakkan CSS di bawah ini tepat di atas kode ]]</b:skin> atau </style>

/* Youtube Loading */
<Style>
#progress {
position: fixed;
z-index: 2147483647;
top: 0;
left: -6px;
width: 1%;
height: 2px;
background: #0088CC;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
-moz-transition: width 500ms ease-out,opacity 400ms linear;
-ms-transition: width 500ms ease-out,opacity 400ms linear;
-o-transition: width 500ms ease-out,opacity 400ms linear;
-webkit-transition: width 500ms ease-out,opacity 400ms linear;
transition: width 500ms ease-out,opacity 400ms linear;
}
#progress dd, #progress dt {
position: absolute;
top: 0;
height: 2px;
-moz-box-shadow: #0088CC 1px 0 6px 1px;
-ms-box-shadow: #0088CC 1px 0 6px 1px;
-webkit-box-shadow: #0088CC 1px 0 6px 1px;
box-shadow: #0088CC 1px 0 6px 1px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
}
#progress dt {
opacity: .6;
width: 180px;
right: -80px;
clip: rect(-6px,90px,14px,-6px);
}
#progress dd {
opacity: .6;
width: 20px;
right: 0;
clip: rect(-6px,22px,14px,10px);
}
</style>

Step 4 : Simpan kode dibawah ini sebelum </body>

<script type='text/javascript'>
 jQuery(document).ready(function() {
jQuery("body").append(jQuery("
").attr("id", "progress"));

jQuery("#progress").width(100+ "%");

jQuery("#progress").width("101%").delay(800).fadeOut(400, function() {

jQuery(this).remove();

});

});

</script>

Nah sekarang anda bisa melihat youtuber laser loading sudah bersarang di blog anda.

Author : Unknown

Share this

Related Posts