• About
  • Sitemap
  • Privacy Policy
  • Disclaimer
  • Contact

Dunia Online | Blog Untuk Usaha

  • Beranda
  • Sepakbola
    • Liga Inggris
    • Liga Spanyol
    • Liga Italia
    • Liga Indonesia
  • Tekno
    • Gadget
    • Internet
  • Entertainment
  • Trik dan Tips
  • Unik dan Menarik
  • Blogging
Home » Tips Blog » Tutorial Blog » Cara Memasang Back to Top di Blog

Cara Memasang Back to Top di Blog


Salah satu hal yang paling diperhatikan adalah Navigasi, bukan hanya untuk pembaca, search engine seperti google dan yahoo pun sangat menyarankan sebuah situs memiliki letak navigasi yang jelas, teratur dan tau kemana larinya. Navigasi kini pun sudah sangat beragam, salah satu diantaranya adalah yang biasa dikenal dengan "back to top". Fitur ini dapat menghilangkan "kemalasan" pembaca setelah melakukan reading untuk seluruh isi posting. Biasanya, untuk scroll ke atas saja bisa terasa berat. Kemalasan dan keberatan  inilah yang mendorong adanya fitur "back to top". Penempatannya sangat fleksibel, namun biasanya terletak pada bagian bawah seperti credit link. Fitur ini memungkinkan pembaca untuk "scroll" otomatis ke bagian atas blog setelah "a:active". Mudahnya, pembaca hanya meng-klik text atau gambar yang dimodifikasi, kemudian akan langsung menuju ke bagian yang ditentukan.

Pemasangan dan penggunaan "back to top" sangat mudah sekali. Sebelum itu, ada baiknya sobat mengetahui 2 jenis "back to top". Dari semua jenis navigasi "back to top" yang akan di tampilkan, saya coba mulai dengan yang paling susah. Sobat harus tau 2 hal. Pertama, sobat harus tau kode html untuk gambar yang memiliki link. Mudahnya, kita perlu menempatkan kode html gambar sebagai isi dari tag a yang biasa diisi oleh teks atau tulisan. Contohnya seperti ini.
<a href="http://kupas-ampas.blogspot.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzoz7a2NA0o8XP3t0XACIhniQPGCVNdprEj75zhbUJ75NGf4-5klR4_SCrCRKqrNyBWjhu0-VJ8UeYfvZrkLr84TQbodLWXVXyyP1ryKwM2vwO0f7cRFfhoNXSut0OhCOYXWmR1tpM6js/s1600/header.png"></a>
Hal kedua yang sobat harus tau juga adalah bagian mana yang nantinya akan ter-scroll sendirinya. 2 bagian akan saya coba bahas yaitu #main-wrapper dan # sebagai hrefnya. Jika sobat meletakkan #main-wrapper sebagai hrefnya, maka scroll akan berhenti tepat sedikit di atas judul posting. Tapi jika sobat menggunakan hanya "#", maka scroll akan berhenti tepat seperti saat sobat membuka website tersebut pertamakali dan belum di-scroll sedikitpun.

Masih ada satu pilihan lagi buat sobat, yaitu menggunakan tulisan. Penggunaan tulisan (bukan gambar) sebagai anchor link menjadikan blog lebih seo dan cepat ketimbang sobat menggunakan gambar. Namun, jika sobat tetap ingin menggunakan gambar, pastikan ukuran gambar tidak mempengaruhi loading blog secara signifikan.

#1 "Back to top" Gambar Bagian Tertentu.
2 hal yang harus diperlukan, yaitu gambar dan bagian yang nantinya akan jadi sasaran. Sobat hanya perlu membuat gambar yang berlink kepada bagian tertentu yang sudah di pilih. Kode htmlnya seperti di bawah ini.
<a href="bagian sasaran"><img src="url gambar"></a>
Contoh bagian sasaran adalah #main-wrapper. Tapi nama nama ini relatif sifatnya. Tergantung pembuat template sobat.

#2 "Back to top" Gambar non-bagian.
Jenis ke-2 ini mungkin agak terdengar sedikit aneh. Namun jenis inilah yang menurut saya paling banyak dipakai. Hampir di setiap blog. Kode htmlnya seperti ini.
<a href="#"><img src="url gambar"></a>
Pastikan "#" sebagai tujuannya. Ini dimaksudkan agar nanti "back to top" bisa bekerja.

