7 Situs Untuk Mengetahui Kecepatan Website

7 Situs Untuk Mengetahui Kecepatan Website

BrainLuqman   8:49 AM   Comment  

Situs untuk mengukur dan mengetahui kecepatan website akan menjadi topik kita kali ini. Waktu loading dan kecepatan akses sebuah website memang perlu untuk diperhatikan, web developer sebisa mungkin harus berupaya untuk selalu meningkatkan kecepatan websitenya demi kenyamanan pengunjung.


Website yang cepat ketika dibuka tentu akan membuat pengujung betah, sedangkan yang lambat ketika dibuka bisa membuat pengujung menjadi jengkel dan hal tersebut dapat menyebabkan situs menjadi kehilangan banyak pengunjung dan bahkan kehilangan pendapatan atau peluang bisnis.

Kecepatan website juga bisa mempengaruhi peringkat mesin pencari. Website yang cepat akan disukai oleh mesin pencari seperti Google. Bahkan menurut algoritma mesin pencari Google, peringkat tergantung juga pada kecepatan website. Oleh sebab itu sangat perlu untuk mengoptimalkan kecepatan website dan kinerjanya jika ingin memiliki peringkat yang lebih baik dan mendapatkan lebih banyak pengujung dari mesin pencari.

– Baca juga: 7 Fakta Tentang Pentingnya Kecepatan Website Untuk Bisnis Online

Kecepatan ketika membuka website bisa disebabkan oleh berbagai faktor dan tidak mudah untuk meningkatkan kecepatan website secara 100%, butuh kerja ekstra dan teknik-teknik khusus.

Situs untuk mengukur kecepatan website

Di internet sudah tersedia website yang bisa digunakan untuk mengukur kecepatan sebuah website, berbagai website tersebut bahkan bisa memberikan skor dan memberikan berbagai laporan yang bisa dibilang cukup lengkap. Kesalahan dan solusi untuk memperbaikinya juga diberikan, pemilik website tinggal mengikuti aturan-aturan tersebut agar bisa lebih cepat dan mendapatkan skor yang maksimal.

GTmetrix

GTmetrix salah satu website terbaik untuk mengukur kecepatan website secara gratis. Kita bisa mengetahui apa saja yang membebani website dengan laporan analisa yang diberikan oleh GTmetrix. Website ini juga memberikan saran untuk meningkatkan loading website Anda. GTmetrix menjelaskan secara detail bagaimana performa website Anda, PageSpeed, skor YSlow, waktu loading website, besar file, dan jumlah request yang dilakukan website ke server. Anda juga bisa membandingkan website Anda dengan website lainnya.

Google PageSpeed Insights

Google PageSpeed Insights menguji website baik itu ketika dibuka dengan desktop maupun mobile. Ranking yang diberikan yaitu antara 1 hingga 100. Semakin besar angka yang diberikan maka semakin baik website Anda. Selain itu Google PageSpeed Insights juga memberikan saran untuk memperbaiki masalah kecepatan situs Anda.

Pingdom

Pingdom adalah website gratis untuk mengukur kecepatan, menganalisa seberapa cepat website Anda, dan memberikan rekomendasi untuk membuat website Anda semakin cepat. Pingdom memeriksa setiap elemen dari sebuah halaman website dan menghasilkan laporan besar file, waktu muat, dan lainnya. Anda juga bisa mendownload dan membagikan laporan yang diberikan oleh Pingdom. Fitur yang tidak kalah mumpuni dari pingdom ini adalah mereka memonitor website dari berbagai lokasi, yang membuat layanan tes kecepatan bisa unik pada setiap orang.

WebPagetest

WebPagetest juga termasuk salah satu website yang mumpuni untuk mengetahui kecepatan website pada berbagai browser.

WebPagetest merupakan sebuah proyek open source yang sedang dikembangkan dan disupport oleh Google untuk membuat website menjadi lebih cepat.

WebPagetest awalnya dikembangkan oleh AOL untuk penggunaan secara internal pada tahun 2008 dan berada dibawah lisensi BSD.

Free Speed Test

Free Speed Test memungkinkan kita untuk mengetahui berapa loading time yang diperlukan ketika membuka sebuah website, mereka melakukan pengujian menggunakan berbagai data center yang tersebar diseluruh dunia. Jadi hasil yang diberikan akan cukup akuran untuk masing-masing pengguna.

