Trick n Tips Blogger | Widget Blogger | Template Blogger

Cara Membuat Tombol Back To Top Atau Kembali Keatas Di Blog

by Irsyad Aslam , at 2/05/2013 , has 2 komentar
Tombol Back To Top ini Sangat dibutuhkan oleh si pengunjung. Apa lagi jika anda menulis Posting yang sangat panjang. Dengan Tombol Back To Top ini pengunjung blog anda tidak perlu klik scrol pada blog anda untuk kembali keatas. Jika Tombol ini di klik otomatis akan kembali ke atas.

Tombol ini tidak perlu dicari ke bawah, melainkan tombol ini melayang di samping dan akan mengikuti dimana scrol berada. Tombol ini juga mempunyai 19 style Tombol. Anda juga bisa memilih Sytle yang anda mau.

Tujuan Dipasangnya style ini agar pengunjung lebih tertarik dengan tombol ini. Di posting kali ini saya akan menjelaskan Cara Untuk Membuat Tombol Back to Top Di Blog. saya akan menjelaskan secara mendetail cara untuk membuatnya. Jika, Anda ingin membuatnya anda perlu mengedit HTML template anda.
Seperti Berikut caranya:

  • Silahkan Login Ke Blogger Anda.
  • Setelah itu, Klik Menu Template --> Klik Tombol Edit HTML untuk mengedit HTML template anda.
  • Lalu, Cari kode  ]]></b:skin> dengan menekan CTRL+F atau dengan F3.
  • Setelah menemukan, Masukan kode berikut ini diatas kode ]]></b:skin> :

  • Setelah itu, Cari Kode </body> dengan menekan CTRL+F atau dengan F3.
  • Masukan Kode Berikut ini diatas kode </body> :
Keterangan:
Ganti Tulisan URL Gambar Disini dengan URL Tombol To Top yang anda mau.


http://2.bp.blogspot.com/-zEQ19AaWWVA/URDamjAAzhI/AAAAAAAACMw/6-yMQz-EZ34/s1600/Top+Biru.png


http://3.bp.blogspot.com/-D8T1ofrsxZk/URDaolY9XoI/AAAAAAAACM4/QjmLyehrY9Q/s1600/Top+Hijau.png


http://1.bp.blogspot.com/-gL4kUlrlqaY/URDaqPYWwbI/AAAAAAAACNA/Ys6u4CDEqLY/s1600/Top+Kuning.png


http://4.bp.blogspot.com/-6MjEn-mtg44/URDarZHjshI/AAAAAAAACNI/UUU0IxH-4aM/s1600/Top+Merah.png


http://2.bp.blogspot.com/-5r9G8-6sSb8/URDatTWoiGI/AAAAAAAACNQ/SCfiqfCPs0A/s1600/Top+Purple.png


http://3.bp.blogspot.com/-HrY6R3gdoqE/URDayXJXuZI/AAAAAAAACNc/EVAYZy3Amt4/s1600/bttp-10.png


http://1.bp.blogspot.com/-QF7uj_nuQaI/URDay2Xcj1I/AAAAAAAACNs/6kewlJiCkX0/s1600/bttp-11.png


http://1.bp.blogspot.com/-7SXYiG-I-xc/URDaypOyjTI/AAAAAAAACNY/0W2NeBBDml8/s1600/bttp-12.png


http://3.bp.blogspot.com/-IzQc6MawEVE/URDa1eA_bGI/AAAAAAAACOY/b5gXVxg5mb0/s1600/bttp-9.png


back to top For Blogger
http://1.bp.blogspot.com/_JwD5r652h00/SvDBBzoz4II/AAAAAAAAAQw/n9hIomKpQxY/s400/bttp-8.png


back to top For Blogger
http://3.bp.blogspot.com/_JwD5r652h00/SvDBBlYeFHI/AAAAAAAAAQo/lzY3WpZpwPA/s40


back to top For Blogger
http://3.bp.blogspot.com/_JwD5r652h00/SvDBW6QlhXI/AAAAAAAAARY/6ZxECjTlMxM/s400/bttp-13.png


    back to top For Blogger
    http://3.bp.blogspot.com/_JwD5r652h00/SvDBW-al_pI/AAAAAAAAARg/Aoxlzmp3Kw0/s400/bttp-14.png


    back to top For Blogger
    http://1.bp.blogspot.com/_JwD5r652h00/SvDBXF2WGRI/AAAAAAAAARo/FIPZOwsTTBc/s400/bttp-15.png
    back to top For Blogger


    http://3.bp.blogspot.com/_JwD5r652h00/SvDBloI2NZI/AAAAAAAAARw/VI-Li7cPUvM/s1600/bttp-16.png
    back to top For Blogger


    http://1.bp.blogspot.com/_JwD5r652h00/SvDBl9PLQ7I/AAAAAAAAAR4/5fV05DNfZ9o/s400/bttp-17.png
    back to top For Blogger


    http://3.bp.blogspot.com/_JwD5r652h00/SvDBl0UhsvI/AAAAAAAAASA/ge0GmH0HkyE/s400/bttp-19.png
    back to top For Blogger


    http://2.bp.blogspot.com/_JwD5r652h00/SvDBmIGbP3I/AAAAAAAAASI/cL5okLpz_C8/s400/20.png


    • Setelah itu, Cari Kode <head> dengan menekan CTRL+F atau dengan F3.
    • Paste Kode Berikut ini di bawah kode <head> :

    • Lalu, Klik Tombol Simpan Template.


    Selamat Mencoba,
    Salam Sukses.



    Your-BelajarBLOG
    Irsyad Aslam
    About
    Cara Membuat Tombol Back To Top Atau Kembali Keatas Di Blog - written by Irsyad Aslam , published at 2/05/2013, categorized as Widget . And has 2 komentar
    2 komentar Add a comment
    Sebelumnya terikasih, tetapi apakah bisanya hanya bentuk tulisan saja tanpa ada gambarnya? dan satu lagi apakah hal ini tidak mengurangi loding blog?
    Kalau Hanya Ingin Tulisan Saja,
    Hanya Ganti Kode <a href="#" id="backtotop"><img src="URL Gambar Disini" alt="back to top" /></a>

    Dengan Kode Berikut :

    <a href="#" id="backtotop">Back To Top</a> ,

    Hanya Sedikit Mengurangi Kecepatan Blog, yang hanya mengunggah(menampilkan) gambarnya saja.

    Selamat Mencoba,
    Salam Sukses,



    Your-BelajarBLOG
    Delete
    Reply Delete

    Catatan:

    • Dilarang Menaruh Link Aktif
    • Dilarang Nyepan/Promosi Di Komentar
    • Dilarang Berkata Tidak Sopan
    • Untuk Menyisipkan Kode, Gunakan Tag <i rel="code">... KODE ...</i>
    • Untuk Menyisipkan Kode Panjang, Gunakan Tag <i rel="pre">... KODE ...</i>
    • Untuk Menyisipkan Catatan, Gunakan [catatan].. TEKS ...[/catatan]
    • Untuk Menyisipkan Gambar, Gunakan [img]URL GAMBAR[/img]

    Sebelum Menyisipkan Kode Harap Konversi Kode Sebelum Menuliskan Di Komentar

    Bck
    Cancel Reply

    Followers

    Komentar Terbaru

    Copyright ©2013 Your-BelajarBLOG by
    Theme designed by Damzaky - Published by Proyek-Template
    Powered by Blogger