#3 "Back to top" Tulisan bagian tertentu.
Kode html untuk jenis ini hampir sama dengan jenis no 1. Perbedaanya hanya penggunaan tulisan, bukan gambar. Agar lebih pas, sobat sebaiknya menggunakan tanda arah panah ke atas.
<a href="bagian sasaran">Back to top ↑</a>
#4 "Back to top" non-bagian.
Sobat pasti udah ngerti, kan? Berikut kode htmlnya..
<a href="#">Back to top ↑</a>
Tulisan berwarna biru silahkan diganti berdasarkan keperluan dan kebutuhan masing masing.
Berdasarkan penelitian saya, jenis ke 3 dan ke 4 lah yang paling SEO karena loading blog bisa tetap terjaga. Selain itu, gambar yang terlalu banyak tidak bagus untuk sebuah web. Jenis ke 3 dan 4 sebaiknya di pasang di bagian credit atau di tempat yang mudah dijangkau. "Back to top" sangatlah penting. Sobat harus bisa menggunakannya dengan kreatifitas. Kedepannya, saya akan coba dengan "Back to top" v2 yaitu dengan melayang. Insya Allah..
Ditulis oleh Yayan Kurniawan, Minggu, 12 Agustus 2012 - Rating: 4.5
Judul : Cara Memasang Back to Top di Blog
Deskripsi : Salah satu hal yang paling diperhatikan adalah Navigasi, bukan hanya untuk pembaca, search engine seperti google dan yahoo pun sangat men...

Bagikan ke

Facebook Google+ Twitter

Belum ada komentar untuk "Cara Memasang Back to Top di Blog "

Posting Komentar

Pengunjung Yg Bijak Adalah Pengunjung Yg Selalu Mengungkapkan UNEG-UNEG.nya Untuk Postingan Ini.
Berkomentarlah Yg baik,
NO SPAM, NO JUNK

Posting Lebih Baru
Posting Lama
Beranda
Langganan: Posting Komentar (Atom)

Banner

Checkpagerank.net

Popular Post

  • Template Blog Hack4rt
    Demo  |  Download Fitur Template Hack4rt Tampilan Cerah (Light) Responsive Template by Mas-Sugeng Bottom-Bar Post 2 Kolum dan Goog...
  • Template Framework seo elite blogger
    nah kali ini saya akan bagi-bagi info tentang Template blogger,,mumpung lagi gak ada kerjaan ya mending update aja lah ,, iya kan ..?? ...
  • Karakter Film Pirates of the Caribbean 4 dan Gambar Pemain Baru
    Film Pirates of the Caribbean 4 masih dalam proses pembuatan. Berikut ini ada beberapa foto yang di ambil dalam proses pembuatan film in ...
  • Cara Membuat Link Open New Tab Di Blog
    Cara Membuat Link Open New Tab Saat Di Klik -  Hari ini saya ingin berbagi trick sederhana namun sangat bermanfaat trick ini adalah cara m...
  • Foto Mesra Ciuman Gading Marten Dan Gisel Beredar Di Dunia Maya!
    - Beberapa waktu lalu, foto-foto Mesra Ciuman Gading dan Gisel Beredar didunia maya. Seperti diketahui sebelumnya, Gisel dan Gading me...
  • Kisah Mengharukan Anak Yang Mencoret Mobil Ayahnya
    DLN = Sepasang suami isteri – seperti pasangan lain di kota-kota besar meninggalkan anak-anak diasuh pembantu rumah sewaktu bekerja. Anak ...
  • Baterai HP meledak, bocah berusia 8 tahun tewas
    Baterai HP meledak, bocah berusia 8 tahun tewas - Seorang bocah berusia delapan tahun di Tabanan Bali, Putu Fernanda, tewas setelah terk...
  • Free download Video Bokep Mirip Gisel
    video bokep mirip gisel . apakah itu benar terjadi,,?? gawat dah.. kalo ada yg tau link download.nya jgan lupa bagi bagi zob,.wkwk
  • Cara Pasang Widget Laman Google Plus di Blogger
    Mungkin sudah banyak blogger yang telah menulis bagaimana cara pasang laman Google Plus di blogger . Tapi ketika muncul keinginan Saya untuk...
  • Akhir 2013 Gading dan Gisel Menikah
    Akhir 2013 Gading dan Gisel Menikah - Meski hubungan tali asmara yang dibina Gading dan Gisel masih terbilang baru, namun keduanya memang...

