WELCOME TO MY BLOG R47UD-COMMUNITY AND FOLLOW MY BLOG

I made this widget at MyFlashFetish.com.

Join The Community

Premium WordPress Themes

Rabu, 15 Juni 2011

Cara Pasang Tombol Ke Atas Ke Bawah lengkap

Pada Tutorial Blog Kali ini kita akan membahas bagaimana Cara Pasang Tombol Ke Atas Ke Bawah atau Icon Tombol Back To Top Pada Blog Atau Blogspot dengan lengkap ,Biasanya Para pengunjung blog kita, tentunya lebih senang jika diberi kemudahan dalam membaca artikel di blog kita, seperti kembali ke atas blog, menuju bagian bawah blog, dll.Kali ini kita akan mencoba membuat sebuah icon shortcut Tombol Ke Atas Ke Bawah yang akan selalu tampil di pojok layar yang berfungsi untuk menggulung scroll ke atas dan ke bawah ditambah sebuah icon untuk merefresh halaman blog.

  • Masuk ke Tata Letak -> Edit HTML lalu

  • Copy CSS berikut dan pastekan di atas ]]></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;
    }
  • Kode yang dicetak tebal & garis miring adalah letak dari widget, "bottom" bisa kamu ganti dengan "top" dan "right" bisa kamu ganti dengan "left" (terserah kamu)
    Kalau sudah, cari lagi kode </body>  tambahkan kode <a name='ngisor-dhewe'></a> tepat diatasnya.
    Simpan templatenya!
    Sekarang tinggal memasang shortcutnya...
    Copy kode yang dibawah ini!

<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/AVvXsEgF1AwEZzE0B2rUJw-yIEPZka3d2SUf6rw0Eoak4Kd2eQIzOSeflNu4v9DXOkn3f_RV3DnVaFL7uW0N0ZmypKR7iq7x-cuxg7O8BvHXN6ZY_qtzZ0we9BOHuzI92j5d5CLonmdnwdIOkkk/s320/home-icon2.png'/></a></td>
<td><a href='#' title='back to top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXbp3AyNT8zeHqbXxBnVSjVMIltAJxsoW_2xtb_sgfhSjhaj6aEctQmwIXbip0Pe3ZmS7CN7R_v2bsBTtpd8bBGsxAMGytco6DILxYA50eoRnYaL5e0IUXaBP5f3Br017177ZBHA9sv5k/s320/pre-icon1.png'/></a></td>
<td><a href='#ngisor-dhewe' title='back to bottom'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrSyBV_P3iPY5HEnR_ulvGy6IoTF8Q1F85EJx786CYvXhCH662WQ91UIwgIvdd1QfiyIZ-PBAYjyzoePDdU-1YOvTpXmHcfvSIDDl6DKxmkOmxYYz44jygRXYvPE4978ukjiIM7ywh-4c/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/AVvXsEjvzHKUft-8NUlR-_A2L12YPEJ05_DH1SYEyk5ivizmGj-kk8gptH3czy-abuEHfePFggR7d0dScH2ytRi098MfWhg2CeawdiPs2LXIymaRFk4EXYhf0xuSNG6sPzO1VpLORcSdG8gBTH0/s320/refresh-icon1.png'/></a></td>
</tr>
</table>
</div>
Kodenya bisa paste dibawah <body> atau bisa juga ke Tata Letak -> Elemen Halaman -> Tambah Gadget -> HTML/Javascript, Paste dan simpan.

=====SELAMAT MENCOBA======

0 komentar:

Posting Komentar