Membuat Back to Top di Blog dengan kode HTML

-

MEMBUAT BACK TO TOP DI BLOG

  Back to top adalah sebuah bagian dari blog yang fungsinya mengembalikan tampilan ke bagian atas dari suatu postingan.
  Karena Back to Top ini, pembaca atau pengunjung, tidak  perlu repot-repot menggulir ke bagian atas secara manual.

Membuat Tombol Back to Top

⚠ Screenshot pada Halaman ini dihasilkan dengan menggunakan Handphone

  Langkah-langkah :

1. Login ke blogger disini
2. Masuk ke Opsi Tema
3. Kemudian Buka Edit HTML

4. Dan Tambahkan Kode HTML dengan aturan sebagai berikut
Pastekan kode Berikut diatas kode </head>

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

Pastekan kode berikut diatas kode  ]]></b:skin>

#back-to-top{background:#008000;color:#ffffff;padding:8px 10px;font-size:24px;border-radius:4px} .back-to-top{position:fixed!important;position:absolute;bottom:20px;right:20px;z-index:999}

Pastekan kode berikut diatas </body>

<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'> <i class='fa fa-chevron-up'/> </a></div> <script> $(window).scroll(function() { if($(this).scrollTop() > 200) { $('#back-to-top').fadeIn(); } else { $('#back-to-top').fadeOut(); } }); $('#back-to-top').hide().click(function() { $('html, body').animate({scrollTop:0}, 1000); return false; }); </script>

5. Setelah selesai kemudian pilih, simpan templat dan pasti berhasil

Komentar

Posting Komentar

Popular Posts

Membuat teks berjalan dengan Marquee

-
Gambar
Membuat Teks Berjalan dengan Marquee   Hai pembaca sekalian kali ini Tanpatiru , akan memberikan tutorial cara membuat teks bergerak dengan menggunakan marquee ( kode html untuk membuat teks bergerak) Marquee dasar <marquee>Teks Berjalan</marquee> Tanpatiru.blogspot.com   Pada Teks Berjalan  kalian bisa mengubahnya dengan kata apapun Membuat Background dibelakang Marquee <marquee bgcolor="00FFFF">Teks Berjalan</marquee> Tanpatiru.blogspot.com  Pada 00FFFF (Warna Background) kalian bisa mengubahnya dengan warna apapun   Untuk informasi tentang kode warna silahkan buka KODE WARNA HTML Kecepatan Gerak Marquee <marquee scrollamount="100">Teks Berjalan</marquee> Tanpatiru.blogspot.com   Kalian bisa mengubah 100(Tingkat kecepatan) dengan angka apapun di bawah 100 Tingkah Laku Marquee <marquee behavior="alternate">Teks Berjalan</marquee> Tanpatiru.blogspot.com   Pada aternate kalian bisa mengubahnya de...
Baca selengkapnya

Membuat Link Gambar dengan kode HTML

-
Gambar
Membuat Link Gambar dengan kode HTML   Hai pembaca sekalian kali ini Tanpatiru akan memberikan tutorial cara membuat Link gambar dengan suatu kode di bahasa pemrograman HTML.   Baca dari awal sampai akhir yah supaya tambah paham! Langkah - Langkah : 1. Sediakan url sebuah gambar yang nantinya akan ditampilkan sebagai link. 2. Sediakan sebuah url yang akan dituju jika gambar Link sudah di tekan. 3. Memasukan url ke dalam kode html   Kode html untuk membuat Link gambar adalah : <a href='Url Tujuan'><img src='Url Gambar' alt='Terserah anda'title='Judul Url' width='Lebar dalam angka' height='tinggi dalam angka' border ='no' /></a>   Dan berikut ini contoh kode Link html dan Tampilannya <a href='https://tanpatiru.blogspot.com/?m=1' title='Link Gambar'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh672_Zy8xBpWLxk7TEKVojUyZ5Q_p9SHwxh_tZvwyjt08W6pwfga38Na3y-_Q_qcGt9Tqzr...
Baca selengkapnya

Postingan Pertama (28 Juli 2004)

