Membuat Back To Top Show/Hide Dengan Jquery

<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgugV9Buoe-IZE5CHzGjbK7OgeLqM77wKrypqIPCJWxlFRZ0rcPWt2Bz0DzbZrBK6V1lHpJOkeUObdNu3NAgZD8BU9BKh6ahDUhNRdH63T72G79irGjLlIHv_9KHUFWntK-xDGGvRm_RVQ/s1600/top.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Back To Top Show/Hide Dengan Jquery" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgugV9Buoe-IZE5CHzGjbK7OgeLqM77wKrypqIPCJWxlFRZ0rcPWt2Bz0DzbZrBK6V1lHpJOkeUObdNu3NAgZD8BU9BKh6ahDUhNRdH63T72G79irGjLlIHv_9KHUFWntK-xDGGvRm_RVQ/s1600/top.JPG" title="Membuat Back To Top Show/Hide Dengan Jquery" /></a></div>Membuat Back To Top Show/Hide Dengan Jquery | Apa kelebihannya? membuat tombol kembali ke atas ? ya, salah satunya untuk mempermudah pengunjunga berinteraksi dengan <i>blog. </i>Walau banyak blogger yang mengatakan bahwa memasang navigasi ini, tapi menurut saya ini cukup penting juga, jika kita memiliki artikel yang cukup panjang, kita bisa pakai cara ini untuk mempermudah pengunjung.<br /><br />Pasang kode di bawah ini di atas kode <b>]]></b:skin></b><br /><br /><pre class="brush:js;">.button_up{<br />padding:7px;   <br />background-color:white;<br />border:1px solid #CCC; <br />position:fixed;<br />background:white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirBUmwK6wC2PZa6PlBaSf0w4OnP6PCHMtYFDmNFIHxnv8hZARlO7_gbnSiQKGFZFaXolXWL63MwAlCuy164hdWqR9PdJ2ZgrUSV5jcbWVcUiI8ebhH3VPEh53coi69rfCJHhQhCoq3bGs/s16/arrow_up.png) no-repeat top left;<br />background-position:50% 50%;<br />width:20px;/* Lebar tombol */<br />height:20px;/* Tinggi tombol */<br />bottom:280px;/* Jarak dari bawah */<br />right:5px; /* pilihan kanan atau kiri */<br />white-space:nowrap;<br />cursor: pointer;<br />border-radius: 3px 3px 3px 3px;<br />opacity:0.7; <br />filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);<br />}<br />.button_down{<br />padding:7px; <br />background-color:white;<br />border:1px solid #CCC; <br />position:fixed;<br /><br />background:white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUlr0nbCIEuWmGbvZImn7u1Lz9wQTyLqK2OsgLSXSxgGRlguqcLqZG65boLvYOM-WvXzA0JYhPTaUhYQH23NS6F95FSrniEg9F5QgMywKBsuQkst34s2jnYcxE8BT_2cXg19zTkrtPbwo/s16/arrow_down.png) no-repeat top left;<br />background-position:50% 50%;<br />width:20px; <br />height:20px;<br />bottom:242px;<br />right:5px; <br />white-space:nowrap;<br />cursor: pointer;<br />border-radius: 3px 3px 3px 3px;<br />opacity:0.7;<br />filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);<br />}<br /></pre><br />Lalu, cari kode </body>, letak kode ini diatasnya :<br /><br /><pre class="brush:js;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><br /><br /><br /><br /><b><div class='button_up' id='button_up' style='display:none;'/></b><br /><br /><b><div class='button_down' id='button_down' style='display:none;'/></b><br /><br /><br /><br /><script><br /><br />//<![CDATA[<br /><br />(function(){var special=jQuery.event.special,uid1='D'+(+new <br />Date()),uid2='D'+(+new <br />Date()+1);special.scrollstart={setup:function(){var <br />timer,handler=function(evt){var <br />_self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var<br /> timer,handler=function(evt){var <br />_self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();<br /><br /><br /><br />$(function() {<br /><br />var $elem = $('body');<br /><br />$('#button_up').fadeIn('slow');<br /><br />$('#button_down').fadeIn('slow'); <br /><br />$(window).bind('scrollstart', function(){<br /><br />$('#button_up,#button_down').stop().animate({'opacity':'0.2'});<br /><br />});<br /><br />$(window).bind('scrollstop', function(){<br /><br />$('#button_up,#button_down').stop().animate({'opacity':'1'});<br /><br />});<br /><br />$('#button_down').click(<br /><br />function (e) {<br /><br />$('html, body').animate({scrollTop: $elem.height()}, 800);<br /><br />} );<br /><br />$('#button_up').click(<br /><br />function (e) {<br /><br />$('html, body').animate({scrollTop: '0px'}, 800);<br /><br />} );});<br /><br />//]]><br /><br /></script></pre><br />Dan BERHASIL!

Membuat Back To Top Show/Hide Dengan Jquery

Membuat Back To Top Show/Hide Dengan Jquery | Apa kelebihannya? membuat tombol kembali ke atas ? ya, salah satunya untuk mempermudah pengunj...

Baca selengkapnya »

Cara Mengubah Data Dengan PHP Dan MySQL

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvtXaOxGmrek-ZXnOuGM-8pD57s4yBDOG4ZCRjwnEhE4MzRFNtCmoX24snWPF6qpDKyXj87zg62kFaHJsAxWTdE2driypWJfPbvicKjS2_CzfVGvEqCTkNg5kyrLBIEo7AJiTuHPi_4Mr2/s1600/php_mysql_logo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Mengubah Data Dengan PHP Dan MySQL" border="0" height="185" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvtXaOxGmrek-ZXnOuGM-8pD57s4yBDOG4ZCRjwnEhE4MzRFNtCmoX24snWPF6qpDKyXj87zg62kFaHJsAxWTdE2driypWJfPbvicKjS2_CzfVGvEqCTkNg5kyrLBIEo7AJiTuHPi_4Mr2/s320/php_mysql_logo.png" title="Cara Mengubah Data Dengan PHP Dan MySQL" width="320" /></a></div><br />Cara Mengubah Data Dengan PHP Dan MySQL | Ketika kita akan mengubah data yang telah valid masuk ke dalam database atau melakukan ON UPDATE, yang kita lakukan hanyalah menampilkan seluruh data yang ada dengan SELECT *FROM <nama_tabel> kemudian menambahkan script a href dengan nim yang akan di edit. Untuk lebih jelasnya langsung saja di coba dengan database yang anda buat sendiri.<br /><br /><pre class="brush:js;"><h3 align="center">EDIT DATA</h3><br /> <table width="100%" border="2" align="center" cellpadding="2" cellspacing="2"><br />   <tr><br />     <th align="center">NAMA</th><br />     <th align="center">BLOG</th><br />     <th align="center">JURUSAN</th><br />     <th align="center">EDIT</th><br />   </tr><br />   <?php<br />   include("uji.php");   //Melakukan testing dengan server<br />   mysql_select_db("data_siswa");  // memilih database (data_siswa)<br />   $a="select * from tabel_siswa order by nim";  //menampilkan dari tabel (tabel_siswa) diurutkan dengan nim<br />   $b=mysql_query($a);<br />   <br />   while($c=mysql_fetch_row($b)){<br />       echo"<br />   <tr><br />   <td>$c[1]</td><br />   <td>$c[2]</td><br />   <td>$c[3]</td><br />   <td><a href=\"form_edit.php?nim=$c[0]\">Edit</a></td><br />   </tr>";<br />   }<br />   ?><br /></table></pre><br />Selamat Mencoba!!

Cara Mengubah Data Dengan PHP Dan MySQL

Cara Mengubah Data Dengan PHP Dan MySQL | Ketika kita akan mengubah data yang telah valid masuk ke dalam database atau melakukan ON UPDATE, ...

Baca selengkapnya »

Cara Menampilkan Data Dari Database

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrQIN9OnmVNQxoF4CjuSsNcIGm8coq5McunS-HZdZQYpcSTSdlFmaazzxnUBQOwyHMK12bnhyEQ5UzsS72hCq6Qaxfgxlt5A10ig4UY5ugJLlPVD78rpOMv97mFk_7EJZBeg0Cn5n7Qlee/s1600/php.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Menampilkan Data Dari Database Dengan PHP" border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrQIN9OnmVNQxoF4CjuSsNcIGm8coq5McunS-HZdZQYpcSTSdlFmaazzxnUBQOwyHMK12bnhyEQ5UzsS72hCq6Qaxfgxlt5A10ig4UY5ugJLlPVD78rpOMv97mFk_7EJZBeg0Cn5n7Qlee/s400/php.JPG" title="Cara Menampilkan Data Dari Database Dengan PHP" width="400" /></a></div><br />Cara Menampilkan Data Dari Database | Sangat sederhana, inti dari script ini adalah cukup menampilkan data dengan SELECT *FROM. Tidak ada yang rumit dalam script ini, tapi hal yang baru dicermati adalah pemanggilan baris dan kolom dengan $c[1] atau $c [2]. Angka yang ada di [] adalah menunjukan bagian kolom yang akan ditampilkan. Artikel ini sangat berhubungan dengan <a href="http://www.bocahit.com/2013/04/menghubungkan-form-ke-database.html" target="_blank">insert data</a>.<br /><br /><pre class="brush:js;"><h3 align="center">CEK DATA ANDA</h3><br /> <table width="100%" border="2" align="center" cellpadding="2" cellspacing="2"><br />   <tr><br />     <th align="center">NAMA</th><br />     <th align="center">BLOG</th><br />     <th align="center">JURUSAN</th><br />   </tr><br />   <br />   <?php<br />   include("uji.php");  //koneksi kedatabase<br />   mysql_select_db("data_siswa"); //membuka database data_siswa<br />   $a="select * from tabel_siswa order by nim";<br />   $b=mysql_query($a);<br />   while($c=mysql_fetch_row($b)){<br />       echo"<br />         <tr><br />              <td>$c[1]</td><br />             <td>$c[2]</td><br />             <td>$c[3]</td><br />             </tr>";<br />       }<br />   ?><br /></table><br /><div style=" text-align:center;>"<br /><p><br />    <a href="form_siswa.php"><input type="button" id="proses" value="Tambah Data"/><br /></a><br /><a href="edit_data.php"><input type="button" id="proses" value="Edit Data"/><br /></a></p></div></pre><br />Selamat Mencoba. Ingat! <i>Cocokan variabelnya dengan nama tabel dan kolom anda</i>.<br />Jika sukses, hasilnya kurang lebih seperti ini.<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0oBtLjy9aNmm5x-Ie1B-rEsPsNBf6J5whFBqTJ-YiQ5l_fLSLBtb0pdb0wrMnMFYves_LaUpbBx6HWejF4wYSheiPkVl2cEBOoF6Rft9GmwJq9MQubGWLqGs-oXe1D0IIsq5rLAUJfNOb/s1600/View.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Menampilkan Data Dari Database Dengan PHP" border="0" height="233" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0oBtLjy9aNmm5x-Ie1B-rEsPsNBf6J5whFBqTJ-YiQ5l_fLSLBtb0pdb0wrMnMFYves_LaUpbBx6HWejF4wYSheiPkVl2cEBOoF6Rft9GmwJq9MQubGWLqGs-oXe1D0IIsq5rLAUJfNOb/s320/View.JPG" title="Cara Menampilkan Data Dari Database Dengan PHP" width="320" /></a></div><br /> 

Cara Menampilkan Data Dari Database

Cara Menampilkan Data Dari Database | Sangat sederhana, inti dari script ini adalah cukup menampilkan data dengan SELECT *FROM. Tidak ada ya...

Baca selengkapnya »

Cara Mengecek Kemampuan Responsive Blog

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgSPnqqLxA1xCrvO3Q_ysV63-RoR14ttvL5i2TZQYeJ13X9JfNn1A1BHMc6UDO2jXJK0hvzMKdjT1oxxSDUKxsCxEZxS6B1RihW2R5fLykldd9bR1CTiBzSz-cITdjvx4pV24iYSyQsMS3/s1600/4.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Mengecek Kemampuan Responsive Blog" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgSPnqqLxA1xCrvO3Q_ysV63-RoR14ttvL5i2TZQYeJ13X9JfNn1A1BHMc6UDO2jXJK0hvzMKdjT1oxxSDUKxsCxEZxS6B1RihW2R5fLykldd9bR1CTiBzSz-cITdjvx4pV24iYSyQsMS3/s320/4.JPG" title="Cara Mengecek Kemampuan Responsive Blog" width="197" /></a></div><br />Cara Mengecek Kemampuan Responsive  Blog | Jika kemarin saya buat artikel tentang <a href="http://www.bocahit.com/2013/05/chef-cantik-dan-seksi-di-indonesia.html" target="_blank">chef cantik</a> yah, buat iseng - iseng aja, daripada bengong. Biar kali ini kita masih menyangkut - nyangkut soal responsive yang kemarin telah saya bagikan apa sih keunggulan blog bertemplate <a href="http://www.bocahit.com/2013/05/keunggulan-template-blog-support.html" target="_blank">responsive</a>?<br /><br />Kalau cuma mengaku ini itu responsive semua juga bisa, yang membedakan adalah ketika blog di buka lewat browser atau media apa. Ini yang jadi masalah. Ada 2 website checker yang memberikan infomasi mengenai responsive yaitu <a href="http://www.responsinator.com/" target="_blank">Responsinator</a> dan <a href="http://responsivetest.net/" target="_blank">Responsive Test</a>.<br /><br />Cukup anda masukkan url blog anda, kemudian tunggu kurang lebih 5 menit dan akan muncul tampilan blog anda di media apa. Silakan mencoba..Ini Gratis!

Cara Mengecek Kemampuan Responsive Blog

Cara Mengecek Kemampuan Responsive  Blog | Jika kemarin saya buat artikel tentang chef cantik yah, buat iseng - iseng aja, daripada bengong...

Baca selengkapnya »

Spesifikasi Costum Kamen Rider Decade

Spesifikasi Costum Kamen Rider Decade

Baca selengkapnya »

Award Wammy Thanks Giving

Award Wammy Thanks Giving

Baca selengkapnya »