Cara Membuat Tombol Kembali ke Atas atau Back to Top

0
72
Cara Membuat Tombol Kembali ke Atas atau Back to Top

Tombol kembali keatas atau tombol Back to top adalah tombol untuk memudahkan para pengunjung untuk kembali ke menu utama atau ke atas. anda pasti sering melihat jika anda mengunjungi blog lain terdapat tombol back to top nya di sebelah pojok bawah. jika anda membaca sebuah blog yang memiliki artikel yang panjang kemudian anda malas untuk mengulirkan mouse ke atas, anda tinggal klik pada tombol back to top tersebut dan anda akan langsung di bawa ke menu utama atau atas.

Cara Membuat Tombol Kembali ke Atas atau Back to Top

Untuk membuat tombol ini di butuhkan beberapa kode yang harus anda copy kan ke blog anda. silahkan anda ikuti langkah-langkah cara pembuatanya di bawah ini.

Cara Membuat Tombol Kembali ke Atas atau Back to Top

1. Login menggunakan akun bloger anda

2. Pada dashboard blog anda, pilih menu Tema

3. Selanjutnya anda klik pada menu Edit HTML

4. Tekan Ctrl+f untuk membuat menu pencarian. cari kode </style> atau ]]></b:skin> kemudian anda copy kode di bawah ini lalu Paste kan di atas salah satu kode ini ]]></b:skin> atau </style>

/* CSS back to top */
.to-top{background-color:#3b7dc1;visibility:hidden;color:#fff;width:38px;height:38px;line-height:34px;position:fixed;bottom:50px;right:30px;text-align:center;z-index:999;cursor:pointer;opacity:0;-webkit-transform:translateZ(0);transition:all .6s}
.to-top .fa{font-size:24px;vertical-align:middle}
.to-top.show{visibility:visible;bottom:25px;opacity:1;}
.to-top:hover{background-color:#64707a;color:#fff;opacity:1;}

 

5. Selanjutnya anda cari kode </body> dan copy paste kode di bawah ini di atas kode </body>

<script type=’text/javascript’>
//<![CDATA[
(function(){$(document).ready(function(){return $(window).scroll(function(){return $(window).scrollTop()>600?$(“#to-top”).addClass(“show”):$(“#to-top”).removeClass(“show”)}),$(“#to-top”).click(function(){return $(“html,body”).animate({scrollTop:”0″})})})}).call(this);
//]]>
</script>

 

6. Simpan template kemudian lihat perubahan pada blog anda. jika cara ini tidak berfungsi kemungkinan template anda belum mempunyai kode jQuery Library. untuk mengatasinya silahkan copy dan pastekan kode jQuery Library di bawah ini di atas kode </head>

<script src=’https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js’ type=’text/javascript’/>

Jika anda ingin menampilkan Font Awesome pada tombol back to top ini. template anda harus memiliki cheatsheet. untuk membuatnya anda hanya tinggal meng copy dan pastekan kode di bawah ini di atas kode </head> kemudian klik Save untuk menyimpan perubahan

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css”>

Sampai disini tutorial membuat tombol kembali keatasnya. semoga artikel ini dapat membantu anda dalam menyelesaikan permasalahan blog anda. silahkan bagikan artikel ini ke teman-teman anda jika menurut anda artikel ini sangat bermanfaat.

LEAVE A REPLY

Please enter your comment!
Please enter your name here