-
Gambar
  Hai semua yang membaca artikel ini, perkenalkan nama saya Fathul Mualif, saya lahir pada tahun 2004 di Kota purbalingga, saya adalah anak ketiga dari empat bersaudara.   Saya membuat blog ini untuk sekedar hobby dan mungkin untuk kedepannya juga sebagai media mendapatkan penghasilan. Saya memberi nama blog ini dengan nama tanpatiru agar bisa mengingatkan saya agar mengingatkan saya secara pribadi untuk tidak meng copy-paste karya orang lain dan sekaligus belajar membuat konten yang ingin orang lain meng copy-paste nya (kontennya bagus).   Saya berencana membuat blog ini diisi dengan konten - konten tentang cara melakukan sesuatu, mulai dari Internet sampai sebuah mata pelajaran, dan pastinya saya juga akan berusaha keras agar isinya semakin bermanfaat untuk dibaca.   Sebelumnya saya juga telah membuat banyak blog yang salah satunya adalah blogingest, blog tersebut telah saya buat satu bulan sebelum blog tanpatiru ini ku buat. Mengapa saya memilih untuk membuat blog...
Baca selengkapnya

JENIS JARINGAN KOMPUTER BERDASARKAN JANGKAUAN

-
Gambar
JENIS-JENIS JARINGAN BERDASARKAN AREA JANGKAUANNYA Jenis : - LAN ( Local Area Network ) - PAN ( Personal Area Network) - MAN ( Metropolitan Area Network ) - WAN ( Wide Area Network) 1. LOCAL AREA NETWORK ( LAN )   LAN adalah jaringan milik pribadi dengan jangkauan Gedung atau Kampus yang berukuran sampai beberapa kilometer.   LAN seringkali digunakan untuk menghubungkan komputer-komputer pribadi dan workstation dalam kantor suatu perusahaan atau pabrik-pabrik untuk memakai satu sumber daya bersama sama misalkan printer. Jangkauan : 10 sampai 1000 meter. 2. PERSONAL AREA NETWORK ( PAN )   PAN adalah jaringan komputer yang dibentuk oleh beberapa buah komputer atau antara komputer dan non-komputer. Jangkauan : 1 sampai 10 meter. 3. METROPOLITAN AREA NETWORK ( MAN )   MAN adalah jaringan lokal dengan ukuran yang lebih besar dan biasanya menggunakan teknologi yang sama dengan LAN.   MAN dapat mencakup kantor-kantor perusahaan yang letaknya berdekatan atau...
Baca selengkapnya

Mengaktifkan Mode Malam pada Google Play Store

-
Gambar
Mode Malam di Google Play Store   Hai pembaca sekalian, saat ini produk - produk Google telah diupgrade agar tampilannya lebih nyaman dilihat, salah satu dari sekian banyak produk tersebut adalah Toko aplikasi android atau Google play store.   Salah satu update dari versi terbaru google play store adalah mode malam, fungsi mode malam pada sebuah aplikasi yaitu, untuk menghemat daya baterai, melindungi mata di malam hari, dan mungkin juga menghemat ukuran sebuah aplikasi.   Lah dalam kesempatan kali ini Tanpatiru akan memberikan sebuah tutorial cara mengaktifkan mode malam tersebut namun sebelum masuk ke langkah - langkah, kalian harus terlebih dahulu mengudate Google play storenya.   Langkah - Langkah : 1. Buka aplikasi Google playstore yang telah diupdate, mengapa harus diupdate?, selain Pengupdate-an itu memperbaiki masalah atau penyempurnaan versi-versi sebelumnya, Pengupdate-an ini wajib dilakukan mengingat bahwa mode malam pada produk-produk google i...
Baca selengkapnya

Fungsi Kabel USB OTG

-
Gambar
Kegunaan Kabel USB OTG Apa itu OTG ?   USB OTG atau USB On The Go adalah sebuah kabel USB yang memungkinkan smartphone yang suport dengannya dapat dihubungkan dengan beberapa perangkat-perangkat external yang biasanya dihubungkan dengan komputer. ⚠ Smartphone kamu harus suport OTG, kalian bisa tahu dengan melihat spesifikasi lengkap di internet atau memasang aplikasi khusus di playstore Apa saja perangkat yang dapat dihubungkan? 1. Mouse   Kalian bisa menggerakan kursor yang akan muncul jika mouse terhubung, Tanda-tanda mouse terhubung dengan perangkat anda adalah muncul kursor, Lampu LED menyala, atau muncul notifikasi bahwa tetikus terhubung.   Jika mouse terhubung maka tombol klik kanan akan berfungsi sebagai tombol back, klik kiri untuk enter atau yes, scroll untuk menscroll, dan tombol scroll yang di tekan akan berfungsi sebagai tombol home, jika ditekan lama akan mengaktifkan google asisten. 2. Keyboard   Kalian bisa menginputkan kara...
Baca selengkapnya

