Cara Membuat Ikon Tanda Panah ke Atas pada Blog

loading...

Selamat datang di The Royal Moringa. Sekarang kita akan mencoba untuk membuat ikon tanda panah ke atas pada tampilan blog anda. Ikon ini biasa disebut back to top/scroll to top. Apa fungsinya? Jika anda mengklik ikon ini, maka anda akan dibawa menuju bagian teratas blog. Oleh karena itu, ikon panah ke atas ini biasanya terletak pada bagian paling bawah sebuah halaman blog. Terus, apa kelebihan back to top? Ya..sebenarnya ini hanya mempermudah seseorang untuk mencapai bagian teratas blog. Jadi, kita tidak perlu menggunakan scroll lagi. Perlu diketahui walaupun ikon ini hanya memiliki fungsi sederhana, tetapi hampir setiap template yang digunakan blog atau website memilikinya. Nah, bagi anda yang belum memilikinya, kita akan coba membuatnya sekarang. Berikut langkah-langkahnya.

1. Log in ke akun blog anda > Pada dashboard pilih Theme >  Edit HTML > cari kode ]]></b:skin> kemudian copy dan paste kode CSS berikut diatasnya 

                                         #back-to-top{ background-color:#009966; color:#fff; padding:7px 10px 8px; font-size:14px; line-height:1; text-align:center; transition:all .0s ease; -webkit-transition:all .0s ease; -moz-transition:all .0s ease; -o-transition:all .0s ease } #back-to-top:hover{ background-color:#339966; color:#333; } .back-to-top{ position:fixed!important; position:absolute; bottom:70px; right:50px; z-index:999 } @media only screen and (max-width: 1113px) { .back-to-top{display:none} } .fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; }

2. Setelah itu cari </head> kemudian copy dan paste kode script berikut diatasnya

                                         <script type="text/javascript">//<![CDATA[ $(window).scroll(function() { if($(this).scrollTop() > 200) { $('#back-to-top').fadeIn(); } else { $('#back-to-top').fadeOut(); } }); $('#back-to-top').hide().click(function() { $('html, body').animate({scrollTop:0}, 1000); return false; }); //]]> </script> 

3. Cari </body> lalu copy dan paste HTML berikut diatasnya.

                                         <div class='back-to-top'> <a href='#' id='back-to-top' title='back to top'> <i class='fa fa-angle-up' aria-hidden='true'/> </a> </div>

4. Save Template dan lihat hasilnya

 Anda dapat mengganti warna background pada ikon sesuai dengan selera. Perlu diingatkan bahwa jangan sampai anda melewatkan langkah nomor 2 karena kode JavaScript diatas akan memengaruhi transisi dari back to top. Tanpa kode tersebut, bila anda mengklik back to top maka anda akan langsung berada diatas halaman blog (tanpa proses) sedangkan jika ada kode tersebut maka anda akan dibawa ke atas halaman secara perlahan-lahan. Nah, itu bedanya jika dan tanpa menggunakan kode JavaScript. Terima kasih telah membaca & Selamat mencoba!

loading...