Page Scoring Website Speed Test

Page Scoring diciptakan untuk membantu para pengembang website untuk menganalisa kecepatan websitenya dengan memberikan hasil laporan hanya dengan memasukan alamat domain saja.

YSlow

Salah satu aplikasi yang cukup terkenal untuk mengukur kecepatan website yaitu menggunakan YSlow. Dibuat oleh Yahoo! Exceptional Team dengan melakukan identifikasi terhadap 23 dari total 34 aturan yang bisa membuat website menjadi lebih cepat. Agar lebih mudah anda bisa menginstall Addon dan Extension YSlow di browser yang Anda gunakan.

Cara Mematikan Klik Kanan Pada Website Blog

Cara Mematikan Klik Kanan Pada Website Blog

BrainLuqman   8:45 AM   Comment  

Cara disable atau mematikan klik kanan pada website atau blog terkadang memang diperlukan untuk beberapa kondisi, salah satunya adalah untuk mencegah orang melakukan pencurian artikel dengan copy paste artikel atau gambar yang ada di blog Anda.
Walaupun berbagai cara tetap bisa dilakukan untuk mencuri copy paste tulisan Anda, namun cara ini bisa mengurangi hal tersebut, karena tidak semua orang paham cara-cara lain selain klik kanan dan copy paste.
Untuk mendisable atau mematikan fungsi klik kanan pada website atau blog Anda, maka diperlukan beberapa baris kode javascript, pada kesempatan ini kami mencontohkan dengan menggunakanjquery.

Disable klik kanan pada web (Image: smallbusiness.chron.com)

Pertama sertakan jquery pada website Anda, bisa ditaruh di atas [head] atau dibagian bawah sebelum [/body].

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>

Selanjutnya tambahkan script berikut ini pada baris berikutnya.

$(document).bind("contextmenu",function(e) {
    e.preventDefault();
});

Demo

Disable bagian tertentu saja.

Cara diatas akan mematikan klik kanan pada setiap elemen (seluruh bagian di halaman web), namun terkadang kita hanya butuh untuk mematikan elemen pada bagian tertentu saja, misal konten saja, sedangkan sidebar atau footer tidak perlu di disable. Maka yang perlu Anda cari tahu adalah, apa nama elemen yang berisikan konten tersebut. Setelah diketahui, misalnya nama class pada elemenya adalah content-area, seperti berikut

<div class=”content-area“>Berisi judul hingga konten artikel</div>
Jika kondisinya seperti itu maka script jquery nya perlu di ubah menjadi seperti ini.

$(".content-area").bind("contextmenu",function(e) {
    e.preventDefault();
});

Demo

Disable klik kanan pada gambar saja

Anda juga bisa mematikan fungsi klik kanan pada gambar saja yang ada di halaman web, sedangkan teks dan yang lainnya tidak.

Caranya bisa dibaca di artikel sebelumnya berjudul Cara Disable Klik Kanan Pada Gambar di Halaman Web.

Dengan itu maka website Anda sekarang tidak bisa di klik kanan lagi.
Selamat mencoba

Keren! Cara Google Merekrut Programmer Baru di Halaman Rahasia

Keren! Cara Google Merekrut Programmer Baru di Halaman Rahasia

BrainLuqman   8:31 AM   Comment  