PERKEMBANGBIAKAN TUMBUHAN

-
Gambar
CARA PERKEMBANGBIAKAN TUMBUHAN 1. Generatif   Generatif adalah Proses perkembangbiakan tumbuhan yang didahului dengan proses penyeebukan. Penyerbukan merupakan peristiwa jatuhnya serbuk sari ke kepala putik. Alat perkembangbiakan secara generatif terdapat pada bunga.   Penerbukan diikuti dengan pembuahan sel jantan dan betina yang akan menghasilkan biji. Semua tumbuhan berbunga berkembang biak dengan cara ini. 2. Vegetatif   Vegetatif adalah perkembangbiakan tanpa adanya proses penyerbukan. Cara ini dibagi menjadi dua yaitu :   Vegetatif alami , terjadi dengan sendirinya tanpa bantuan manusia. Contoh perkembangbiakan secara vegetatif alami adalah sebagai berikut : a). Umbi Lapis   Perkembanganbiakan umbi lapis terjadi pada tanaman bawang merah, bawang putih, dan bunga bakung. b). Umbi Batang   Batang pada tumbuhan yang berkembang biak dengan cara ini akan membentuk tunas, dan menjadi individu baru. Perkembangbiakan semacam ini terjadi pada jeni...
Baca selengkapnya

Cara membuat akun Gmail

-
Gambar
Apa itu Gmail?   Google adalah salah satu perusahaan raksasa yang bergerak dibidang internet dan teknologi, dari  sekian banyak search Engine yang ada di Internet, search engine google lah yang paling sering digunakan oleh banyak orang. Selain search engine masih adala banyak lagi produk google yang jumlahnya sekitar 50an atau bahkan lebih banyak lagi.   Salah satu produk Google yang paling sering orang gunakan adalah Gmail atau Google Mail. Google mail merupakan sebuah layanan surel (Surat elektronik) yang diciptakan oleh Paul Buchheit pada tanggal 1 april 2004.   Pada bulan Oktober 2018 Gmail telah memiliki 1,5 Miliar pengguna di seluruh dunia.   Dan dalam kesempatan kali ini Tanpatiru telah membuatkan sebuah tutorial tentang cara membuat Akun Gmail, selamat membaca Membuat Akun Gmail   Kita akan membuat akun Gmail dengan dua cara, cara yang pertama adalah dengan menggunakan situs resmi Gmail dan yang kedua yaitu dengan menggunakan Setela...
Baca selengkapnya

Cara Membuat Subtitle Sendiri 100% Pasti Jadi

-
Gambar
CARA MEMBUAT SUBTITLE 100% JADI   Hai semuanya yang lagi baca artikel ini, udah sekitar satu minggu gua nggak nulis di blog Tanpatiru, tapi kali ini aku punya ide yang baru yang mungkin bermanfaat, yaitu Cara membuat SUBTITLE yang pastinya sangat mudah 100% berhasil, jika kalian ngikutin Langkah-langkah di bawah ini dengan benar.   Namun buat kalian yang nggak tau apa itu Subtitle, nih aku kasih tau. Jadi subtitle itu adalah teks yang biasanya muncul disebuah film ataupun Video yang isinya memuat  translate,  percakapan yang kurang jelas, ataupun berisi keterangan.   Lah langsung aja ya kita masuk ke tutorialnya Eits sabar! Kalian harus nyiapin aplikasi pembuat dokumen , misal Ms.office, WPS Office, ataupun Notepad. Jika nggak kalian bisa unduh aplikasi yang bisa bikin Subtitle disini ⚠ Tutorial dilakukan dengan menggunakan handphone DENGAN APLIKASI PEMBUAT DOKUMEN Langkah - Langkah : ⚠ Tutorial dilakukan dengan menggunakan WPS Office 1. Buka aplikas...
Baca selengkapnya