Home » » Cara Membuat Tombol Home,Back To Top, Bottom Dan forward,

Cara Membuat Tombol Home,Back To Top, Bottom Dan forward,

Hello Blogger ,Maaf sebelumnya telat saya Postig tutorial ini untuk teman yang menyempatkan bertanya tentang Cara Membuat Tombol Home,Back To Top,Bottom,dan forward,
Untuk lebih jelas nya coba sobat klik Home,Back To Top,Bottom,dan forward yang ada pada blog saya,.
sudah sobat klik,nah itu dia maksud nya dari Home,Back To Top,Bottom,dan forward
Sobat tertarik untuk membuat nya di blog sobat..?
jika tertarik,mari kita mulai cara pembuatan nya..

1.Masuk Ke akun Blog Sobat
2.Pada Dasbor Pilih Rancangan-->Edit HTML Dan jangan Lupa Centang Kolo Expand Template Widget
3.Kemudian Cari Kode  ]]></b:skin>; ( gunakan CTRL F atau F3 untuk memudahkan pencarian )
4.Copy Paste Kode Dibawah Ini Tepat Diatas Kode Tadi

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

keterangan:

  • bottom letak gambar di bawah
  • top letak gambar di atas
  • right letak gambar di kanan
  • left letak gambar di kiri
5.Selanjutnya cari kode </body> selanjutnya letakkan kode di bawah ini tepat di atas code </body>

<a name='ngisor-dhewe'></a>

6. 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/AVvXsEj-Ycg4ofkdw0C1lYohbsGkwtNz3eM601_d4UFxG31mHMQJPyemAe1QhOU7bD10n3xNYhnS_JrPdjdq9qbFWWz5kRbp4_kIStxrXbmZGtFQifdL-M-EHzmc2hdmdUBBZuseX3xL9agRKMA/s320/home-icon2.png'/></a></td>
<td><a href='#' title='back to top'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6yZqwdEuz8p5TxqKPHCTzFjZ-lq9fO6o5kX1k_1SsBy2dtYCR9duqxgz-xKa9aEUWg-LZkwDs5B5SFAoSy-Nn5sWDuOwjDLx51gR_Jy3sBaN1dIBCH03xAMYzIlYoFWWGGSKdwXz-iLQ/s320/pre-icon1.png'/></a></td>
<td><a href='#ngisor-dhewe' title='back to bottom'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnzHsy_5kkr9rRkSC-Rp5G-_X-vt65ekya6ZiQF4T7GyfAxXT3x33fWlHt0yMAB9kzJa9_Qc9WhRatmMEnwdGaWI-4EIdMqWH0u6gCRIt1S4ApMpB-fT4ngE8Nb2-rvedy1EvY0KTivgk/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/AVvXsEiuUJi_55YtTe_RR1iLvjiR5TQBWWlaoXqr4y3g19X7Iufh1GuzOmHOQbC9duTKVE4rPFbXYyIpR6aVgp2NVciWa4BJ6a4EkWRI_f1IogK2athJSEQm_4RbqymsIOMmCXyuv2yBR_8U6gI/s320/refresh-icon1.png'/></a></td>
</tr>
</table>
</div>



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



Artikel Terkait:

6 komentar:

  1. kode untuk nomor 5 nya mana gan???

    BalasHapus
  2. sory bro ga muncul...!! ane edit gi...skrg udah ad thu

    BalasHapus
  3. g bisa2 bos,,,,,,
    maaf gw baru belajar

    BalasHapus
  4. @oki yandi Mungkin dr peletakan coding ny ad yg slh bro....!!
    coba coding <a name='ngisor-dhewe'></a>
    digabungn dengan coding dibawahnya menjadi seperti dibawah ini dan diletakan diatas </body> :
    <div id='mangetsu'>
    <table border='0'>
    <tr>
    <td><a expr:href='data:blog.homepageUrl' title='Home'><img src='http://1.bp.blogspot.com/_rJyl7MtUcdY/S9QFyGDOdHI/AAAAAAAAAe4/Uz2_Cn7MQrU/s320/home-icon2.png'/></a></td>
    <td><a href='#' title='back to top'><img src='http://2.bp.blogspot.com/_rJyl7MtUcdY/S9QFtGirgKI/AAAAAAAAAew/8djXsedR4wg/s320/pre-icon1.png'/></a></td>
    <td><a href='#ngisor-dhewe' title='back to bottom'><img src='http://4.bp.blogspot.com/_rJyl7MtUcdY/S9QFncHAkrI/AAAAAAAAAeo/dklrey4DVTk/s320/next-icon2.png'/></a></td>
    <td><a href='#' onClick='window.location.reload()' title='Reload page'><img src='http://2.bp.blogspot.com/_rJyl7MtUcdY/S9QF5V8CcAI/AAAAAAAAAfI/dzKXCMciQrs/s320/refresh-icon1.png'/></a></td>
    </tr>
    </table>
    </div>



    klo bingung
    Coba liat contoh blog http://tipsbelajar-blog.blogspot.com/

    BalasHapus
  5. bagaimana caranya menambahkan musik pada blogger bg

    BalasHapus

Fivers

Selamat Datang Di OKTRI BLOG

Selamat datang di Blog saya, semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya,apabila berkenan silahkan berkomentar dan follow blog saya,mari kita saling berbagi ilmu tentang apa saja...Selengkapnya tentang Tutorial Ini

Sekilas tentang penulis

Nama saya Oktri darmadi,saya seorang Mahasiswa S1 Teknik Informatika Di IBI DARMAJAYA Bandar Lampung.

Social Stuff

  • RSS
  • Twitter
  • Facebook
  • HOME
Oktri