Info Penting

Tutorial Blogger Terlengkap Sistematis dilengkapi Video Tutorial

T utorial blogger di internet sangat banyak pilihannya, anda bisa memilih tutorial mana yang akan anda ikuti dan praktikkan supaya anda bi...

Artikel Terbaru

Cara Membuat Tombol Back To Top dengan Gambar Keren dan Elegan

18 Nov 2018 - -

Tutorial Blogger kali ini adalah bagaimana Cara Membuat Tombol Back To Top dengan Gambar Keren dan Elegan. Mungkin sebagian dari anda bertanya, apa fungsi tombol back to top? sedikit akan saya jelaskan, tombol back to top ini berfungsi untuk kembali ke atas setelah pengunjung blog melakukan scroll kebawah saat membaca artikel yang panjang pada blog kita.

Scroll ke bawah dan ke atas sebenarnya bisa saja menggunakan mouse, atau tombol panah kebawah dan keatas pada keyboard, dan saat membaca artikel biasanya pengunjung akan menggunakannya, namun saat pengunjung sebuah blog menginginkan kembali ke bagian atas dengan tujuan ingin melihat-lihat fitur, koleksi artikel blog kita, atau hanya sekedar ingin mengulang membaca tulisan, akan sangat terbantukan jika di blog kita tersedia tombol back to top, dengan sekali klik langsung kembali/ loncat ke atas.

Berikut tutorial lengkap Cara Membuat Tombol Back To Top:

  1. Login blogger.com
  2. Klik menu template - Edit HTML - klik sekali dalam template dan tekan CTRL+F untuk memunculkan kotak pencarian dalam template dan silahkan anda ketik kode </head>
  3. Copy kode berikut tepat di atas kode </head>:
    <script src='//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'/>

    Catatan: kode di atas anda pasang jika di template blog anda belum ada kode tersebut.
    <script type='text/javascript'> $(function() { $(window).scroll(function() {if($(this).scrollTop()&gt;500) { $(&#39;#ScrollToTop&#39;).fadeIn()} else { $(&#39;#ScrollToTop&#39;).fadeOut();}});$(&#39;#ScrollToTop&#39;).click(function(){$(&#39;html,body&#39;).animate({scrollTop:0},700); return false})}); </script>
  4. Berikutnya copy kode CSS berikut di atas kode ]]></b:skin> atau </style>
    #ScrollToTop{text-align:center;z-index:9999;position:fixed;bottom:30px; right:30px;cursor:pointer;display:none;opacity:0.6;} #ScrollToTop:hover{opacity:1;}
  5. Selanjutnya copy kode berikut di atas kode  </body>
    <div id='ScrollToTop'><img alt='Back to top' src='https://2.bp.blogspot.com/-aYmffYq2U90/W-_uCjYUgQI/AAAAAAAAV-Y/1OqE3hW-xA0Lg5Zg8GwFmVDf9KlN1TrdgCLcBGAs/s1600/backtotop.png'/></div>

    Catatan: kode gambar yang saya beri warna merah bisa anda ganti dengan kode gambar anda yang lain sesuai dengan desain tombol yang anda inginkan.
  6. Simpan Perubahan template

Setelah anda simpan, anda bisa melihat hasilnya, tampilan tombol back to top di pojok kanan bawah seperti pada gambar berikut:


Demikian Cara Membuat Tombol Back To Top dengan Gambar Keren dan Elegan, semoga bermanfaat.

Tidak ada komentar:

Follow Me


Iklan

Tutorial Blogger

Arsip Blog