This is BizOppers
Online Job for All. Work from home computer.

28 Agt 2011

Cara membuat tombol Navigasi Ke Atas, Ke Bawah dan Refresh di blog

Fungsi tombol tersebut adalah untuk memudahkan bagi pengunjung untuk menuju Ke Atas ataupun Ke Bawah halaman Blog hanya dengan sekali klik dan tombol ini tidak akan berpindah tempat meskipun sobat scroll Ke Atas ataupun Ke Bawah tombol ini akan selalu tetap berada pada pojok bawah sebelah kanan monitor komputer sobat.

Caranya sebagai berikut :

CARA 1  Tombol Navigasi Ke Atas, Ke Bawah Saja

1. Klik Rancangan
2. Edit Htlm
3. Carai kode ]]></b:skin>
Untuk mempermudah pencarian tekan Ctrl + F atau (F3) di keyboard sobat Jika sudah ketemu silahkan Copy kode dibawah ini dan letakkan diatasnya.

#Atas_Bawah {
position:fixed;
_position:absolute;
bottom:0px;
right:3px;
clip:inherit;
z-index:+1000;
}
Kemudian cari kode </body>  dan letakkan kode berikut diatasnya.

<div id='Atas_Bawah'>
<a href='#' title='Ke Atas'><img border='0' src='
http://www.indonesiaindonesia.com/imagehosting/images/83751/2_ke_atas.gif'/></a><br/>
<a href='#bottom' title='Ke Bawah'><img border='0' src='
http://www.indonesiaindonesia.com/imagehosting/images/83751/2_ke_bawah.gif'/></a>
</div>

Simpan dan Lihat Hasilnya:
Anda bisa merubah kodenya yang di atas sesuai keinginan anda.
Contohnya:

http://www.indonesiaindonesia.com/imagehosting/images/83751/2_ke_bawah.gif
http://www.indonesiaindonesia.com/imagehosting/images/83751/2_ke_atas.gif


 
http://www.indonesiaindonesia.com/imagehosting/images/83751/1_bottom.png
http://www.indonesiaindonesia.com/imagehosting/images/83751/1_top.png


Fungsi Refresh di gunakan untuk membuat penyegaran kembali halaman blog ataupun website.
Fungsi Refresh ini sama dengan fungsi Refresh yang ada pada Browser Internet, perbedaannya yaitu fungsi ini di buat bekerja secara otomatis, yakni pengguna tidak perlu menekan tombol Refresh yang ada pada tool bar.
kodenya seperti berikut:

<meta http-equiv="refresh" content="10"/>

Simpan kode di atas antara <head> .... </head>
Sedikit uraian kode diatas, content="10" angka sepuluh menunjukan bahwa proses Refresh akan di lakukan dalam rentang waktu 10 detik.
Jadi sebaiknya angka ini di set jangan terlalu cepat karena bisa menimbulkan kejengkelan kepada para pembaca apabila terlalu cepat di Refresh.
Fungsi Redirect ini bisa di buat dengan kode :

<meta http-equiv="refresh" content="0;URL=tulis alamat URL tujuan di sini"/>

CARA 2 UP to DATE  Tombol Navigasi Ke Atas, Ke Bawah dan Refresh

1. Klik Rancangan
2. Edit Htlm
3. Carai kode ]]></b:skin>
Untuk mempermudah pencarian tekan Ctrl + F atau (F3) di keyboard sobat Jika sudah ketemu silahkan Copy kode dibawah ini dan letakkan diatasnya.

#mangetsu {
position:fixed;_position:absolute;bottom:0px; right:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
#mangetsu a
{
filter:alpha(opacity=65);
-moz-opacity:0.65;
opacity:0.65;
border:0;
}
#mangetsu img
{
border:0;
}
#mangetsu a:hover
{
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}

 

Kemudian cari kode </body>  dan letakkan kode berikut diatasnya.

<a name='ngisor-dhewe'/>
<div id='mangetsu'>
<table border='0'><tr>
<td><a expr:href='data:blog.homepageUrl' title='Home'>
<img src='http://i903.photobucket.com/albums/ac239/Dediekusmayadi/home.png'/>
</a></td>
<td><a href='#' title='back to top'>
<img src='http://i903.photobucket.com/albums/ac239/Dediekusmayadi/Top-1.gif'/>
</a></td>
  
<td><a href='#ngisor-dhewe' title='back to bottom'>
<img src='http://i903.photobucket.com/albums/ac239/Dediekusmayadi/Down-1.gif'/>
</a></td>  
<td><a href='#' onClick='window.location.reload()' title='Reload page'>
<img src='http://i903.photobucket.com/albums/ac239/Dediekusmayadi/Refresh-32.png'/>
</a></td></tr></table>
  
</div> 


Untuk merubah widgetnya anda membuatnya di photobucket, 000webhost.com yang dapat menyimpan file.

Selamat Mencoba

Artikel Terkait :
Komentar Terbaru

Tidak ada komentar:

Posting Komentar