Cara Google merekrut programmer ini sangat luar biasa — Tidak mudah untuk mendapatkan seorang programmer yang bagus untuk dijadikan karyawan di perusahaan, termasuk di perusahaan teknologi kelas dunia seperti Google. Hal tersebut tentu saja menjadi tantangan tersendiri untuk para staf perekrutan karyawan Google.
Namun ada sebuah cerita menarik dari pengalaman seorang programmer yang bernama Max Rosett saat dia menceritakan pengalamannya ketika direkrut oleh Google. Dimana pada saat itu Google memanfaatkan teknologi dari mesin pencarinya untuk mencari seorang programmer yang potensial dan yang bisa bekerja untuk mereka.
Di blognya The Hustle, Max Rosett menjelaskan bagaimana Google secara diam-diam memiliki aplikasi khusus dan rahasia yang ditanamkan pada mesin pencarinya. Aplikasi tersebutlah yang ternyata bertindak sebagai staf perekrutan programmernya, lalu seperti apa kisahnya?
“Suatu pagi, pada saat sedang mengerjakan sebuah proyek, saya melakuakan pencarian di Google dengan menggunakan keyword ‘python lambda function list comprehension’. Kemudian tautan yang ditandai dengan warna biru seperti biasanya pun muncul. Namun setelah itu terjadi hal yang tidak biasa,” menurut Max, seperti dilansir laman News Softpedia pada Jumat (28/8).
Seperti dalam cerita di film Harry Potter saja, link tersebut seperti mengantarkannya masuk kesebuah pintu rahasia dan kemudian menuju dunia fantasi.
Halaman hasil pencarian Google pun kemudian terbelah menjadi dua (mungkin animasinya). Setelah itu timbul sebuah pesan yang bernada menantang, “You’re speaking our language. Up for a challenge?”, kira-kira seperti itu bunyi pesan mengejurkan tersebut.
– Baca juga: 10 Skill Yang Dibutuhkan Jika Ingin Kerja Di Google
Yang kemudian diikuti dengan 3 pilihan jawaban dibawahnya, pilihan pertama ‘I want to play’, pilihan kedua ‘No thanks’, lalu ketiga ‘Don’t show me this again. Karena merasa penasaran, Max akhirnya memilih jawabab pertama.

Image via thehustle.co

Saat dia memilih jawaban pertama, lalu kemudian muncul halaman yang bernama Foo.bar, halaman tersebut memiliki tampilan seperti UNIX, dia mengetik perintah untuk melihat daftar file yang tersedia. Terdapat satu file yang disebut “start_here.txt”, dia membukanya dan terlihat kalimat.
“Type request to request a challenge. Type help for a list of commands.”
Kemudian Max mengetik “request” dan tantangan pun dimulai, Max Rosett kemudian diarahkan ke halaman khusus dan di halaman tersebut dijelaskan dalam waktu dua pekan kedepan, dia diminta untuk menyelesaikan enam masalah pemrograman.

Image via thehustle.co

Setiap tantangan diberi waktu dua hari untuk menyelesaikannya, kemudian jawaban di unggah kehalaman rahasia tersebut. Max pun dengan serius dan tekun mengerjakan tugas-tugas tersebut.
Max menyelesaikan tugas pertama dalam waktu beberapa jam saja, kemudian disusul dengan lima pertanyaan lain dalam waktu dua minggu.
– Baca juga: Bikin CV Keren Berbentuk Web Wanita Ini Dapat Perhatian CEO Perusahaan Airbnb
Pada saat semua tugas sudah dia selesaikan, Max diminta untuk memberikan kontak personal serta diberi tahu bahwa perwakilan dari staf HRD Google ingin bertemu dengannya. Max pun memberikan nomor teleponnya dan emailnya.
Singkat cerita, Max Rosett yang pada awalnya hanya iseng mencari tentang Python di Google menerima tantangan yang muncul tiba-tiba, dan akhirnya direkrut setelah menyelesaikan sejumlah permasalah seputar pemrograman dan sekarang sudah menjadi salah satu engineer baru di Google.
Menarik sekali ya cara Google merekrut karyawan, jadi setelah membaca ini, ketika Anda tiba-tiba menemukan halaman yang cukup “mencurigakan” saat melakukan pencarian di Google. Jangan takut, jangan di tutup, hadapi dan siapa tau Anda bisa menjadi salah satu karyawan di Google, yang sangat diidamkan banyak orang tersebut.

Cara Mengetahui Apakah Website Anda Perlu Perubahan

Cara Mengetahui Apakah Website Anda Perlu Perubahan

BrainLuqman   8:28 AM   Comment  

Beberapa Cara Untuk Mengetahui Apakah Website Anda Perlu Perubahan — Redesign memang kadang diperlukan pada sebuah website, bukan hanya website, bahkan kemasan produk pun kadang di redesign agar tampilan nya tidak membosankan.
Sebuah website adalah wajah dari organisasi/perusahaan anda di dunia maya. Disaat karyawan perusahaan anda hanya dapat hadir untuk waktu yang terbatas pada jam kerja saja yang biasa nya 8 jam sehari, website hadir 24×7 untuk berkomunikasi dengan klien. Oleh karena itu website harus selalu mencerminkan aspek terbaik dari organisasi anda. Website harus up to date. Sebuah perubahan pada website bisa menjadi ancaman serius untuk pendapatan perusaahaan anda. Tapi bagaimana untuk benar-benar mengetahui bahwa website Anda membutuhkan perubahan?



