Tutorial Blog, Tips Blogging, SEO, Belajar Syntax HTML, PHP, CSS, dan Aktifitas Coding Lainnya

Membuat Icon Back to Top di Blog

Membuat Icon Back to Top di Blog - Saat sedang jalan-jalan searching mencari ide untuk posting, tiba-tiba saya menemukan web yang di sudut kanan bawahnya ada semacam icon panah ke atas. Dari sudut pandang saya sebagai pembaca, fitur seperti ini sangat berguna karena memungkinkan pembaca untuk melompat kembali ke atas halaman tanpa perlu scrolling lagi. Cukup satu klik. Terutama setelah membaca artikel atau daftar isi yang sangat panjang.

Cara kustomisasinya sangat mudah, hanya menambahkan beberapa kode yang diperlukan ke dalam HTML/Javascript Widget pada tata letak blog.

Membuat Icon Back to Top di Blog


Jadi dalam posting kali ini, sinahu coding akan menjelaskan cara menambahkan link icon back to top dengan dilengkapi gambar icon.

Cara Memasang Icon Back to Top pada Blog


Seperti saya sampaikan sebelumnya, caranya sangat sederhana. Ikuti langkah-langkah berikut :

1. Login Blogger
2. Pilih Opsi Tata Letak
3. Tambahkan Gadget pada Mode HTML / Javascript
4. Copy Paste semua kode ini dan letakkan pada gadget HTML / Javascript tadi.


<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6MHhlgmegujJJrAOgpHalj03Hp4TpWsdwy2_-mHbXnOVVZ7kC2GSx981-z8zj4qawhFkzPPh3Ui2qdtteQzydDx2o5QO0tubILYK3EboviXT0BJ1OMUFSKOxSnjg1GF9rB8StQrgoyVQ/w140-h140-p/Back_to_top_icon.png"/></a><a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6MHhlgmegujJJrAOgpHalj03Hp4TpWsdwy2_-mHbXnOVVZ7kC2GSx981-z8zj4qawhFkzPPh3Ui2qdtteQzydDx2o5QO0tubILYK3EboviXT0BJ1OMUFSKOxSnjg1GF9rB8StQrgoyVQ/w140-h140-p/Back_to_top_icon.png"/></a>

5. Save

Keterangan :


<a href="#"> <-- Ini link target untuk Back to Top
<img src="url gambar" <-- Letakkan url gambar untuk icon di sini
title="Back to Top" <-- Keterangan judul gambar icon
style="display: scroll; <-- Gambar akan tampil saat digulir
position: fixed; <-- posisinya relatif terhadap browser window
bottom: 5px; <-- icon berjarak 5px dari bottom
right: 5px;" /></a> <-- icon berjarak 5px dari kanan

Kamu bisa menyesuaikan posisi icon back to top sesuai selera dengan mengatur pada position serta ukuran bottom dan right. Semoga tutorial singkat ini bermanfaat dan membantu konco sinahu untuk membuat icon back to top pada blog.



3 Komentar untuk "Membuat Icon Back to Top di Blog"

terima kasih infonya, akhirnya saya tahu

This comment has been removed by the author. - Hapus

Back To Top