Menggabungkan Javascript Untuk Mempercepat Loading Blog

Menggabungkan Javascript Untuk Mempercepat Loading Blog - Sudah banyak kita ketahui bahwa blog yang banyak memasang javascript apalagi javascripnya berukuran besar biasanya loading blog tersebut akan melambat. dan loading blog yang lambat merupakan hal yang tidak disukai oleh google. saya pernah membaca pada situs dan bunyinya seperti ini

Blog Yang Ramah Adalah blog yang sedikit javascripnya

Sebenarnya boleh memasang javascript,  namun cobalah agan pilih mana javascript yang benar-benar dibutuhkan, serta ukurannya tidak terlalu besar, sehingga jika pengunjung blog anda hanya memiliki kecepatan internet hanya sebatas akan senang jika loading blog kita yang cepat.

Untuk itu saya mendapatkan informasi oleh blog Kompi Ajaib tentang Menggabungkan javascript, cara kerja  trik ini adalah dengan menggabungkan kode javascript menjadi satu tag yaitu

<script type='text/javascript'>...Kode Javascript... </script>

Namun mungkin ada beberapa javascript yang tidak bisa untuk digabungkan. Kalau sudah begini anda terpaksa harus memisahkan javascript tersebut, oke sekarang kita akan mempelajari tentang menggabungkan javascript tesebut

Cara Menggabungkan Javascript

Contoh javascript yang akan digabungkan contohnya dua javascript dibawah ini

<script type='text/javascript'>
//<![CDATA[
$(function(){$(".playvideo2").click(function(e){$(".videoyoutubeContainer2").show();$(".playvideo2").hide();$(".videoyoutube2").css({top:"15%",position:"fixed"});$(".videoplayer")[0].src+="&amp;autoplay=1";e.preventDefault()});$(".close-video2").click(function(){$(".videoyoutubeContainer2").hide();$(".playvideo2").show();$(".videoyoutube2").css({top:"-1000px",position:"absolute"});$(".videoplayer")[0].contentWindow.postMessage('{"event":"command","func":"'+"stopVideo"+'","args":""}',"*")})})
//]]>
</script>


<script type='text/javascript'>
//<![CDATA[
var jump=function(e){if(e){var t=jQuery(this).attr("href").replace("/","")}else{var t=location.hash}jQuery("html,body").animate({scrollTop:jQuery(t).offset().top-80},500,function(){})};jQuery(document).ready(function(e){e(document).on("click","a[href*=#]",jump);if(location.hash){setTimeout(function(){e("html, body").scrollTop(0).show();jump()},0)}else{e("html, body").show()}})
//]]>
</script>

Maka javascript tersebut bisa digabungkan menjadi

<script type='text/javascript'>
//<![CDATA[
$(function(){$(".playvideo2").click(function(e){$(".videoyoutubeContainer2").show();$(".playvideo2").hide();$(".videoyoutube2").css({top:"15%",position:"fixed"});$(".videoplayer")[0].src+="&amp;autoplay=1";e.preventDefault()});$(".close-video2").click(function(){$(".videoyoutubeContainer2").hide();$(".playvideo2").show();$(".videoyoutube2").css({top:"-1000px",position:"absolute"});$(".videoplayer")[0].contentWindow.postMessage('{"event":"command","func":"'+"stopVideo"+'","args":""}',"*")})});

var jump=function(e){if(e){var t=jQuery(this).attr("href").replace("/","")}else{var t=location.hash}jQuery("html,body").animate({scrollTop:jQuery(t).offset().top-80},500,function(){})};jQuery(document).ready(function(e){e(document).on("click","a[href*=#]",jump);if(location.hash){setTimeout(function(){e("html, body").scrollTop(0).show();jump()},0)}else{e("html, body").show()}})

//]]>

</script>

Jangan lupa pemisah antara javascript satu dengan yang lainnya dipasahkan dengan tanda titik koma (;) sekarang coba reload halaman blog anda jika ada yang error coba perbaiki lagi javascriptnya mana tau ada yang ketinggalan.