Pada tulisan ini kami akan menyebutkan beberapa hal penting yang harus anda perhatikan sebelum melakukan perubahan pada website.
Apakah desain website anda sudah responsive? Hal ini sangat penting untuk diketahui bahwa pengunjung website anda saat ini bisa datang dari mana saja, menggunakan perangkat yang bermacam-macam, baik itu ponsel, komputer tablet atau dektop. Jadi responsif adalah hal pertama yang harus anda perhatikan.
Apakah maksud website anda cukup jelas, atau justru pengunjung perlu meluangkan waktu untuk berfikir lebih lama agar mengetahui tujuan dari situs anda? Sebuah website yang jelas maksudnya tentu akan lebih baik.

Apakah tombol share ke sosial media terlihat dengan jelas disetiap halaman website anda? Sosial media semakin hari semakin ramai penggunanya, jadi pastikan ada tombol share ke sosial media di website anda.
Apakah website anda mencerminkan profesionalisme, mencerminkan apa yang dilakukan organisasi anda? Sebuah wesbite murahan dan membosankan akan mengirimkan pesan negatif kepada kostumer anda.
Baca Juga : Kapan dan Mengapa Sebuah Website Harus di Redesign
Apakah logo, banner dan gambar/foto berada pada website yang menarik dan berkualitas tinggi? Sebuah gambar bernilai seribu kata jadi harus memiliki sifat menarik perhatian pengunjung dalam sekali pandang.
Konten adalah raja dan selamannya akan seperti itu. Silahkan lihat pada konten dan jika diperlukan adanya perubahan maka lakukan segera, selalu upayakan konten yang berkualitas, berguna, dan tidak basi.

Image by latenightim

Call to action memainkan peranan sangat penting dalam meningkatkan pendapatan dan penjualan pada bisnis anda. Pastikan bahwa ada setidaknya satu tombol call to action pada setiap halaman situs anda.
Terakhir, namun sedikit detail yaitu tanyakan kepada pengunjung website anda melalui halaman kontak juga sangat penting untuk mengetahui apa kesulitan mereka ketika berada di website anda. Dari masukan itu anda bisa simpulkan apakah harus melakukan perubahan atau tidak.
Setelah membaca poin-poin diatas, jika anda merasa perubahan perlu untuk dilakukan di website anda, anda bisa melakukan perubahan sendiri atau menyewa orang yang lebih profesional dibidang tersebut untuk melakukan perubahan dan merenovasi website anda agar jadi lebih baik.

7 Fakta Tentang Pentingnya Kecepatan Website Untuk Bisnis Online

7 Fakta Tentang Pentingnya Kecepatan Website Untuk Bisnis Online

BrainLuqman   8:26 AM   Comment  

Fakta tentang pentingnya kecepatan website dalam bisnis online — Untuk sebuah website, waktu muat (loading) tentu merupakan bagian yang sangat penting, pengunjung akan langsung meninggalkan website apabila dia terlalu lama menunggu sebuah website terbuka.
Sering kali pemilik website menaruh elemen apapun di halaman website mereka, dan tidak memikirkan soal bertambahnya waktu loading website mereka.

speed website (Image: staffingdaily.com)

Selain itu kecepatan website juga menjadi faktor yang sangat penting jika kita berbicara soal ranking website di mesin pencari, seperti Google atau Bing.
Berikut ini adalah beberapa fakta seputar kecepatan website yang mungkin bisa jadi pertimbangan untuk pemilik website.
73$ dari pengguna internet dari ponsel mengatakan bahwa mereka mendapati bahwa website-website sekarang masih lambat untuk diakses.
51% dari pengguna internet dari ponsel mengatakan bahwa mereka mendapati website yang down, crashed, atau mengalami error.
38% dari pengguna internet dari ponsel mengatakan bahwa mereka mendapati website yang tidak tersedia, walaupun ada link menujut kesana.
47% dari pengguna internet dari ponsel mengharapkan bahwa halaman web bisa dibuka dalam waktu 2 detik atau kurang.
40% orang meninggalkan sebuah website jika website tersebut tidak terbuka dalam waktu 3 detik ketika diakses.
Setiap 1 detik keterlambatan dalam membuka halaman bisa menghasilkan pengurangan konversi hingga 7% (ini tentu kerugian, apalagi untuk website jual beli online).

