Membuat Back To Top Dengan CSS

Back To Top mungkin hampir semua blogger sudah mengenalinya. Tools yang satu ini memang bisa dibilang dapat menyamankan para pengunjung blog kita karena dengan adanya tools ini maka apabila pengunjung blog sedang berada di paling bawah blog maka hanya dengan mengklik tombol Back To Top ini pengunjung dapat dengan mudahnya langsung kembali ke atas.

lagi pula tanpa dijelaskan juga mungkin sobat semua dapat mengetahui manfaat tools ini dari namanya yaitu Back To Top. Memang semua blogger atau para master blogger semua sudah membagikan ilmu tentang ini namun kebanyakan menggunakan javascript nah sedangkan banyak orang yang bilang kalau memakai javascipt itu membuat blog kita menjadi berat atau lambat untuk di akses. Setelah muncul opini yang seperti itu maka saya mempunyai inisiatif untuk membuat tools ini ringan, namun bagaimana? akhirnya saya menemukannya yaitu dengan tidak menggunakan javascript namun menggunakan CSS dan HTML saja, untuk melihat demonya sobat dapat melihat di pojok kanan bawah yang bergambar panah ke atas, silahkan tekan tombol itu. sekarang kita lihat cara pembuatannya.

1. Login ke blogger
2. lalu masuk ke Tata Letak >> Rancangan >> Edit HTML
3. setelah itu cari kode ]]></b:skin> lalu tambahkan kode di bawah ini tepat di atasnya
   
   
   #csstop {
   overflow: hidden;
   float:right;
   width:50px;
   height:50px;
   clear:both;
   }
   
   
4. setelah itu cari kode </body> lalu tambahkan pula kode di bawah ini tepat di atasnya
   
   <a id="csstop" href="#"><img src="http://i1189.photobucket.com/albums/z423/jonsstyle/113018.gif" alt="jonsstyleofblogger.blogspot.com"/></a>
   
   
5. Setelah itu sobat dapat menyimpannya dan melihat hasilnya

Back To Top dengan CSS dengan Back To Top dengan Javascript? lebih baik yang mana menurut sobat semua? silahkan tinggalkan pesan atau pendapat sobat di kotak komentar yang sudah di sediakan di bawah ini. Terima kasih dan Happy Blogging.

Artikel Terkait di Bawah posting

CSS

• Cara Membuat Vertical Sliding Info Panel With jQuery
• Membuat Gradient Effect dengan CSS
• CSS Shadow - Membuat Bayangan Dengan CSS
• Trik Rotasi Gambar Dengan CSS
• Kenalan Dengan Border Lengkung
• Image Gallery With CSS3
• Membuat Arsip dan Label Blog model Scroll
• Membuat Gambar Melayang di Blog
• CARA MEMBUAT TOOLTIPS DI BLOG...
• Membuat Sliding Login/Register Form Panel di Blogspot [JQery]

Blogger

• Kamus Nama bagus
• Efek Box Gelap Terang Menggunakan Opacity Effect dan CSS3 Transition
• Merubah Lebar Template Blog
• Cara Membuat New Recent Comment dengan Scroll Down di Blogspot
• Cara Memasang Yahoo Messenger Di Blogger
• Cara membuat browser bergetar saat klik kanan
• Cara Membuat Sitemap di Blogspot
• Membuat Widget Agar Selalu Tetep Berada Di Kiri,Kanan,Dll
• Cara Pasang Buku Tamu Facebook di Blog
• Tips Cara Pasang Status / ikon YM (yahoo messenger) di blog/web/friendster !
• Mengganti Tulisan Newer Post Older Post Dengan Gambar
• Cara Membuat Vertical Sliding Info Panel With jQuery
• Memasang Radio Online atau MP3 di Blog
• SEXY BOOKMARKS V2 FOR BLOGGER
• Show Comment Bubble at Top Right of each Blogger Posts
• Automatic Read More with Thumbnail for Blogger
• Social Bookmarking Widget for Blogger with auto scrolling function
• CARA MEMBUAT EXPLORER D-TREE...
• Cara Pasang Tag Meta Robot Blogspot
• Cara Membuat Drop Caps Otomatis di Posting Blog
• Koleksi banner blog dofollow
• Cara mengecek kecepatan Blog
• Membuat Link Terbuka Pada Halaman Baru
• Memasang Feedjit Pada Blogger
• Membuat Gradient Effect dengan CSS

Back To Top

• Memasang Smooth Scrolling Page