Kategori

  • Bisnis Online (1)
  • Cara Bikin robot (1)
  • Cerita dan renungan (2)
  • Defacer (2)
  • hacker (3)
  • Informasi Umum (76)
  • Internet (18)
  • JKT 48 (4)
  • kata kata lucu (1)
  • kata kata renungan (1)
  • Kecantikan (2)
  • Kesehatan (15)
  • Komik (1)
  • Lirik Lagu (1)
  • Master Hack (2)
  • Pemimpin (1)
  • Pendidikan (1)
  • Puasa Romadhon (2)
  • sahabat (1)
  • Software (3)
  • Template (2)
  • Template Seo (4)
  • Tips And Trik (3)
  • Tips Blog (47)
  • tips internet (4)
  • Tips Seo (16)
  • Tutor Champ (1)
  • Tutorial Blog (53)
  • video (1)

Followers

Adv

'

Iklan

WPBisnisOnline

Artikel Terbaru

Rahasia Sukses Bisnis Online
Artikel Blageziner
  • Mbah SERP
  • Yayan Fansub
  • Artikel Rekomendasi

    Postingan Populer

    • Template Blog Hack4rt
      Demo  |  Download Fitur Template Hack4rt Tampilan Cerah (Light) Responsive Template by Mas-Sugeng Bottom-Bar Post 2 Kolum dan Goog...
    • Template Framework seo elite blogger
      nah kali ini saya akan bagi-bagi info tentang Template blogger,,mumpung lagi gak ada kerjaan ya mending update aja lah ,, iya kan ..?? ...
    • Karakter Film Pirates of the Caribbean 4 dan Gambar Pemain Baru
      Film Pirates of the Caribbean 4 masih dalam proses pembuatan. Berikut ini ada beberapa foto yang di ambil dalam proses pembuatan film in ...
    • Cara Membuat Link Open New Tab Di Blog
      Cara Membuat Link Open New Tab Saat Di Klik -  Hari ini saya ingin berbagi trick sederhana namun sangat bermanfaat trick ini adalah cara m...
    • Foto Mesra Ciuman Gading Marten Dan Gisel Beredar Di Dunia Maya!
      - Beberapa waktu lalu, foto-foto Mesra Ciuman Gading dan Gisel Beredar didunia maya. Seperti diketahui sebelumnya, Gisel dan Gading me...
    • Kisah Mengharukan Anak Yang Mencoret Mobil Ayahnya
      DLN = Sepasang suami isteri – seperti pasangan lain di kota-kota besar meninggalkan anak-anak diasuh pembantu rumah sewaktu bekerja. Anak ...
    • Baterai HP meledak, bocah berusia 8 tahun tewas
      Baterai HP meledak, bocah berusia 8 tahun tewas - Seorang bocah berusia delapan tahun di Tabanan Bali, Putu Fernanda, tewas setelah terk...
    • Free download Video Bokep Mirip Gisel
      video bokep mirip gisel . apakah itu benar terjadi,,?? gawat dah.. kalo ada yg tau link download.nya jgan lupa bagi bagi zob,.wkwk
    • Cara Pasang Widget Laman Google Plus di Blogger
      Mungkin sudah banyak blogger yang telah menulis bagaimana cara pasang laman Google Plus di blogger . Tapi ketika muncul keinginan Saya untuk...
    • Akhir 2013 Gading dan Gisel Menikah
      Akhir 2013 Gading dan Gisel Menikah - Meski hubungan tali asmara yang dibina Gading dan Gisel masih terbilang baru, namun keduanya memang...
    Copyright © 2012 Dunia Online | Blog Untuk Usaha - All Rights Reserved
    Design by Mas Sugeng - Powered by Blogger