Info Penting

Tugas Blogging 2 Kelas IX Tahun 2019

S alah satu materi BTIK kelas IX mulai semester 1 tahun 2019 ini sengaja saya kenalkan tentang dunia blog, diawal perkenalan ini bukan dal...

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