Rara Story

Mejor opción es ser tu mismo

Up

Tutorial WordPress // Membuat Icon ‘Scroll up’ atau ‘Back to the top’

1 Komentar

Penampakan ikon scroll up alias back to the top alias kembali ke atas ini dapat dilihat di screenshot tampilan Blog rara story di bulan Agustus 2015. Coba lihat yang ditandai kotak cokelat, itu adalah icon scroll up yang apabila kalian klik maka halaman otomatis naik/bergulir  ke bagian paling atas.

kembali ke atas

Ikon scroll up ini paling baik digunakan jika Blog (wordpress) kalian mengaktifkan fitur ‘gulir tanpa batas’ / ‘Infinite Scroll’, fitur yang memuat pos-pos berikutnya secara otomatis ketika pembaca mendekati bagian bawah halaman pos kalian. (maaf kalau bahasanya tidak dimengerti, susah nyusun kalimatnya mau gimana. Pokoknya intinya sih gitu _ _”)

Jadi untuk memulai tutorial ini, langkah pertama kita bahasa dulu cara mengaktifkan fitur ‘gulir tanpa batas’ ini. Seperti biasa kalau screenshotnya kurang jelas, tinggal di klik untuk resolusi yang lebih baik.

1. Kalian mesti login ke wordpress lalu pergi ke Dasbor / Admin Wp kalian masing-masing. Lalu ke menu pengaturan >> Membaca

membuat scroll up atau back to the top di wordpress

1

Pada Pengaturan Membaca, kalian gulir ke bawah sampai menemukan tulisan ‘Infinite Scroll’ atau ‘gulir tanpa batas’–serupanya, berikan tanda centang untuk mengaktifkan fiturnya.

2

2. Setelah beres dengan fitur Infinite Scroll sekarang kita beralih untuk membuat ikonnya. Untuk ikon sendiri kalian bisa menggunakan gambar sesuka kalian yang sudah terupload di internet, agar lebih nyaman… kalian bisa mengupload gambar sendiri. Kalau aku pribadi lebih suka mengupload dengan menambahkan media baru di WordPressku sendiri.

3

Dan biasanya agar lebih menarik ikon scroll up ini menggunakan format PNG (tanpa background), untuk ukurannya jangan terlalu besar. Ukuran yang aku sarankan maksimal 150 x 150 pixel.

Setelah selesai mengupload gambar icon, silakan copy/salin urlnya dan pastekan dulu di tempat yang aman (misalnya notepad, microsoft word etc)

4

3. Sekarang kita beralih ke menu Tampilan >> widget.

5

Pada halaman widget, seret kotak ‘Teks’ ke bagian Widget aktif

6

lalu paste/tempelkan kode Html berikut!

7

Ganti tulisan berwarna merah dengan url Gambar/ ikon scroll up yang di upload sebelumnya (yang tadi sudah diamankan di suatu tempat)

Info:

Kalian bisa mengganti angka yang terletak sesudah tulisan bottom dan right, untuk mengatur posisi ikon yang kalian inginkan. Kalian juga bisa mengganti right dengan Left jika menginginkan Ikon scroll up berada di sebelah kiri layar.

Apabila sudah merasa mantap, jangan lupa klik ‘Simpan’ pada Widget teks tadi… dan silahkan kunjungi blog kalian untuk melihat hasilnya.

Semoga dapat dipahami dan selamat mencoba…

Jangan lupa respect penulis (rasyifa @ https://rarastory.wordpress.com) dengan meninggalkan beberapa kata melalui komentar, klik tombol ‘like’ atau berikan ‘5 bintang pada rate’. Terimakasih.

Penulis: Rasyifa

♥ Ordinary Girl, who loves rain sound.

One thought on “Tutorial WordPress // Membuat Icon ‘Scroll up’ atau ‘Back to the top’

  1. Ping-balik: Freebies // Ikon untuk Back to Top (kembali ke atas) | Rara Story

Feedback. . .♥

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s