ediTEMP Tombol Back to Top dengan simbol HTML unicode

Tombol Back to Top dengan simbol HTML unicode

Akhir akhir ini ramai dibicarakan tentang tombol back to top alias tombol untuk bisa cepat kembali ke halaman atas pada halaman blog. Dikatakan bahwa tombol ini akan sangat berguna bagi pengunjung blog yang menggunakan device dengan layar lebih sempit, karena halaman blog akan sangat memanjang dengan sangat panjangnya, sehingga akan kerepotan bila ingin segera kembali ke halaman paling atas.

Dengan tombol Kembali keatas, pengunjung cukup hanya dengan satu kali klik pada tombol tersebut, maka akan diarahkan ke posisi halamanb paling atas dalam sekejap.

Karena Pemasangan tombol back to top sudah banyak dan sejak lama dibahas oleh para mastah blog, maka kali ini ediTEMP hanya akan membahas tombol back to top yang sedikit berbeda dari yang kebanyakan di tutorialkan atau di share kan.

Perbedaannya hanya pada ikon tombol tersebut saja, bila biasanya menggunakan image yang telah di upload ke bp.blogsopt.com dengan perintah img src='......' , maka kali ini ediTEMP membuat tombol back to top dengan tanpa iamge tersebut, dengan asumsi pribadi (mungkin) akan menjadi lebih ringan dan tidak tergantung pada ikon pihak ketiga, sebagai penggantinya menggunakan html uncode tanda panah, misalnya menggunakan kode &#171; ( << ), panah ganda kiri, karena ediTEMP belum pernah menemukan html unicode untuk membuat panah ganda ke atas!....

==========================

<a href='#' id='kembali' style='position:fixed;bottom:0;right:0;padding:0px 10px;font-weight:bold;font-size:60px;text-shadow:1px 0 0 #fff,-1px 0 0 #000;transform:rotate(90deg)' title='Kembali Ke atas'>&#171;</a>

==========================

pasang saja tepat diatas </body>

HTML itu sudah digabung sekalian dengan css' bagi yang ingin memisah css dari HTML tersebut dipersilakan...... potong saja bagian
style='position:fixed;bottom:0;right:0;padding:0px 10px;font-weight:bold;font-size:60px;text-shadow:1px 0 0 #fff,-1px 0 0 #000;transform:rotate(90deg)' dan dibuat css tersendiri

perintah transform:rotate(90deg) berfungsi untuk memutar arah panah searah jarum jam sejauh 90 derajat, sehingga panah ganda itu sudah menghadap ke atas



sementara bila tidak dipasang perintah putar tersebut maka tampilannya akan tetap panah ganda kiri

Tapi apabila menggunakan unicode yang tampilannya sudah merupakan wakil dari tanda penunjuk ke arah atas, misalnya :

&#8593;
&#8613;
&#8648;
&#8657;
&#8670;
&#8673;
&#8679;
&#8682;
&#9650;
&#9651;&#9652;
&#9653;&#9757;
dll.....

maka perintah transform:rotate(90deg)  tidak diperlukan alias dihapus saja



Tombol itu akan tetap terlihat bahkan disaat scroll sudah mencapai bagian paling atas halaman blog. Sedang yang dikehendaki kebanyakan blogger adalah tombol akan tersembunyi pada scrolling halaman paling atas.

Untuk bisa menyembuntyikan tombol disaat tampilan halaman paling atas, masih seperti yang lain, yaitu menggunakan jquery, ediTEMP belum menemukan ramuan untuk menyembunyikanya tanpa jasa jquery, adapun jquery yang digunakan untuk menyembunyikan sbb :

===============================

<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function() {
    if($(this).scrollTop() > 300) {
        $('#kembali').fadeIn();
    } else {
        $('#kembali').fadeOut();
    }
});

$('#kembali').hide().click(function() {
    $('html, body').animate({scrollTop:0}, 2000);
    return false;
});
//]]>

===============================

Letakkan jquery tersebut dibawah atau diatas HTML tombol kembali
angka 300 dan angka 2000 bisa di ubahsesuaikan....

Yang paling penting adalah bahwa jquery itu tidak akan bisa bekerja tanpa file minimal javascript 1.7.2, nah disinilah yang sering membuat blogger enggan menggunakannya, karena bila template dipasang <script src='......./> katanya akan menurunkan nilai speed, terutama pada google pagespeed insight.

Akhirnya ada beberapa diantaranya yang memilih tombol tersebut tetap tampil walaupun halaman telah berada pada posisi paling atas.

Sedang solusi yang ediTEMP gunakan adalah dengan memasang file java script secara langsung pada template. Panjang banget siiiii, tapi setelah diamati, ternyata cara ini membuat peringan optimalkan pengiriman java script pada google pagespeed insight jadi lenyap,

tadinya mau posting js pakai textarea .... panjang banget siiii,



Tapi karena saking panjangnya itu ternyata membuat lemot ini posting .....
Jadi di upload dech, silakan DOWNLOAD DARI SINI

dan itu ediTEMP gunakan yang versi 1.8.1, jangan khawatir... tetap bisa bekerja

Pasang javascript tersebut diatas  jquery yang dipasang barusan. Bila ternyata tombol tidak bersembunyi, mungkin hasil copas js punya ediTEMP ada yang error, silakan copy sendiri dari sumber aslinya, bila  memasang hasil copy sendiri, jangan lupa beri awalan:

==========================
<script type='text/javascript'>
//<![CDATA[

dan ditutup dengan 

//]]>
</script>
================================

Sekali lagi ediTEMP tegaskan bahwa yang perbedaan tombol ini dengan yang lainnya hanyalah pada image yang diganti dengan html unicode. Sedangkan script untuk menyembunyikan sama saja dengan yang kebanyakan.
Demikian pembahasan tentang Tombol Back to Top dengan simbol HTML unicode yang bisa ediTEMP sajikan. Ralat, saran, masukan, kritik dan/atau pertanyaan, bisa disampaikan melalui kolom Komentar.

Sudah ada 1 Komentar

  1. mantap, ilmu yang sangat bermanfaat bagi pembaca, dan semoga jadi berkah bagi penulis.

    BalasHapus

Formulir Kontak

Nama

Email *

Pesan *