Membuat Progress Bar di Blog seperti Youtube

adscblog

Jika kita jeli memperhatikan sesuatu ketika membuka YouTube,maka akan terlihat garis yang berjalan ketika kita membuka suatu hlaman Video di Yotuturb,ya itu Progress bar,mungkin anda juga tertarik dengan memasang Progress bar seperti pada Youtube tersebut,dan progress bar yang sedang saya tulis ini akan terlihat di bagian atas Header,dan andapun bisa melihat progress bas ini dengan mengklik halaman blog anda

Maka denga mengklik salah satu halaman blog anda,silahkan anda perhatikan di bagian atsa header blog anda maka akan terlihat garis merah yang melaju kebagian kanan pojok atas,nah progress bar ini seperti itu,dan andapun bisa memasang nya di blog anda sebagai pemanis template nya

Dan untung nya progress bar ini tidak menggunakan jQuery sehingga progress bar ini tidak akan mempengaruhi terhadap kecepatan loading blog nya dan akan aman aman saja,progress bar ini memang banyak yang menyukai nya karena dapat menjadi pemanis blog yang dimana ketika membuka suatu halaman akan terlihat yang unik seperti pada YouTube

Pemasangan Progress Bar di blog

Pemasangan Progress Bar ini hanya menggunakan javascript saja tanpa menggunakan jQuery yang dimana slalu membuat loading blog menjadi berat atau telat,jika anda tertarik dengan Progress Bar ini,andapun bisa memasangan nya atau memiliki nya dan menerapkan nya di blog anda dengan memasang nya di bagian template

Dan mungkin anda juga pernah lihat di blog lain nya yang pernah anda kunjungi,dan andapun mungkin tertarik dengan Progress Bar tersebut sehingga anda masuk ke Artikel halaman ini untuk mencari kode Progress Bar tersebut,dan jika anda memang tertarik terhadap Progress Bar tersebut,anda bisa memasangan progress bar ini di blog anda dengan mengikuti langkah-langkah pemasangan nya sebagai berikut

• Seperti biasa masuk ke bagian blogger dengan email dan Pasword
• Setelah itu silahkan klik template
• Kemudianklik edit html
• setelah berada di bagian editan html silahkan anda cari kode </body> untuk memudahkan pencarian nya silahkan anda tekan Ctrl+F secara bersamaan kemudian letakan kode berikut tepat di atas </body>

<script type='text/javascript'>
//<![CDATA[
var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"5px",zIndex:9999,top:"0"},l={width:0,height:"100%",clear:"both",transition:"height .3s"};c=function(a,b){for(var c in b)a.style[c]=b[c];a.style["float"]="left"};f=function(){var a=this,b=this.width-this.here;0.1>b&&-0.1<b?(g.call(this,this.here),this.moving=!1,100==this.width&&(this.el.style.height=0,setTimeout(function(){a.cont.el.removeChild(a.el)},100))):(g.call(this,this.width-b/4),setTimeout(function(){a.go()},16))};g=function(a){this.width=
a;this.el.style.width=this.width+"%"};h=function(){var a=new d(this);this.bars.unshift(a)};d=function(a){this.el=document.createElement("div");this.el.style.backgroundColor=a.opts.bg;this.here=this.width=0;this.moving=!1;this.cont=a;c(this.el,l);a.el.appendChild(this.el)};d.prototype.go=function(a){a?(this.here=a,this.moving||(this.moving=!0,f.call(this))):this.moving&&f.call(this)};e=function(a){a=this.opts=a||{};var b;a.bg=a.bg||"#db3131";this.bars=[];b=this.el=document.createElement("div");c(this.el,
k);a.id&&(b.id=a.id);b.style.position=a.target?"relative":"fixed";a.target?a.target.insertBefore(b,a.target.firstChild):document.getElementsByTagName("body")[0].appendChild(b);h.call(this)};e.prototype.go=function(a){this.bars[0].go(a);100==a&&h.call(this)};return e}();
var nanobar = new Nanobar();nanobar.go(30);nanobar.go(60);nanobar.go(100);
//]]>
</script>

kemudian Save Template dan lihat hasil nya dengan mengklik salah satu artikel yang berada di blog anda
- untuk kode width:"100%",height:"5px",zIndex:9999,top:"0" adalah untuk ketebalan garis Progress Bar tersebut
- Sedangkan untuk kode b;a.bg=a.bg||"#db3131" adalah untuk warna Progress bar tersebut,silahkan anda ganti sesuai dengan keinginan anda

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 14 Juni and have 0 komentar