Gudang Tutorial Blog

Jquery Top Button

adalah tombol untuk scroll otomatis ke atas halaman blog dengan efek jquery, tombol akan terlihat otomatis saat halaman berada di footer blog. Dan akan menghilang saat tombol berada di halaman atas blog.



LIVE DEMO



Cara:

1. login blog

2. template dan edit html

3. letakkan kode css di atas  ]]></b:skin>

#toTop { width:100px;background:none;border:0px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }

4. letakkan script di atas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>

$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});

$(function() { $("#toTop").scrollToTop(); });

</script> 

abaikan yang berwarna cyan jika anda sudah mempunyai js jquery versi berapapun



4. Letakkan script di atas </body>

<a href='#' id='toTop'><img src='URL IMG?t=1292762029' style='border:0;'/></a>

 5. Ganti URL IMG dengan url gambar anda.



Teks/button/tombol back to top





https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCyMijiNhyphenhyphenlJdGsCaSCIHe_jTRjNCXdYbhwvwmUM9qPCp5GsPXv69iJMQCzcD6wVhJTItq-Hs2SmWVRZk9AzX4Fgz94rKYtfS00Tx-Gryzosq0bls_fh4SlnCJE5c_d0yguI_vOsw9sw/s1600/top-pink+copy.png





https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX2GnAiytYmKFqdEkKRHVjQLVcAdBiM8Q6DvJzRmVipbFKXKPXli9B_YEnAe8JNqylPkLLp4CZE728k_8utT7j0Alci0-m9zzjz1AmPUIzn7uuBkrtlhOSARVsPYcX0gsBbpjj0houdA/s1600/top-purple.png



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKZrE6q8VTIdmUA8I2Bw7MWdRXtoEvoDCMnVRLoY19EiwZatfhJnsp7pRqIqt5p-_MEI8L1dp4KXhWmDGX65avfaywJqJtdzbu_TAHdXbxqvFcP4cVwX5OBk9wg0g7GHBpqvzDz2HWVw/s1600/top-blue.png



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUHY8inN15hi9qHtK_SmWFyemj_bNgGLpyqG77h9M6XSgrP33xmrDkWh8urDgSGqQcAfr4-rPOslxUb3EzKEHoFjSPgo8Ord5VPRx4c3GZJKSTRnMOG56qKfla9TxEsNdl-83CgYCC5g/s1600/top-orange.png



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZCIs_VH8_uUZAb9wiZLYwpXGCRAXdPJKJLEgqfUO32S5sTwKS7baS60hN0IAyPM4y6iBktUslxe29bClhNAw2QHa1RokDpgTY2jjt_F9VCplL_KneZX66qgsaKg_MJPICAG1vAqg06A/s1600/top-black.png

.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}

.panel p{color:#ccc;margin:0 0 15px;padding:0}

.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}

.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}

a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}

a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}

a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}

.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}

.colleft{float:left;width:130px;line-height:22px}

.colright{float:right;width:130px;line-height:22px}

a:focus{outline:none}

.panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}

.panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}

.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

<script type="text/javascript">

$(document).ready(function(){

$(".trigger").click(function(){

$(".panel").toggle("fast");

$(this).toggleClass("active");

return false;

});

});

</script>  

 <div class='panel'>
<h3>Welcome to our blog</h3>
<p style='text-align:justify'>Selamat datang, selamat menyimak dan selamat berdownload ria di blog kita yang minimalis ini.
Karena kita suka googling, browsing n download game, kita ingin mengabadikannya dengan share ke teman2 smua agar apa yang kita ketahui juga bermanfaat buat pembaca blog cybermig.<a href='http://www.cybermig.com/' title='creating website'>Ke TKP gan...</a></p>
<h3>Tentang kita...</h3>
<img height='73px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWEw5l3WB_gNMT78kKMmBHH-NQWwXUDM2BqOE70wuLlVs6XGY0S1_FNzCn98d9gHaAUB8vuyyYn283_1hLKZS0Qm4i3BF7A_E7hbIra_hTYjgbYHJL-2uaf7ZtehcNmG0P4MDaTziPINo/s1600/DSC01284.JPG' width='73px'/>
<p>1 kalimat tentang kita. Kita 2 insan yang saling mencintai..hihi</p>
<div style='clear:both;'/>
<div class='columns'>
<div class='colleft'>
<h3>Ash</h3>
<ul>
<li><a href='http://www.facebook.com/ash.shassine' title='facebook'>Facebook</a></li>
<li><a href='#' title='about'>About</a></li>
<li><a href='#' title='contact'>ash@cybermig.coml</a></li>
</ul>
</div>
<div class='colright'>
<h3>Arthur</h3>
<ul>
<li><a href='http://www.facebook.com/surya.minimoys' title='Facebook'>Facebook</a></li>
<li><a href='https://plus.google.com/u/0/115146411053813483519/posts' title='About Me'>About Me</a></li>
<li><a href='#' title='Gmail'>arthur@cybermig.com</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>About</a>