Memasang Ikon Back to the top

Selasa, 17 Mei 2011

Memasang Ikon Back to the top


Waktu sedang searching dan melihat-lihat desain blog, saya melihat sesuatu yang menarik di sebuah blog yaitu sebuah ikon untuk "kembali ke atas" atau "back on top of page", yang terletak di pojok kanan bawah tampilan blog tersebut. Jika ingin berkunjung ke blog tersebut, bisa lihat disini.
Sebagai blogger yang senang dengan hal-hal yang baru, saya lihat fitur ini sebagai sesuatu yang sangat menarik. Bayangkan saja jika blog anda mempunyai artikel yang panjang tanpa ada fasilitas readmore, tentu saja jika kita ingin kembali ke halaman atas dari blog harus scrolling mouse dan itu cukup membutuhkan waktu. Tergantung juga jumlah postingan yang ditampilkan oleh author blognya, namun dengan fitur ini sepertinya hal tersebut sangat membantu agar kita tidak perlu scrolling mouse dan membuang waktu.

Tertarik untuk menggunakan fitur ini? Sekarang kita coba untuk membahasnya. Ikon ini sebenarnya sangat membantu apabila kita menampilkan artikel yang panjang dipostingan kita, selain itu ikon ini juga kecil ukurannya dan tidak menggangu artikel maupun tampilan blog secara keseluruhan karena posisinya berada diujung kanan bawah tampilan blog (ikon juga tidak terpengaruh besar kecilnya resolusi dari layar monitor yang digunakan user untuk melihat tampilan blog), serta menampilkan link target untuk menuju ke halaman atas atau utama karena hanya menggunakan simbol "#".

Jika ingin menggunakan ikon ini, anda tinggal copy saja kode yang saya berikan lalu ganti URL imagenya dengan punya anda. Kalau anda ingin mendesain sendiri atau mencari ikon semacam itu bisa saja, anda tinggal buat dan cari yang sesuai blog anda, jika telah mendapatkan ikon yang anda sukai anda harus upload dulu file tersebut dan dapatkan URL imagenya setelah itu baru ganti kode URL imagenya dengan yang anda miliki. Langkah-langkahnya sebagai berikut:

1. Anda harus mempunyai ikon terlebih dahulu sebelum menambahkan kode dibawah ini, setelah itu upload file tersebut dan dapatkan URL imagenya.

2. Kode untuk menggunakan fitur ini ada dibawah ini:
<a style="display:scroll position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="IMAGE-URL"/></a>

3. Taruh kode tersebut diantara tag <body> dan tag </body>, atau bisa juga ditaruh setelah tag<body> atau sebelum tag </body>

Kalau ingin posisi ikon tersebut sesuai dengan tampilan blog, anda bisa setting untuk bottom dan right dalam pixel. Nah,sangat mudah dan sederhana sekali bukan!. Anda yang memiliki tampilan blog dengan artikel yang panjang sangat cocok menggunakan fitur ini. Selamat mencoba dan keep blogging!

0 Komentar di "Memasang Ikon Back to the top"

Posting Komentar

Terima Kasih Udah Baca Artikel Blog Tyo. Silahkan berkomentar, bebas dan bertanggung jawab. Oh ya, masih banyak artikel bagus lho di blog ini, ditunggu komentar dan kunjungannya kembali