Link 'Back to Top' atau 'Kembali ke Atas' dibuat untuk memudahkan pengunjung yang ingin kembali ke atas halaman blog tanpa memutar scroll mouse. Link Back to Top tersebut dapat ditempatkan secara terapung seperti yang sudah pernah dibahas dalam posting yang berjudul Cara Memasang Tombol 'Back to Top' pada Blog.
Kali ini kita akan membuat link Back to Top di posting. Link Back to Top ini akan muncul pada bagian bawah posting. Linknya dapat berupa tulisan atau dapat diganti dengan gambar seperti yang terlihat pada tabel di bawah ini.
| Back to Top tulisan | Back to Top gambar |
 |  |
Untuk membuat 'Back to Top' di posting, Anda dapat menyimak langkah-langkahnya di bawah ini.
1. Masuk ke akun Blogger Anda.
2. Klik Rancangan > Edit HTML.
3. Klik Download Template Lengkap untuk mem-backup template.
4. Beri tanda centang pada Expand Template Widget.
5. Cari kode yang seperti di bawah ini atau kode untuk icon email. Untuk mempercepat pencarian, tekan Ctrl + F, kemudian ketikkan kode yang akan dicari.
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>
</a>
</span>
</b:if>
6. Untuk membuat link Back to Top, silakan tambahkan kode <a href='#'>Back to Top</a> setelah kode sumber gambar icon email sehingga kodenya menjadi seperti di bawah ini.
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>
</a><a href='#'>Back to Top</a>
</span>
</b:if>
- Tulisan Back to Top dapat Anda ganti sesuai keinginan Anda, misalnya Kembali ke Atas.
7. Jika ingin mengganti tulisan Back to Top dengan gambar, silakan tambahkan kode di atas dengan kode URL gambar Anda.
Contoh:
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/>
</a><a href='#' title='Kembali ke Atas'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHUgBrJArVLwP85yN_QoRbFjAF3MNicqg46zj4n5-NHMM5_e8-pA-eWiHK3aIj9W3uKnP5RBopTfKu_tnL84jmzzCTw2DX_GrIQL_rlMVkWw0uM51HUPLZlWTw6jENlAR7uQnU5kmEjti7/s1600/Up.jpg'/></a>
</span>
</b:if>
- Anda dapat mengganti judul Kembali ke Atas sesuai keinginan Anda dan ganti URL gambar-nya dengan URL gambar Anda sendiri.
Tidak ada komentar:
Posting Komentar