Membuat Tombol Go to Top dan Go to Bottom

Untuk postingan kali ini saya akan membahas tentang trick blogger kelas pemula seperti saya...heee. Yaitu "Cara Membuat Tombol Back To Top ( Go to Top ) dan Go to Bottom" apakah sedulur tau apa itu tombol Back To Top, coba alihkan pandangan sedulur ke bagian kanan bawah blog ini...disitu ada2 tombol, yang satu adalah tombol untuk kembali ke bagian atas blog ( Go to Top ), dan yang satu lagi untuk ke bagian paling bawah blog ( Go to Bottom )...


Sudah tau kan sekarang, jadi langsung aja ke langkah-langkah pembuatan :

  1. Login ke akun Blogger sedulur
  2. Plih Layout > Edit HTML
  3. Cari kode ]]></b:skin>, kemudian CopPas kode di bawah ini dan taruh di atas  ]]></b:skin> :

    Kode Go to Top
    .gototop {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlJcJHE_rz8lyKaoPVuhzNzSyK27IDioZynsqstxKLJ1BKCK9vngS-Sce9uPILdjTIsWN2aRxOTkc7Q1P-eu9Y44VkLI47MW5NBLOfu_B9_3rDbLd9JzAbpZDHFxvl8Hpr-PLSsdZCJKI/s400/arrowtopdt6.gif)no-repeat;
    display:block;
    _display:none;
    position:fixed;
    z-index:9999;
    text-indent:-9999px;
    width:17px;
    height:17px;
    overflow:hidden;
    outline:none;
    right:8px;
    bottom:35px
    }
    Kode Go to Bottom
    .gotobottom {
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQuyzGa-SmHGRPWjGHmq4-7qEtdtLadRUK5g3K3bwbsybCyIpbVWWR1SFHtB8uYtgBTVZn28AOLrK9ODIv_nPI06NLKia5WDwc_auEWQBU_nM2YfWcX50_QBE7mwRdv747_dTB0sBWCVQ/s400/arrowdownqe1.gif)no-repeat;
    width:17px;
    height:17px;
    display:block;
    _display:none;
    position:fixed;
    z-index:9999;
    text-indent:-9999px;
    overflow:hidden;
    outline:none;
    right:8px;
    bottom:15px
    }

    Keterangan : Untuk kode berwarna kuning bisa sedulur ganti dengan icon milik sedulur.
  4. Selanjutnya, silahkan sedulur cari kode </body>. Paste kode dibawah ini tepat diatas kode tadi :
    <a class="gototop" href="javascript:scroll(0,0)" title="Go to Top">Top</a>
    <a class="gotobottom" href="#footer" title="Go to Bottom">Bottom</a>
  5. Terakhir, klik Save Template...selesai sudah. Silahkan sedulur lihat sendiri perubahannya...heeee

Silahkan Berkomentar :


Ada 5 komentar “Membuat Tombol Go to Top dan Go to Bottom”
Tutorial After Effect mengatakan...
pada hari 

Tutorial yang bagus bro...
salam kenal

GFS mengatakan...
pada hari 

@Tutorial After Effect : masama lurd..lam knal jg...:l

illank mengatakan...
pada hari 

mantap gan tutorialnya........

Sakahayang Kang Asep mengatakan...
pada hari 

Makasih sudah share, sudah saya apply di blog sakahayang

happy blogging

GFS mengatakan...
pada hari 

@Sakahayang Kang Asep : sama2 gan,,,thx udah mmpir,,,:t

Posting Komentar

:a :b :c :d :e :f :g :h :i :j :k :l :m :n :p :q :r :s :t
[Gunakan Form Komentar Klasik]

powered by Blogger | Modification by Gyanfs