Sebenarnya ada beberapa langkah lagi, namun tidak sempat admin share karena sudah malam sekali dan mau tidur, untuk lebih lengkapnya anda bisa langsung melihat artikel dari kang adhy, oke terimakasih dan semoga bermanfaat

Menampilkan Persentase Pada Scrollbar Blog

Menampilkan Persentase Pada Scrollbar Blog - Agan Pernah mengunjungi blog orang lain lalu melihat persentase di sebelah kanan blog tersebut, bagaimana keren bukan, sebenarnya agan sendiri bisa membuat tampilan persentase scrollbar tersebut, 

Sebenarnya tampilan tersebut hanya membuat blog menjadi menarik saja, tapi bagi yang mau untuk memasang fitur ini admin punya solusinya, persentase yang dihasilkan dapat dimulai dari 0% sampai 100% loh tergantung seberapa banyak agan scroll kebawah, untuk pemasangannya anda bisa lihat tutorial dibawah ini

Cara Menampilkan Persentase Pada Scrollbar Blog

• Pertama, simpan kode di bawah tepat di atas ]]></b:skin> atau </style>

#scroll { 
 display:none; 
 position:fixed; 
 top:0; 
 right:15px; 
 z-index:500; 
 padding:3px 8px; 
 background-color:#369fcf; 
 color:#fff; 
 border-radius:3px; 
 font-size:14px; 
} 
#scroll:after { 
 content: " "; 
 position: absolute; 
 top:50%; 
 right:-10px; 
 height:0; 
 width:0; 
 margin-top:-6px; 
 border:6px solid transparent; 
 border-left-color:#369fcf; 
}

• Setelah itu masukkan code dibawah ini dibawah code </head>

<div id='scroll'></div>

• Simpan kode di bawah ini tepat di atas </body>

<script type='text/javascript'> //<![CDATA[ var scrollTimer = null; $(window).scroll(function() { var viewportHeight = $(this).height(), scrollbarHeight = viewportHeight / $(document).height() * viewportHeight, progress = $(this).scrollTop() / ($(document).height() - viewportHeight), distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2; $('#scroll') .css('top', distance) .text(' (' + Math.round(progress * 100) + '%)') .fadeIn(600); if (scrollTimer !== null) { clearTimeout(scrollTimer); } scrollTimer = setTimeout(function() { $('#scroll').fadeOut(600); }, 1000); }); //]]> </script> 

Langkah Terakhir Save Template Anda Dan lihat Hasilnya :),,,

Itulah cara membuat persentase blog menggunakan jQuery Semoga Bermanfaat,

Sebagian artikel ini dikutip dari http://arlinadesign.blogspot.com/2014/10/memasang-persentase-pada-scrollbar.html

Membuat Progress Loading Bar Blog Seperti Youtube

Membuat Progress Loading Bar Blog Seperti Youtube - Agan agan semua pasti pernah mengunjungi situs youtube, entah itu mau nyari video tutorial maupun hanya sekedar mendengarkan lagu ataupun menonton film. kalau agan perhatiken dengan teliti pada bagian atas situs youtube pasti ada progressbar yang berwarna merah kalau kita baru membuta video. Menurut agan keren bukan ?.

Untuk blogger juga bisa menambahkan desain seperti itu, dengan bantuan javascript, yaitu javascript nanobar, untuk masalah kecepatan loading blog mungkit tidak terlalu membebani karena ukuran jQuery nya pun hanya kecil.

Untuk kustomisasi bisa dibilang sangat mudah karena agan bisa merubah warna maupun ukuran dari nanobar tersebut, untuk reviewnya agan bisa melihat gambar gif dibawah ini

Untuk demo langsungnya agan langsung aja refresh halaman blog ini dan lihat diatas ada garis biru yang berjalan.

Oke untuk menambahkan progressbar seperti you tube ini agan hanya menambahkan code javascript ini diatas code </body>

 
<script type="text/javascript">

//<![CDATA[

var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"2px",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>

Resource by : http://www.kompiajaib.com/2014/11/membuat-progress-loading-bar-blog.html