Kenali ada berapa jenis-jenis pajak di Indonesia? Berikut jenisnya

Baca Juga

Adanya tombol atau button, digunakan untuk menavigasikan atau menjalankan perintah yang di berikan. Tombol back to top biasanya ada pada template yang responsive, tombol back to top ini di gunakan apabila kita sudah mencapai halaman bawah dari sebuah artikel yang ada agar kita bisa kembali ke tulisan artikel atau halaman yang atas. Akan tetapi banyak template blog yang tidak memiliki tombol atau button back to top ini, untuk itu kali ini saya akan memberikan artikel tentang cara membuat tombol back to top di blog dengan font awesome.

Kenapa menggunakan font awesome ?

Karena kita tidak memerlukan gambar untuk menampilkan bentuk logo atau icon dari back to top ini. Jadi kita hanya perlu memanggil, atau membuat perintah saja agar icon logonya tampil. Kemudian kelebihannya juga font awesome memiliki banyak pilihan icon yang ada, icon ini bisa di ubah sesuai selera sobat.

Pergerakan dari tombol back to top ini cukup lembut jadi kita tidak langsung kembali ke atas halaman dan tidak membuat kaget. Untuk cara pemasangannya ikuti langkah-langkah dari saya berikut ini.

Cara Memasang Tombol Back To Top di Blog dengan Font Awesome

Langkah pertama masuk ke akun Blogger anda. .Pilih menu Tema, pilih Edit HTML.

Sebelumnya kita harus memasang kode jQuery terlebih dahulu, masukan kode di bawah ini tepat di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>

Karena kita menggunakan font awesome, pertama kita masukan dulu kode plugin font awesome nya. Cari kode </head> kemudian masukan kode di bawah ini, tepat di atasnya

.<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css' rel='stylesheet'/>

Kemudian cari kode ]]></b:skin> atau </style>, kemudian masukan kode CSS di bawah ini tepat di atasnya.

/* Back To Top */ #back-to-top{background:#E73037;color:#ffffff;padding:8px 10px;font-size:24px} .back-to-top{position:fixed!important;position:absolute;bottom:20px;right:20px;z-index:999}Cari kode </body> kemudian masukan kode HTML dan JavaScript di bawah ini tepat di atasnya.<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'><i class='fa fa-hand-o-up'/></a></div> <script> $(window).scroll(function() {if($(this).scrollTop() &gt; 200) {$(&#39;#back-to-top&#39;).fadeIn();} else { $(&#39;#back-to-top&#39;).fadeOut();}}); $(&#39;#back-to-top&#39;).hide().click(function() {$(&#39;html, body&#39;).animate({scrollTop:0}, 1000);return false;}); </script>

Demikian tutorial dari saya mengenai cara membuat tombol back to top di blog dengan font awesome.

Terima kasih sudah berkunjung di blog Tutorial Umum. Untuk tutorial yang lainnya dari saya, silahkan tetap kunjungi Blog Tutorial Umum.