Skip to content Skip to sidebar Skip to footer
Home / Blogger

Cara Menciptakan Dan Mengganti Icon / Tombol Back To Top Dengan Banyak Pilihan

By MasukAngin.ID Post a Comment

Hai Sobat selamat tiba kembai di blog   kali ini aku akan membahas cara menciptakan tombol back to top yang responsif dan keren untuk blogger, gampang dan tentunya banyak pilihan yang sudah aku rangkum sesuai dengan favorit Anda.

Fungsi dari tombol back to top yaitu tombol bila anda scroll website ke bawah akan muncul tombol kecil biasanya berada di pojok kanan bawah bila di klik akan Akan kembali ke atas website, tombol ini akan membantu pembaca mempermudah kanal ke hidangan navigasi atau mengulangi bacaan yang awal.

Baik eksklusif saja bila anda ingin memasang tombol back to top ikuti langkah langkah di bawah ini

 Cara Membuat Tombol Back To Top

 1. Login Blogger.com
2. Pilih hidangan Tema dan edit HTML
3. Ketik ctrl+F cari instruksi </head> 
4. Paste instruksi HTML di bawah in sempurna di atas </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

Nb: instruksi diatas tidak perlu dicopy bila Jquery sudah ada  
 5.  Kemudian paste script dibawah ini sehabis instruksi jqurey di atas atau sempurna diatas </head>
<style> .mbw-back-to-top {     position: fixed;     bottom: 2em;     right: 10px;     text-decoration: none;     padding: 1em;     display: none;     cursor:pointer; } </style> <img class="mbw-back-to-top" src="URL Gambar disini" /> <script type="text/javascript"> /*****mybloggersworld.com***/ jQuery(document).ready(function() {     var offset = 220;     var duration = 500;     jQuery(window).scroll(function() {         if (jQuery(this).scrollTop() > offset) {             jQuery('.mbw-back-to-top').fadeIn(duration);         } else { //www.mybloggersworld.com             jQuery('.mbw-back-to-top').fadeOut(duration);         }     });      jQuery('.mbw-back-to-top').click(function(event) {         event.preventDefault();         jQuery('html, body').animate({scrollTop: 0}, duration);         return false;     }) }); </script>
jangan disimpan dulu ganti tulisan  URL Gambar disini  dengan pilihan icon yang sudah aku sediakan di bawah ini dan Save. 

Cara Mengganti Icon Back To Top

Cara mengganti icon keren sesuai yang Anda inginkan pilih salah satu link icon dibawah ini copy kemudian paste di tulisan URL Gambar Disini kemudian save dan selesai.
NB : di bawah hanya pola sebagian untuk melihat lebih lengkap klik TAUTAN INI ada 20 lebih  jenis icon.

  •  ➥ https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW3hjNLUurO48myogJhlOGOPj4yBsB4cxFgwVMCxb65azbr4vKYBsYWL1BSOaFxcigqXr8MUJZsdT9HKmEjw-3MdMyugcCQAE6vC9dxHN7FDN0pXEIFrWqso4yR-eIM6RQamJ-igRWpR4/s1600/back.png.
  •  ➥ https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVkS0WmOzxCOpMCctwPm-11BRbnGELwDDFaWkgC9WQpkqzYo61agLN6cRZAPI5UrBEfRR4WSeU1UlrqdzyaXHaqfsKqwpNslyR_O9L7AKOSD3Pdra17YFcfFQFN4MYrT7l-7I7ZIj2Cag/s1600/back.png
  •   ➥  lihat ICON LEBIH LENGKAP (fast load)   

Cara Membuat Icon Menggunakan Photoshop

Banyak blog yang hanya menampilkan cara menciptakan dan memasang CSS nya saja kali ini aku akan membahas “cara pembuatan Icon back to top” memakai Photoshop. Oke eksklusif saja kita ulas caranya :

  1. Siapkan Aplikasi Photoshop di PC.
  2. Pilih hidangan file kemudian pilih new (atau pakai shortcut ctrl+N), kemudian ketik width dan height masing-masing 40 pixel dan jangan lupa background harus Transparent semoga icon lebih menarik. 
    perhatikan tanda merah
    1. Pilih gambar yang diinginkan copy kemudian paste di halaman PS lihat detail gambar alasannya yaitu gambar terlalu besar jadi icon    tidak terlihat, jangan khawatir eksklusif saja tekan ctrl+T kemudian akan muncul free transform yang berfungsi untuk mengatur besar kecil gambar.
      ikuti langkah diatas dengan benar
    2. Nah kini waktunya mengedit bagaimana warna di background menjadi transparan, cukup Anda gunakan Magic eraser Tool    temukan di gambar eraser dengan klik kiri dan tahan  mouse. 
      pilih magic eraser tool
    3. Kemudian klik di bab background maka dengan otomatis background akan menjadi transparan 
    4. Dan yang terahir save as pilih PNG pilihan interlace = none
    5. Selesai.
    Demikian cara mengganti icon dan menciptakan icon back to tp di blog, semoga bermanfaat.


    Sumber http://www.masadhy.com/

    Post a Comment for "Cara Menciptakan Dan Mengganti Icon / Tombol Back To Top Dengan Banyak Pilihan"