√ Cara Membuat Tombol Back to Top Roket di Blogger

√ Cara Membuat Tombol Back to Top Roket di Blogger - Selamat berjumpa kembali sahabat SMK NEGERI 1 SERI KUALA LOBAM, Senang dapat bertemu anda kembali untuk membahas materi atau artikel √ Cara Membuat Tombol Back to Top Roket di Blogger, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. Semoga pembahasan postingan atau artikel kategori Artikel Blogger, yang kami tulis ini dapat anda pahami. Tanpa memperpanjang basa-basi lagi, kami sampaikan selamat membaca.

Seberapa dalam artikel √ Cara Membuat Tombol Back to Top Roket di Blogger ini dapat kami bahas dan jabarkan kepada anda, kiranya tidak mengurangi makna. Kami hanya berpesan kepada pembaca SMK NEGERI 1 SERI KUALA LOBAM, jadikan artikel kami ini sebagai materi tambahan. Jika masih kurang lengkap, pembaca dapat menambah wawasan dengan mencari artikel serupa diblog lainnya atau menanyakan langsung kepada pakar yang mahir dengan masalah √ Cara Membuat Tombol Back to Top Roket di Blogger. Selamat menambah wawasan!

√ Cara Membuat Tombol Back to Top Roket di Blogger

Cara Membuat Button Back to Top Roket Blogger - Halo sobat blogger, pada kesempatan kali ini saya akan membagikan tutorial, yaitu cara membuat tombol return/back to top roket. Tombol back to top ini biasanya terletak pada pojok bawah sebuah web.

Tombol back to top merupakan fitur yang penting untuk sebuah blog, khusunya blog yang memiliki artikel panjang. Tombol back to top berfungsi untuk kembali ke bagian halaman paling atas, jadi saat Anda membaca artikel Anda tidak perlu melakukan scroll untuk kembali ke halaman atas.

Selain itu, tombol back to top ini bisa mempercantik tampilan web Anda, khususnya dengan tambahan animasinya. Nah langsung saja berikut tutorial cara memasang tombol back to top di blogger dengan ikon rocket svg dan tentunya smooth saat scroll.

Cara Membuat Back to Top Roket di Blogger

- Langkah 1: Masuk blogger.com → Pilih menu Tema → Edit HTML.

- Langkah 2: Copy dan paste kode CSS berikut diantara tag , agar lebih tertata silahkan paste diatas  yang sudah ada di template Anda.

.back-to-top svg {width:24px;height:24px;vertical-align: middle} .back-to-top svg path {fill: #4d90fe;} .back-to-top:hover svg path{fill: #f95b41} .back-to-top:hover{transform: rotate(-45deg);} .back-to-top {background:#fff;padding:9px 9px;font-size:24px;border-radius: 100px;transition:all .30s ease-in-out;;border:2px solid #4d90fe;position: fixed !important;position: absolute;bottom: 20px;right: 20px;transition:transform .5s ease-out;z-index: 999;box-shadow:0px 2px 10px 0px #aaaaaa} 

Untuk mengganti warna silahkan ganti kode hex warna pada fill: #... dan border: 2px solid #.....

- Langkah 3: Selanjutnya copy dan paste kode berikut dibawah tag atau juga bisa diletakkan setelah tag .

- Langkah 4: Setelah itu copy kode berikut dan pastekan tepat diatas kode .

- Langkah 5: Terakhir silahkan klik Simpan, selesai....

Demo
Click here

Penutup

Itu tadi cara membuat back to top dengan ikon roket di blogger. Nah sekarang penggujung web Anda tidak capek-capek untuk scroll keatas secara manual. Baiklah sekian artikel singkat ini selamat mencoba dan semoga bermanfaat.

Penutup Artikel √ Cara Membuat Tombol Back to Top Roket di Blogger

Demikian artikel √ Cara Membuat Tombol Back to Top Roket di Blogger kali ini, semoga bisa memberi manfaat untuk anda semua pembaca blog SMK NEGERI 1 SERI KUALA LOBAM. Allright, sampai jumpa pada postingan artikel lainnya.

Baru saja anda membaca artikel √ Cara Membuat Tombol Back to Top Roket di Blogger dengan alamat link https://smkn1serikualalobam.blogspot.com/2015/03/cara-membuat-tombol-back-to-top-roket.html

Artikel √ Cara Membuat Tombol Back to Top Roket di Blogger ini kami arsipkan pada kategori Blogger.

Location:

Share :