Kerugian jika web lambat (Image: indentity.biz)

Jika sebuah website e-commerce berpenghasilan $100.000 per hari, maka 1 detik saja website terlambat untuk dibuka, maka berpotensi kehilangan $2,5 juta pendapatan dalam setahunnya. Waduh ternyata besar juga ya kalau di akumulasikan.
Itulah beberapa fakta menarik yang perlu diketahui seputar kecepatan website, seperti yang Jurnalweb.com kutip dari blog kissmetrics.

Memasang Tombol Back to Top Dengan Javascript

Blogger

Memasang Tombol Back to Top Dengan Javascript

BrainLuqman   5:51 AM   Comment  

Ada pertanyaan dari sebuah forum javascript dan Blogger dan kebetulan saya juga aktif di Grup tersebut, ada pertanyaan dari salah satu anggota grup yang menanyakan bisa tidak jika Memasang Tombol Back to Top Dengan Javascript, sebagaian besar berkomentar belum pernah coba dan termasuk saya juga karena selama ini templated blog yang saya pakai Tombol Back to Top masih menggunakan Jquery, akhirnya merasa penasaran saya coba googling dan ketemu ini Tutorial dari Blognya Kang Adhy Suryadi yang kebetulan pernah memposting cara Memasang Tombol Back to Top Dengan Javascript.

Disitu tertulis dan disajikan 2 cara pemasangan Tombol Back to Top Dengan Javascript yang pertama tidak menggunakan Javascript show hide on scroll dan cara yang yang ke dua menggunakan Javascript show hide on scroll dan tambahan animasi bounceln yang gunanya untuk lebih memperhalus tampilan pada tombol back to Top

Cara Pertama 

Pemasangan Back To Top Tidak show hide on scroll

Silahkan sobat salin kode CSS dibawah ini lalu letakkan tepat diatas kode </head> fungsi tombol ini hanya bisa tampil di postingan sedangkan di perangkat mobile tidak terlihat

<b:if cond='data:blog.isMobileRequest == &quot;false&quot; and data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.backtotop{position:fixed;bottom:20px;right:20px;cursor:pointer}
.element-animation{animation:animationFrames ease 1s;animation-iteration-count:1;transform-origin:50% 50%;animation-fill-mode:forwards;-webkit-animation:animationFrames ease 1s;-webkit-animation-iteration-count:1;-webkit-transform-origin:50% 50%;-webkit-animation-fill-mode:forwards;-moz-animation:animationFrames ease 1s;-moz-animation-iteration-count:1;-moz-transform-origin:50% 50%;-moz-animation-fill-mode:forwards;-o-animation:animationFrames ease 1s;-o-animation-iteration-count:1;-o-transform-origin:50% 50%;-o-animation-fill-mode:forwards;-ms-animation:animationFrames ease 1s;-ms-animation-iteration-count:1;-ms-transform-origin:50% 50%;-ms-animation-fill-mode:forwards}
@keyframes animationFrames{0%{opacity:0;transform:translate(-1500px,0)}
60%{opacity:1;transform:translate(30px,0)}
80%{transform:translate(-10px,0)}
100%{opacity:1;transform:translate(0,0)}
}
@-moz-keyframes animationFrames{0%{opacity:0;-moz-transform:translate(-1500px,0)}
60%{opacity:1;-moz-transform:translate(30px,0)}
80%{-moz-transform:translate(-10px,0)}
100%{opacity:1;-moz-transform:translate(0,0)}
}
@-webkit-keyframes animationFrames{0%{opacity:0;-webkit-transform:translate(-1500px,0)}
60%{opacity:1;-webkit-transform:translate(30px,0)}
80%{-webkit-transform:translate(-10px,0)}
100%{opacity:1;-webkit-transform:translate(0,0)}
}
@-o-keyframes animationFrames{0%{opacity:0;-o-transform:translate(-1500px,0)}
60%{opacity:1;-o-transform:translate(30px,0)}
80%{-o-transform:translate(-10px,0)}
100%{opacity:1;-o-transform:translate(0,0)}
}
@-ms-keyframes animationFrames{100%,60%{opacity:1}
0%{opacity:0;-ms-transform:translate(-1500px,0)}
60%{-ms-transform:translate(30px,0)}
80%{-ms-transform:translate(-10px,0)}
100%{-ms-transform:translate(0,0)}
}
</style>
</b:if>

