Make Attractive Back to Top Button use Jquery

Dua informasi hangat, membuat fitur kembali ke atas atau lebih di kenal dengan istilah back to top dan info tentang tidak berlakunya lagi (error) generator widget blogger button! Selama berkeliling mengarungi web/blog, gue melihat tombol back to top di dominasi dengan gaya itu-itu saja! Gaya tersebut bisa sobat tengok

1. Make link back to top full stylish.
2. Scroll back to top using simple jquery.
3. back to top and bottom use jquery.

Sekarang AA Koben akan buat tombol back to top yang atraktif. Pertama muncul sudah langsung terlihat satu gambar unyu-unyu. Ketika cursor diarahkan, gambar tersebut langsung berubah senyum tegang. Waktu melakukan gerakan scroll pertama ke bawah, si gambar meroket ke atas. Ketika kembali melakukan scroll yg sudah dibatasi ketinggiannya, si gambar langsung ada lagi pada posisi semula. Terakhir waktu di pencet itu si tomobl, maka langsung terbang ke atas entah kemana :))

Seperti itulah tutorial dalam teori, susah untuk mengerti ;)) Back to top button ini by Deep Sinha. Demo & source sobat bisa lihat w2tskill.blogspot.com Karena jQuery script dalam bentuk p,a,c,k,e,d and menyatu dgn script lain. Jangan ambil semua, kalau tidak mau keluar popUp terus-menerus :D Hostingkan gambar btt.png pd host image masing² takut terhapus!

#atraktifBTT {
right: 0;
bottom: 0;
width: 56px;
height: 99px;
padding: 5px;
cursor: pointer;
position: fixed;
background: url(btt.png) 0 0 no-repeat;
}
#atraktifBTT:hover {
background: url(btt.png) no-repeat;
background-position: 0 -110px;
}

<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function () {
if ($(this).scrollTop() > 200) {
$("#atraktifBTT").removeAttr("href");
$("#atraktifBTT").stop().animate({
bottom: "0"
}, {
duration: 500,
queue: false
})
} else {
$("#atraktifBTT").stop().animate({
bottom: "20000"
}, {
duration: 7000,
queue: false
})
}
});
$(function () {
$("#atraktifBTT").click(function () {
$("html, body").animate({
scrollTop: 0
}, "slow");
return false
})
});
//]]>
</script>

Cari tagging penutup body </body> letakan sebelum kode tersebut syntax link<a href='#' id='atraktifBTT'></a>SAVE.
Info ke dua seperti yg disebutkan diatas! Generator form add widget blogger sudah tidak layak pakai (sepengetahuan saya) Karena penggunaan properti type input yg salah untuk menggenerate ke tujuan halaman Add Page Element blogger. Intinya error gitu deh :D Kalau kalian punya, cobain sekarang!

Cara termudah dan tercepat untuk melakukan add widget blogger ke blog kita, save link brkt Import Page Element Blogger Melakukan add to blogger dalam area posting, here syntax.

<form action="https://www.blogger.com/add-widget" method="POST" name="addWidget" target="top">
 <textarea name="widget.content" rows="0" cols="0" style="display:none;">

---- PUT CODED/SCRIPT HERE AFTER PHRASE ---- 

 </textarea>
<input type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3aDDGIjp5Ug5_HKtkyL6nWJX-aRKfE-B9TeFY33CwS3lKWvHGknV4PqWBZycxpQJ6_wOxUZUmhT3liErJxaDRLmoMlbpstzX9eKm9WNcDg6KctmYDO9SmDzbX2-J5Nu8xd0K6645m-jc0/s1600/rb-blogger-button.gif">
</form>

<a href="http://beben-koben.blogspot.com" target="_blank"><img border="0" alt="Blogspot Tutorial" src="http://i27.tinypic.com/j76x3d.jpg"/></a>

Kepingin embed form actionnya sikat...
Biasa<table align="center">
<form action="https://www.blogger.com/add-widget" method="POST" name="addWidget" target="top">
<tr><td>Title: <input type="text" name="widget.title" value=""></td></tr>
<tr><td>Required field must not be blank</tr></td>
<tr><td><textarea name="widget.content" rows="5" cols="40"></textarea></td></tr>
<tr><td><input type="submit" value="Add Widget"></tr></td>
</form>
</table>

Title:

Required field must not be blank

Luar Biasa

Add Page Element

You're about to add content from another site to your blog. Make sure you trust this site before proceeding. This action will place some code from the content provider into your blog page. You can view the code details below.

Title:

Required field must not be blank

Info URL Logo URL

<h1 id="ape">Add Page Element</h1>
<p>You're about to add content from another site to your blog. <b>Make sure you trust this site before proceeding</b>. This action will place some code from the content provider into your blog page. You can view the code details below.</p>
<table align="center">
<form action="https://www.blogger.com/add-widget" method="POST" name="addWidget" target="top">
<tr><td>Title: <input type="text" name="widget.title" value=""></td></tr>
<tr><td class="errormsg">Required field must not be blank</tr></td>
<tr><td><textarea name="widget.content" rows="15" cols="51"></textarea></td></tr>
<tr><td>Info URL <input type="text" name="infoUrl" value=""/> Logo URL <input type="text" name="logoUrl" value=""/></td></tr>
<tr><td><input type="submit" value="Add Widget" class="kd-button" /></tr></td>
</form>
</table>

<style>
.errormsg {
text-align: left;
background: url("http://www.blogger.com/img/icon_alert15.gif") no-repeat left center transparent;
padding: 0 0 0 23px;
color: rgb(204, 0, 0);
}
h1#ape {
font-size: 20px;
font-weight: 300;
color: rgb(255, 102, 0);
}
.kd-button {
border: 1px solid rgb(48, 121, 237);
color: #fff;
background-color: rgb(77, 144, 254);
font-size: 11px;
font-weight: bold;
padding: 5px 8px;
line-height: 1.6em;
border-radius: 2px;
}
</style>

Semoga bermanfaat.

Happy blogging \m/