Pages

▼

WordPress için Youtube Tarzı Yükleniyor Çubuğu


youtubeMerhaba arkadaşlar Youtube‘da gezerken Youtube’un yeni yükleniyor çubuğu/barı bende olduğu gibi birçok kişininde ilgisini çekmiştir. Bende bu olayı birkaç sitede daha gördükten sonra bi araştırma yaptım fakat türkçe kaynaklı sitelerde bulamayınca yabancı kaynakta araştırma yaptım ve sonunda WordPress‘e uyarlanmış halini buldum. Aşağıdaki işlemleri sırasıyla yaptığınız taktirde sizde çok kolay bir şekilde kendi sitenize ekleyebilirsiniz.

1. Adım: Functions.php’i açığ aşağıdaki kodu php tagları arasında biryere yapıştırın.
1
wp_enqueue_script('jquery');
2. Adım: Style.css dosyasını açığ aşağıdaki kodları dilediğiniz yere yağıştırın.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
#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);
}
3. Adım: Header.php’yi açın ve aşağıdaki kodu head tagından önce yapıştırın
1
2
3
4
5
6
7
8
9
<script>
jQuery(document).ready(function() {
jQuery("body").append(jQuery("<div><dt/><dd/></div>").attr("id", "progress"));
jQuery("#progress").width(100+ "%");
jQuery("#progress").width("101%").delay(800).fadeOut(400, function() {
jQuery(this).remove();
});
});
</script>

Hiç yorum yok:

Yorum Gönder