SELAMAT DATANG DI 6LASKAR PELANGI | Kumpulan tips dan trick | free Full Crack Software download - Tinggalkan Jejak Anda pada Kotak Komentar kami- Terima Kasih atas kunjungan Anda

Tuesday, June 26, 2012

Trik Membuat Tombol Home, Back To Top, Bottom, dan Refresh

Disini saya akan membagikan sedikit ilmu yang saya dapat lagi hasil blogwalking, yaitu membuat tombol home, back to top, bottom, dan refresh pada blog kita. Adapun fungsi tombol tersebut adalah sebagai navigasi untuk memudahkan pengunjung blog kita dalam membaca halaman postingan kita.


Atau sobat bisa lihat pada blog saya disudut kanan bawah, maaf tidak terlalu kelihatan karena ketutup dengan toolbar :) . Gimana sobat? Bila tertarik ingin membuat tombol navigasi tersebut ikuti saja langkah2 di bawah ini:

1. Login ke blog sobat

2. Masuk ke Rancangan ----> Edit HTML

3. Cari kode ]]></b:skin> ( gunakan CTRL F atau F3 untuk memudahkan pencarian ), setelah dapat selanjutnya copy kode di bawah ini dan letakkan di atas kode ]]></b:skin>



#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;
}

4. Kalau sudah selanjutnya cari kode </body> ,selanjutnya letakkan kode di bawah ini tepat di atas code 
</body>
    <a name='ngisor-dhewe'></a>


5. Simpan templatenya.

Langkah selanjutnya tinggal memasang shortcutnya.
Copy kode dibawah ini dan bisa sobat letakkan di bawah kode <body> atau bisa juga sobat letakkan di sidebar dengan cara masuk ke Rancangan ----> Tambah Gadget ----> HTML/Javascript. jadi terserah sobat mau masang dimana.

<div id='mangetsu'>

<table border='0'>
<tr>
<td><a expr:href='data:blog.homepageUrl' title='Home'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjueWSV4CEc-tAlT6mkv46HlZjCxeoY8lA61th9XoCKpeIfa8uWcC5646740E4Be9Qm3C2QKsmzjfZnpXTJF40175nfThi1V2BOyFrceR8VEed9NrIXO2PzPyNfbMz_fOnZzEdfjvy6XTk/s320/home-icon2.png'/></a></td>
<td><a href='#' title='back to top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWD1ZUSIhSwjkUgDm2J9xeuPrbDi9O4afD-AHZayY_ljTaco1wasBlVjy0OmOsR4LEmxxCoQOJcnS-QfCQUTg7pH0b2I6ZY_llzpK3m8viAq_SGvERwoJf2JIa6Qcg3trSy5gloa39N58/s320/pre-icon1.png'/></a></td>
<td><a href='#ngisor-dhewe' title='back to bottom'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFNRVSJZHFYbe2b9jBQZwCOGP-nxSQamAihREMrf84xQQw7toMq9MSlDAaVe9GARMQE19iIKxbFRrDqkX9AUrCJ-FXKa0PyykBqzes2gnIaIXosU3aIvYIU4U0P3SY0qkYQAqGaNjBKMA/s320/next-icon2.png'/></a></td>
<td><a href='#' onClick='window.location.reload()' title='Reload page'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiamesAvhPMNMI5BabUY6SLxoelPdY2H6wdDfyC4VEQvrEa62yaES3DqPjDTA88kOJNrVS5Jl1Tc5ihU8yY3YzpNYeuQ1DIIquzQVyRWVvUGvTbshe7NrXdRDVwdHhhn-tQSZUzF0B4YtQ/s320/refresh-icon1.png'/></a></td>
</tr>
</table>
</div>

Setelah itu simpan. dan lihat hasilnya.
Bagaimana sobat, mudah kan? Okey selamat mencoba dan berkreas

Ditulis Oleh : Unknown ~ Hidup Terasa Indah Bila Saling Berbagi

6Laskar Pelangi Sobat sedang membaca artikel tentang Trik Membuat Tombol Home, Back To Top, Bottom, dan Refresh . Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya, TERIMA KASIH Karena sudah bersedia Memberikan Komentar untuk Blog ini... !!!

:: Effendi Dalimunthe ! ::



Baca Juga Artikel Terkait Lainnya

0 komentar :

Post a Comment

MOHON DI BACA
Semoga anda adalah pembaca yang baik hati jika berkenan tinggalkanlah komentar untuk saya

1. Gunakan pilih nama/url pada pemilihan nama jika anda tidak memiliki blog
2. Sebisa mungkin jangan menggunakan id anonim atau id falsu
3. Mohon komentar tidak mengandung sara,spam dan kata-kata yang tidak pantas di ucapkan
4. Jika komentar tidak pantas di tampilkan admin akan menghapus komentar yang sudah ada.
5. Komentar anda merupakan motipasi bagi kelangsungan blog ini.

 
free counters
Future Google PR for 6laskar-pelangi.blogspot.com - 3.11 Submit your website to 20 Search Engines - FREE with ineedhits!
[Valid RSS]   Diposkan oleh Admin 6Laskar Pelangi.