Tips/Cara Membuat Back To Top Ala Mas Jonny V.2 Unix - Back to top seperti yang sering kami para blogger bahas hampir diseluruh search engine adalah sebuah tombol atau button yang digunakan untuk mengembalikan layar yang telah discrool kebawah menuju ke layar atas blog, dengan cara ini dapat mempermudah pengunjung menuju bagian atas blog kita tanpa harus susah-susah menggulungnya kembali keatas secara manual.
( Baca Juga : Cara Mudah Membuat Blog Mobile Friendly )
Bedanya dengan back to top yang sudah saya bahas kemarin adalah back to top yang satu ini adalah apabila pengunjung blog menggulung layar kebawah otomatis back to topnya akan muncul dan apabila pengunjung menggulung layar kembali keatas otomatis back to top ini juga akan mengikutinya begitu pula seterusnya. Jangan lupa juga untuk mengecek kecepatan blog anda yah!!.
Tips Membuat Back To Top Ala Mas Jonny V.2 Unix
( Baca Juga : Cara Mudah Membuat Blog Mobile Friendly )
Bedanya dengan back to top yang sudah saya bahas kemarin adalah back to top yang satu ini adalah apabila pengunjung blog menggulung layar kebawah otomatis back to topnya akan muncul dan apabila pengunjung menggulung layar kembali keatas otomatis back to top ini juga akan mengikutinya begitu pula seterusnya. Jangan lupa juga untuk mengecek kecepatan blog anda yah!!.
Tips Membuat Back To Top Ala Mas Jonny V.2 Unix
- Masuk ke Template > Edit HTML
- Cari kode
</head> ,dan tempatkan kode dibawah ini tepat diatas kode </head> tadi.
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
- Kemudian tempatkan kode dibawah ini tepat diatas kode
]]></b:skin>atau </style>.
.cacing{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGY2xfCAbzjEqL7jofN6w0OE5PXugh9iqPK8_Gb0xwjlt6JUIktvmtxyRKLB5h_Rcf3xRLE1U7otJDk1zqewhKojdWEIP1q4TPTfQgwOcK9sPn33PUStcFAPhBtYGIc_MVymA7Hq-ttosQ/s1600/Cacing.png);background-repeat:no-repeat;position:relative}
#cacing{cursor:pointer;width:30px;height:530px;background-size:41px;position:fixed;top:-550px;left:7%;transition:all
.7s ease-in-out;-webkit-transition:all .7s ease-in-out;z-index:21}
#cacing-bubble{background:#fff;border-radius:50px;color:#06f;display:block;font-size:12px;line-height:14px;opacity:0;overflow:visible;padding:5px;position:absolute;top:445px;left:20px;text-align:center;transition:all
.3s ease-in-out;-webkit-transition:all .3s
ease-in-out;visibility:hidden;width:60px;height:auto;z-index:99}
#cacing:hover > #cacing-bubble,#cacing:hover >
#cacing-bubble:after{opacity:1;transition:all .3s
ease-in-out;-webkit-transition:all .3s ease-in-out;visibility:visible}
#cacing-bubble:after{border-bottom:5px solid
transparent;border-right:5px solid transparent;border-top:5px solid
#fff;border-left:5px solid
#fff;content:"";display:block;position:absolute;top:96%;left:10px;width:0;height:0;z-index:98}
- Lalu tempatkan lagi kode dibawah ini tepat diatas </body>.
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function($) {
$(window).on('scroll',
false, function() {
var windowTop =
$(window).scrollTop();
if (windowTop > 550)
{
$('#cacing').css('top',
'0');
} else {
$('#cacing').css('top',
windowTop - 550 + 'px');
}
});
$('#cacing').unbind('click').click(function()
{
$('html,body').animate({
scrollTop:
$("#cacingTOP").offset().top
}, 'slow');
});
});
//]]>
</script>
- Tempatkan lagi kode dibawah ini tepat diatas kode <body>.
<div class="cacing" id="cacing">
<div id="cacing-bubble">Mau Balik Ke Atas ?</div>
</div>
<div id="cacingTOP"></div>
- Anda dapat mengganti script berwarna hijau dengan kata-kata anda sendiri.
Demikianlah Tips Membuat Back To Top Ala Mas Jonny V.2 Unix semoga tips dari mas jonny dapat bermanfaat bagi anda semua. Agar tidak loading tidak berat anda dapat menggunakan tips mas jonny.
Happy Blogging......
Belum ada tanggapan untuk "Tips Membuat Back To Top Ala Mas Jonny V.2 Unix"
Post a Comment