Selanjutnya, silahkan sobat salin kembali kode kode Javascript dibawah ini dan letakkan di atas </body>

<b:if cond='data:blog.isMobileRequest == &quot;false&quot; and data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
function resetScroller(e){var o=window.pageYOffset,n=document.getElementById(e).offsetTop,r=setTimeout("resetScroller('"+e+"')",speed);o>n?(scrollY=o-distance,window.scroll(0,scrollY)):clearTimeout(r)}var scrollY=0,distance=40,speed=24;
//]]>
</script>
<span class="backtotop element-animation" onclick="return false;" onmousedown="resetScroller('header-wrapper');"><i class="fa fa-chevron-circle-up fa-3x"></i></span>
</b:if>

Perhatikan kode yang ditandai header-wrapper silahkan ganti kode tersebut kalau ada tag id yang lebih tinggi atau lebih atas dari tag tersebut.

Cara Ke Dua

Pemasangan Back To Top Menggunakan show hide on scroll sama seperti halnya cara pertama, fungsi tombol ini hanya bisa tampil di postingan sedangkan di perangkat mobile tidak terlihat.

Silahkan sobat salin kode CSS dibawah ini lalu letakkan tepat di atas </head>

<b:if cond='data:blog.isMobileRequest == &quot;false&quot; and data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#backtotop{position:fixed;bottom:20px;right:20px;cursor:pointer}
.ani-dur{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;animation-duration:1s}
@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.9)}
100%{-webkit-transform:scale(1)}}
@-moz-keyframes bounceIn{0%{opacity:0;-moz-transform:scale(.9)}
100%{-moz-transform:scale(1)}}
@-ms-keyframes bounceIn{0%{opacity:0;-ms-transform:scale(.9)}
100%{-ms-transform:scale(1)}}
@keyframes bounceIn{0%{opacity:0;transform:scale(.9)}
100%{transform:scale(1)}}
.ani-name{-webkit-animation-name:bounceIn;-moz-animation-name:bounceIn;-ms-animation-name:bounceIn;animation-name:bounceIn}
</style>
</b:if>

Selanjutnya silahkan salin kembali kode Javascript dibawah ini lalu letakkan tepat di atas kode </body>

<b:if cond='data:blog.isMobileRequest == &quot;false&quot; and data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
function resetScroller(e){var o=window.pageYOffset,n=document.getElementById(e).offsetTop,r=setTimeout("resetScroller('"+e+"')",speed);o>n?(scrollY=o-distance,window.scroll(0,scrollY)):clearTimeout(r)}var appended=!1,bookmark2=document.createElement("div");bookmark2.id="backtotop",bookmark2.innerHTML='<span class="ani-dur ani-name" onclick="return false;" onmousedown="resetScroller(&quot;header-wrapper&quot;);"><i class="fa fa-chevron-circle-up fa-3x"></i></span>',onscroll=function(){var e=document.documentElement.scrollTop||document.body.scrollTop;e>600?appended||(document.body.appendChild(bookmark2),appended=!0):appended&&(document.body.removeChild(bookmark2),appended=!1)};var scrollY=0,distance=40,speed=24;
//]]>
</script>
</b:if>

Perhatikan kode yang ditandai Angka 600 adalah jarak tinggi Scroll yang nantinya untuk munculnya tombol Back To Top dan header-wrapper silahkan ganti kode tersebut kalau ada tag id yang lebih tinggi atau lebih atas dari tag tersebut.

DEMO HASIL 

Cara Show Hide On Scroll

DEMO

Cara Tanpa Show Hide On Scroll

DEMO

Perlu menjadi perhatian Cara Memasang Tombol Back to Top Dengan Javascript ini menggunakan FontAwesome jadi pastikan sobat sudah memasangnya di templated blog-nya, dan selesai Selamat Mencoba.