INFO TERKINI

Setelah kemarin sudah menulis artikel yang bisa disebut membarui modifikasi dari kotak komentar authtr di blogger , maka pada artikel kali ini kita akan pula memodifikasi kembali tombol back to top di blogger. Back to top kali ini sangatlah berbeda dengan back to top yang sudah ada , karena back to top ini hanya akan terlihat di blog anda jika suatu halaman telah bergulir dan jika di klik maka gulungan halaman akan perlahan-lahan ke atas . Untuk penggunaan back to top di blog anda , tidak perlu takut akan beban dari jquerynya , karena sebelum nya telah di sprite untuk menjaga beban halaman.

Saya sudah mempunyai demo dari back to top ini di blog saya , jika anda ingin melihatnya silakan klik dibawah ini.



Anda rertarik ?? ikuti langkah berikut ini jika anda tertarik ingin memasang scroll back to top efek smooth di blog anda.

• Langkah Mudah memasang back to top di blog

1. Masuk pada blogger anda lalu pergi ke design > edit html  , untuk menghindari sesuatu yang tidak diinginkan di template anda , anda bisa men back up templae anda dengan cara menekan download full template.



2. Pada menu edit html , cari lah kode ]]></b:skin> . ( Gunakan F3 untuk mempermudahkan pencarian )

3. Setelah menemukan kode diatas  , kini anda bisa copy paste kode dibawah ini dan letakkan tepat di atas / sebelum kode ]]></b:skin>

#toTop {
display:none;
text-decoration:none;
position:fixed;
bottom:10px;
right:10px;
overflow:hidden;
width:51px;
height:51px;
border:none;
text-indent:-999px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsxk5bYa3mQbldk_XsgPtDb9CsfrmZiaWAoB2ylgMzhyphenhyphenVjuaQXIaAgAzV0rkJPDSocZBR6mXpcO-CV2HTuCEaAeI2Rw7dHOAjB9novJxUytQa93ZqnjtkE_6Y8JsGxhw7CqiEga7Obz1M/s800/ui.totop.png) no-repeat left top;
}
#toTopHover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsxk5bYa3mQbldk_XsgPtDb9CsfrmZiaWAoB2ylgMzhyphenhyphenVjuaQXIaAgAzV0rkJPDSocZBR6mXpcO-CV2HTuCEaAeI2Rw7dHOAjB9novJxUytQa93ZqnjtkE_6Y8JsGxhw7CqiEga7Obz1M/s800/ui.totop.png) no-repeat left -51px;
width:51px;
height:51px;
display:block;
overflow:hidden;
float:left;
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
}
#toTop:active, #toTop:focus {
outline:none;

Note: Bila anda ingin mengganti tombol to top nya berada di sebelah kiri maka ganti tulisan right yang berwarna merah dengan left.

4. Setelah itu cari lagi kode </head> lalu copy paste kode dibawah ini dan letakkan sebelum kode </head>.

<script src='http://code.jquery.com/jquery-1.6.1.min.js' type='text/javascript'/>
<script src='http://vianjb.googlecode.com/files/sed.js' type='text/javascript'/>
<script src='http://vianjb.googlecode.com/files/to%20top.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
/*
var defaults = {
containerID: &#39;moccaUItoTop&#39;, // fading element id
containerHoverClass: &#39;moccaUIhover&#39;, // fading element hover class
scrollSpeed: 1200,
easingType: &#39;linear&#39;
};
*/
$().UItoTop({ easingType: &#39;easeOutQuart&#39; });
});
</script>

5. Kemudian save template dan selesai .

Kini blog anda sudah mempunyai back to top efek smooth , nah mungkin sampai begini dulu artikel saya ini . Oh ua tema artikel ini adalah blogger tutorial , jadi jika anda ingin melihat-lihat tentang blogger tutorial yang lainnya anda bisa klik DISINI