Tutorial Blogger | category | Tips

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTyqert-06Sd7-uHctKJWiKtZVJPeKioUpxUrubEcfg56vVOXOe9g-g-uJvv6_aPqv0zlKkjk6UVBIA3T2WrmhPVOPh081_QoovJjrxfkCONz1JmURXX1yuyA02yxxp6gwjzKoFnPjKWtV/s1600/3vZarrowupcir2wy.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="318" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTyqert-06Sd7-uHctKJWiKtZVJPeKioUpxUrubEcfg56vVOXOe9g-g-uJvv6_aPqv0zlKkjk6UVBIA3T2WrmhPVOPh081_QoovJjrxfkCONz1JmURXX1yuyA02yxxp6gwjzKoFnPjKWtV/s1600/3vZarrowupcir2wy.jpg" width="320" /></a></div>
<blockquote class="tr_bq">
<blockquote class="tr_bq">
<blockquote class="tr_bq">
<blockquote class="tr_bq">
<div class="irc_mutc">
</div>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
<div style="text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif;">Selamat datang trimakasih sudah berkunjung, di sini ane mau bagiin tutorial cara membuat tombul back to top pada blog sebelum nya apa itu tombol back to top?.</span></div>
<div style="text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif;">Back to top atau kembali keatas akan otomatis muncul pada halaman yang kita scrol ke bawah. biasa nya terdapat pada sudut kana bawah blog, Back to top hanyalah sebuah fitur tambahan yang mana akan mempermudah bagi para pengunjung blog yang membaca sebuah artikel yang cukup panjang kebawah lalu ia ingin kembali ke atas tanpa harus meng'scrol tetapi cukup dengan sekali klik yaitu dengan meng'klik tombol Back to top langsung kembali ke atas.</span></div>
<span style="font-family: Arial, Helvetica, sans-serif;">Yang ingin mencobanya bisa ikuti tutorial di bawah ini..</span>
<b style="background-color: white; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 25.6000003814697px; margin: 0px; padding: 0px; vertical-align: baseline;"><br /></b><br />
<b style="background-color: white; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 25.6000003814697px; margin: 0px; padding: 0px; vertical-align: baseline;">Langkah 1</b><span style="background-color: white; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 25.6000003814697px; margin: 0px; padding: 0px; vertical-align: baseline;"> : Simpan kode jQuery di atas </span><code style="background-color: #f3f3f3; border: 1px solid rgb(200, 200, 200); color: #333333; font-family: 'Courier New', Courier, monospace; font-size: 16px; font-stretch: inherit; line-height: 25.6000003814697px; margin: 0px; padding: 2px 4px; vertical-align: baseline;"></head></code><br />
<pre code="" data-codetype="JQuery"><script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
</pre>
<span style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 25.6000003814697px;">lewati langkah ini apabila di blog sobat sudah ada. Versi bisa berbeda-beda seperti 1.3.2, 1.6.4, 1.7.1, dll.</span><br />
<b style="background-color: white; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 25.6000003814697px; margin: 0px; padding: 0px; vertical-align: baseline;"><br /></b>
<b style="background-color: white; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 25.6000003814697px; margin: 0px; padding: 0px; vertical-align: baseline;">Langkah 2</b><span style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 25.6000003814697px;"> : Simpan kode ini masih di atas </span><code style="background-color: #f3f3f3; border: 1px solid rgb(200, 200, 200); color: #333333; font-family: 'Courier New', Courier, monospace; font-size: 16px; font-stretch: inherit; line-height: 25.6000003814697px; margin: 0px; padding: 2px 4px; vertical-align: baseline;"></head></code><br />
<pre data-codetype="JavaScript"><script type='text/javascript'>
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').slideDown(200); } else { $('#BounceToTop').slideUp(300); } });
$('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); });
</script>
</pre>
<b style="background-color: white; border: 0px; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 25.6000003814697px; margin: 0px; padding: 0px; vertical-align: baseline;">Langkah 3</b><span style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 25.6000003814697px;"> : Buat widget baru HTML/JavaScript, simpan kode ini :</span>
<br />
<pre data-codetype="CSS"><style type='text/css' scoped='scoped'>
#BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none}
</style>
<div id='BounceToTop'><img alt='Back to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1ch5DTjKTE9yi2M_HNozR-vFtwduHX5bhreZ_waRypOIXcNHimE2Em_oWXs1RziPZo6bnQdg5xxpAckkyrinE1WXDVjprfigivqi-lwI2aDH14gVCJNSnMhXAyJdiyUwMXr08LnuPMTh9/s1600/arrow-up_basic_blue.png'/></div>
</pre>
Klik save

Selamat datang trimakasih sudah berkunjung, di sini ane mau bagiin tutorial cara membuat tombul back to top pada blog sebelum n...

<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="" style="clear: both; text-align: left;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYMAAVisLeaxs6QjvKPfN8hD-4XWYkIxSjw3ouIHZgDbX-GEYiB5SHRiqsH9NCr8SwpREPOANpVCh0Zb3vzUxJm2Hfa6OqmoyR2lirYR6jBtzz3LLlM_T3EyYRRyN_ZizztxBPX8WYYxjc/s1600/loading.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="211" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYMAAVisLeaxs6QjvKPfN8hD-4XWYkIxSjw3ouIHZgDbX-GEYiB5SHRiqsH9NCr8SwpREPOANpVCh0Zb3vzUxJm2Hfa6OqmoyR2lirYR6jBtzz3LLlM_T3EyYRRyN_ZizztxBPX8WYYxjc/s1600/loading.gif" width="320" /></a></div>
<div style="text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif;">Selamat datang sobat, Efek loading pada blog/web kelihatan nya memang kren, bukan hanya kren saja itu juga menggambarkan kreatifitas si pembuat blog. Apa yang di maksud dengan Animasi loading pada blog?</span></div>
<div style="text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif;">membuat efek animasi <i>loading</i> pada saat halaman berpindah dengan cara menyeleksi semua tautan internal untuk memicu tampilnya <i>overlay</i>/tabir animasi saat tautan tersebut diklik. bahasa sederhananya begini, Misal kita ingin pindah ke halaman lain atau me' realod halaman, di saat dalam proses memuat halaman yang baru maka efek loading itu akan keluar, bisa berupa gambar GIF dll yang menggambarkan terjadinya proses loading.</span></div>
<div style="text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif;">Jika sobat ingin mencobanya silahkan ikuti tutorial di bawah.</span></div>
<div style="text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div style="text-align: justify;">
letakkan kode CSS ini di atas <span style="color: orange;"><code>]]></b:skin></code></span> atau <span style="color: orange;"><code></style></code>:</span></div>
</div>
<pre data-codetype="css">#page-loader {
  position:fixed !important;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:9999;
  background-color:black;
  color:white;
  padding:1em 1.2em;
  display:none;
}
</pre>
<br />
<span style="background-color: white; color: #333333; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; line-height: 25.6000003814697px;">Kemudian sisipkan kode ini di atas </span><span style="background-color: white; border: 0px; color: orange; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 16px; font-stretch: inherit; line-height: 25.6000003814697px; margin: 0px; padding: 0px; vertical-align: baseline;"><code style="background-color: #f3f3f3; border: 1px solid rgb(200, 200, 200); color: inherit; font-family: 'Courier New', Courier, monospace; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 2px 4px; vertical-align: baseline;"></body></code>:</span><br />
<pre data-codetype="JQuery"><script>
//<![CDATA[
// Menyisipkan markup tabir animasi
$(document.body).append('<div id="page-loader">Loading...</div>');
// Saat halaman terpicu untuk berpindah/keluar menuju halaman lain...
$(window).on("beforeunload", function() {
    // ... tampilkan tabir animasi dengan efek `.fadeIn()`
    $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
</pre>
<br />
<span style="font-family: Georgia, Times New Roman, serif;"><b>Save Template</b></span>

Selamat datang sobat, Efek loading pada blog/web kelihatan nya memang kren, bukan hanya kren saja itu juga menggambarkan kreatifitas s...

Tips | Trick

Membuat Tombol Back to Top dengan Efek bounce

Membuat Efect Animasi Loading Pada Blog