Monday, July 11, 2011
Membuat Scroll Back to Top "Transparent" Atas/Bawah
Back To Top sudah banyak digunakan oleh para blogger untuk memperindah tampilan blognya. Banyak ragam kreasinya, seperti salah satunya menggunakan jQuery.
Back to top memudahkan kita khususnya para pengunjung blog untuk kembali ke halaman atas, jadi kita tidak perlu men-scroll secara manual menggunakan mouse untuk kembali keatas.
Gimana tertarik??
Ok,Caranya cukup sederhana koq, tinggal ikutin proses dibawah ini....
1. Yang pertama harus dilakukan adalah buka Blogger - Design - Edit HTML
2. Langkah selanjutnya copy kode javascript dibawah ini tepat diatasnya kode </body>
Alasan kenapa kode script diatas diletakkan paling bawah atau setelah kode </body> adalah supaya pada saat loading blog pertama kali, tidak terlalu berat.
Sebagai informasi dan patut menjadi perhatian adalah kode outer-wrapper... kode ini merupakan kode css yang biasa ada di template minima, yang menggambarkan area id div setelah body... jadi kode ini bisa diganti sesuai area div setelah body.
3. Selanjutnya copy kode css dibawah ini, tepat diatasnya kode ]]></b:skin>
4. Dan langkah terkahir simpan...
Begitulah sehingga postingan ini berakhir
Back to top memudahkan kita khususnya para pengunjung blog untuk kembali ke halaman atas, jadi kita tidak perlu men-scroll secara manual menggunakan mouse untuk kembali keatas.
Gimana tertarik??
Ok,Caranya cukup sederhana koq, tinggal ikutin proses dibawah ini....
1. Yang pertama harus dilakukan adalah buka Blogger - Design - Edit HTML
2. Langkah selanjutnya copy kode javascript dibawah ini tepat diatasnya kode </body>
<div style="display:none;" class="atas" id="atas"></div>
<div style="display:none;" class="bawah" id="bawah"></div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script text="text/javascript">
$(function() {
var $elem = $('#outer-wrapper');
$('#atas').fadeIn('slow');
$('#bawah').fadeIn('slow');
$('#bawah').click(
function (e) {$('html, body').animate({scrollTop: $elem.height()}, 800);});
$('#atas').click(
function (e) {$('html, body').animate({scrollTop: '0px'}, 800);});
});
</script>
Alasan kenapa kode script diatas diletakkan paling bawah atau setelah kode </body> adalah supaya pada saat loading blog pertama kali, tidak terlalu berat.
Sebagai informasi dan patut menjadi perhatian adalah kode outer-wrapper... kode ini merupakan kode css yang biasa ada di template minima, yang menggambarkan area id div setelah body... jadi kode ini bisa diganti sesuai area div setelah body.
3. Selanjutnya copy kode css dibawah ini, tepat diatasnya kode ]]></b:skin>
#bawah{padding:7px; background-color:white; border:1px solid #CCC; position:fixed; background:transparent url(http://img89.imageshack.us/img89/4998/arrowdown.png) no-repeat top right; background-position:50% 50%; width:20px; height:20px; bottom:10px; opacity:0.7; right:55px; white-space:nowrap; cursor:pointer; -moz-border-radius:3px 3px 3px 3px; -webkit-border-top-right-radius:3px; -webkit-border-top-right-radius:3px; -khtml-border-top-right-radius:3px; -khtml-border-top-left-radius:3px; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70)}
#atas{padding:7px; background-color:white; border:1px solid #CCC; position:fixed; background:transparent url(http://img600.imageshack.us/img600/8649/arrowup.png) no-repeat top right; background-position:50% 50%; width:20px; height:20px; bottom:10px; opacity:0.7; right:15px; white-space:nowrap; cursor:pointer; -moz-border-radius:3px 3px 3px 3px; -webkit-border-top-left-radius:3px; -webkit-border-top-right-radius:3px; -khtml-border-top-left-radius:3px; -khtml-border-top-right-radius:3px; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70)}
4. Dan langkah terkahir simpan...
Begitulah sehingga postingan ini berakhir
Labels:
Javascript
Subscribe to:
Post Comments (Atom)
Blog Archive
- 2012 (7)
-
2011
(362)
- December(5)
- November(6)
- October(5)
- September(9)
- August(20)
-
July(227)
- Tips Cara Ganti Warna Tampilan Microsoft Office 2007
- Confirmasi PayPal Agar bisa Menerima Pembayaran
- Manfaat Menjalankan Shalat
- Daftar Paypal Gratis dan Tanpa Credit Card
- TuneUp Utilities 2011 Full Version + Serial Number
- Auto Hide IP 5.1.7.2 Full Crack
- Template Transparent 2.0 design by Rizky Wardiansyah
- Black Devil Red Horns Emoticon
- Template Transparent 1.0 design by Rizky Wardiansyah
- Boaz dan Busthomi Langsung Diminati Klub Malaysia
- Any Video Converter 3.25
- Bor Gigi Bisa Bernyanyi
- Cara Pasang Widget (Buku Tamu) Facebook
- Menyembunyikan Obyek Dengan Kode Overflow:hidden
- "Yang Anggap Rossi Tidak Berusaha, Orang Gila"
- Coleen Buat Wanita Penghibur Rooney Ketakutan
- Windows Media Player 12's surprising new features
- Internet Download Manager 6.07 Build 5 Full Patch
- Cara Memasang Widget Followers di Pojok Blog
- Mempercepat Copy/Paste Dengan Teracopy
- IDM Optimizer Software Untuk Memaksimalkan IDM
- Yuk Nikmati Sahur Bersama OVJ
- City Tunggu Aguero dalam Lima Hari
- Xavi, Messi, dan Ronaldo Berebut Jadi yang Terbaik
- Membuka You Tube Tanpa Blokir
- Cara Jebol Quota Modem Aha (Quota Habis)
- Membuka Blokir Situs Dewasa Pada Modem AHA Dialer ...
- DLL-Files.com Fixer Full Patch
- Lapangan Buruk, Indonesia Hanya Imbang di Babak I
- Pasang About Author Box dengan CSS
- Cara Pasang Iklan di Bawah Posting
- Desktop Windows 7 Layar Hitam??
- Posteriza - Software Buat Print Gambar Besar Dalam...
- Ablewise | Tool Buat Memprediksi PageRank
- Download Game MotoGP 3 URT – Ultimate Racing Techn...
- Update Terbaru Winning Eleven 2011
- Download Winning Eleven 9 PC Portable Gratis
- Google Index Pages Checker
- Setting Macro Mouse A4Tech XL-747H
- Melawan virus pemakan exe
- 3 Penyebab Utama Pc/Komputer Sering Restart Sendiri
- Mengatasi masalah windows yang tidak mau Log On
- Membuat Cd instalan windows(Bootable) Instan Denga...
- Blogger Support Upload Favicon Sendiri
- Firefox 6.0 Beta 2
- Cara Memasang Meta Tag Alexa
- Mendaftarkan Blog dan Memasang Widget Alexa
- Cara Menambah Background di Posting Blog
- Keputusan PSSI Memecat Alfred Riedl Adalah Blunder
- Cara Memasukan Foto ke dalam Template
- Membuat Efek Auto Blend Layer (CS3)
- Link-link di Ilmu Photoshop Yang Mungkin Berguna
- Collection Link Brush Photoshop Gratis dan Unik
- Cara Membuat Langit Berbintang
- Tips Photoshop : Pengaturan Penting Sebelum Mendesain
- Kumpulan Gambar Animasi Bergerak GIF One Piece
- 10 Foto Lucu Bayi yang Baru Lahir (Ng-gemesin Bang...
- Kumpulan Gambar Lucu dan Konyol
- Foto Nakal Syahrini Beredar di Internet
- Foto Ciuman Briptu Norman Beredar Di Internet
- Cara Pasang Kotak Komentar Facebook di Blogger
- Download Koleksi Soundtrack Film 'MOHABBATEIN'
- Download Koleksi LAGU-LAGU SHAHRUK KHAN
- Download Koleksi Soundtrack Film 'KUCH KUCH HOTA HAI'
- Download Koleksi Soundtrack Film 'DILTO PAGAL HAI'
- Download Koleksi Soundtrack Film 'HUM TUMHARE HAIN...
- Download Koleksi Soundtrack Film 'DIL SE'
- Download Koleksi Soundtrack Film 'KOYLA'
- Download Gratis Lagu Peterpan – Dara | Video
- Lagu Briptu Norman Cinta Cinta | Chaiya chaiya Ver...
- Lagu Briptu Norman Cinta Farhat Free Download
- Cara Ganti Template Blogspot Anda
- Cara Merubah Lebar Dan Luas Template
- Worm 3D
- Stronghold Crusader Extreme
- Crazy Frog Racer 2
- Feeding Frenzy 2
- Medal of Honor Limited Edition
- Need For Speed Most Wanted + Crack
- Devil May Cry 4
- Resident Evil 5
- Counter Strike : Source v.60 OrangeBox Engine FULL...
- Counter Strike S.T.A.L.K.E.R. (2010/ENG) PC
- Counter Strike 1.6 Update 2011 (Bots + Skins + 100...
- Counter Strike 1.6 (Update March.2011) Bots - Skin...
- Counter Strike Source 1.6
- Counter Stirke: V5 Xtreme (2011/ENG) 794 MB
- Street Fighter III 3rd Strike Full Version
- X-Men VS Street Fighter
- Cara Install Dota Battle
- Prison Tycoon 4 SuperMax
- FBI Hostage Rescue (ENG/Full/PC)
- SAS Anti Terror Force [Full ISO]
- SAS Anti Terror Force Edition
- Ice Age 3 : Dawn Of The Dinosaurs
- Ice Age 2 : The Meltdown
- Koleksi Template Terbaru 2011
- Collection Template Blogger
- RegistryBooster 2011 6.0.3.6 Full Serial Crack
- Install Windows 7 Melalui USB Flash Disk Tanpa CD-...
- June(90)
About Me
- Sibuk Banget
0 comments:
Post a Comment