Son günlerde damgasını vuran, Youtube de görüldüğü andan itibaren meraklandıran ve araştırılan en çok webmaster konularından birisine daha deyineceğiz. Blogger entegresi dahi edilen bu konu sadece tam olarakWordPress bloglarında sistemli görünmüyor. Bu da sanırım hala bilinmediği için olabilir. Aslında bu konu sadece çok konuklanan bloglarda mevcut ama aslı kaynak yabancı siteler diyebiliriz. Şimdi WordPress sayfalarımızda buYouTube eserini nasıl aktif halde kullanırız onu size bir anlatayım.
1.Adım; İlk önce Functions.php’i açmanız gerekiyor. Şahzen ben böyle yaptım. Şimdi dosyanıza girdiyseniz Php tagları arasında aşağıdaki kodumunu yerleştiriyoruz.
1
| wp_enqueue_script('jquery'); |
2.Adım; Daha sonra da Style.css dosyasınızı açarak aşağıdaki kodları ekliyoruz. Unutmadan yüklenen çubuğu renk’i değiştirmek isterseniz Css de bulunan
0088CC renk kodları ile değiştirebilirsiniz.
1
| #progress{position:fixed;z-index:2147483647;top:0;left:-6px;width:1%;height:2px;background:#08c;-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:#08c 1px 0 6px 1px;-ms-box-shadow:#08c 1px 0 6px 1px;-webkit-box-shadow:#08c 1px 0 6px 1px;box-shadow:#08c 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; Son olarak Header.php’i açarak </head> tagından önce aşağıdaki kodları ekliyoruz.
1
2
3
| <script type="text/javascript">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> |
Evet bir konu sonuna daha geldik. Uygulayamadığınız adımlar varsa yorum alanından belirterek yardımcı olabilirim arkadaşlar. Canlı önizleme istersenizde, sayfamın en üst kısmına sayfayı yenilerken bakabilirsiniz. :)
