Modifikasi tombol Back To Top Dengan Goto Down

Modifikasi tombol Back To Top Dengan Go to Down

Assalamualaikum warahmatullahi wabarakatuh.

Kebiasaan deh membuat hati ini kesel dan marah tanpa sebab. sudah 2 (dua) hari ini jaringan internet di kampung saya tidak karuan down..!!! Harus bagaiman coba saya buat alasan lagi bagi sahabat blogging saya yang belum saya kunjungi. Maaf yah Bapak-Ibu, Mas-Mbak dan Kakak juga Adek blogging yang ku cintai semua jika saya hari ini saya belum BW ke blog anda semua. Lhoo..? saya koq lebay banget yah..? tt3tt3tt3.. Tepat jam 13-47 siang tadi baru jaringan internet stabil setelah beberapa jam saya kecewa tak bisa Daftar hadir dan meronda. Untung masih ada sisa postingan kemarin yang membahas :  Style Top Entri Ala Goyang Dumang. jadi ada sahabat yang masih datang bisa menyimak artikel walaupun sisa kemarin tapi sudah saya hangatkan biar gak basi. Nah pada kesempatan saya akan publikasi reques salah satu sahabat blogging saya Kang Hary yang sempat tertunda beberapa hari. Mungkin hari ini kiranya bisa saya penuhi, Sesuai pada judul diatas tentunya yang akan saya ketengahkan. karena saya bingung kasih nama judul nya maka saya simpulkan title post : "Modifikasi tombol Back To Top Dengan Goto Down" Sebetulnya sudah banyak sekali sahabat blogging yang share tutorial seperti ini. Namun kebanyakan hanya satu saja yaitu tombol back to top nya saja. Nah sesuai permintaan Kang Hary menginginkan tombol back to top sepasang dengan goto down nya. Jika sobat yang lain berminat silahkan tutorial pemasanganya sudah saya siapkan di bawah ini :

Baca juga artkel tentang :   Trik Blogger

Mengenai tombol Bacck to Top dan Go to Down :

Tentang tombol atau button back top yang artinya kembali ke atas. tombol itu biasanya ada terdapat pada web situs atau pada blog yang letaknya ada paling ujung bisa ada di sebelah kanan, namun ada juga yang di sebelah kiri pada body blog contoh pada blog saya ada di sebelah kanan. Gunanya untuk lebih memudahkan pengunjung blog agar lebih cepat menuju pada bidang yang di tuju. Walaupun ada scrol tetapi back to top lebih cepat din banding scrol tersebut. Jika anda pemblogger pemakai template nya Kang Adhi Suryadi (kompiajaib). pasti tombol back to top nya sudah ada di sebelah kanan. Pada pembuat template blogger umumnya membuat tombol tersebut hanya bak to top nya saja. nah pada kesempatan kali ini saya lengkapi tombol back to top nya sepasang dengan tombol go to down yang artinya (pergi ke bawah) bidang halaman blog makasudnya. itulah sedikit tentang bacck to top dan go to down pada paragaf ini saya yakin anda lebih sudah mungkin juga lebih paham dari saya.

Back To Top Dengan Goto Down :

Sebetulnya untuk membuat back to top bisa sepasang dengan go to down ini, harus melewati 3 artikel setahun yang lalu saya lihat Pertama posting tutorial ini Kang Ismet sahabat yang sangat senior dalam blogging. Telah memposting tentang Tombol back to top dengan effeccts bounce. Kemudian di kedua nya kembangkan lagi di posting bisa menjadi lebih simple dan valid HTML 5 CSS3 oleh Kang Adi Suryadi. Dan yang ke 3. Kang Adhy S, Memposting lagi cara membuat tombol go to down. Nah dari nara sumber pemblogging handal itulah saya mendapat ilham dan akhirnya memadukan script ke 3 postingan tersebut menjadi 1 artikel yang akan saya publikasikan. Dan pastinya tombol bak to top sepasang dengan go to down akan tampil pada nagian atas dan bawah blog anda. Namun jika anda ingin memasang hanya tombol back to top saja atau go to down nya saja silahkan pada link di bawah ini sebagai source nya :

1. Tombol back to top dengan efek bounce
2. Tombol back to top dengan befere dan after
3. Menambahkan Tombol Go To Down

Cara Memasang Back to top dan Go to Down sekaligus :

Pilihan ada di tangan anda silahkan pilih yang mana suka. jika anda berminat dengan yang akan di sediakan pada postingan ini mari kita sama sama simak dan cermati cara pemasangan kode yang akan di gunakan pada tutorial ini. Karena ini sebuah gabungan kode maka kodenya sedikit agak banyak namun tenang saja tidak akan menggangu load blog anda dan pastinya sudah lolos pada validasi html 5 dan css 3.

Cara memasang tombol Back to top dan Go to Down :

1. Masuk Dashboard jangan lupapa sign in
2. Pilih template lalu pilih edite template
3. Tekan CTRL + F Untukmemudahkan pencarian
4. Cari kode : ]]></b:skin> atau kode : </style>
5. Setelah ketemu copy kode dibawah ini tepat diatas pada
6. kode : ]]></b:skin> atau kode : </style>

/* CSS BounceToTop */
#BounceToTop {background:#D2D2D2;text-align:center;position:fixed;bottom:10px;right:10px;cursor:pointer;width:30px;height:20px;border-radius:2px;padding:5px;display:none;}
#BounceToTop:before {content:""; position:absolute; bottom:5px; right:5px; width:0; height:0; border-style:solid; border-width:0 15px 20px 15px; border-color:transparent transparent #A6A6A6 transparent; line-height:0;}
#BounceToTop:hover:before {content:""; position:absolute; bottom:5px; right:5px; width:0; height:0; border-style:solid; border-width:0 15px 20px 15px; border-color:transparent transparent #464646 transparent; line-height:0 }
#BounceToTop:after {content:""; position:absolute; bottom:5px; right:11px; width:0; height:0; border-style:solid; border-width:0 9px 12px 9px; border-color:transparent transparent #D2D2D2 transparent; line-height:0;}

/* CSS GoToDown*/
#GoToDown {background:#fff;text-align:center;position:fixed;top:13px;right:10px;z-index:999;cursor:pointer;width:30px;height:20px;padding:5px;border-radius: 2px;}
#GoToDown:before {content:";"; position:absolute; bottom:5px; right:5px; width:0; height:0; border-style:solid; border-width:20px 15px 0 15px; border-color:#333 transparent transparent transparent; line-height:0;}
#GoToDown:hover:before {content:";"; position:absolute; bottom:5px; right:5px; width:0; height:0; border-style:solid; border-width:20px 15px 0 15px; border-color:#888 transparent transparent transparent; line-height:0 }
#GoToDown:after {content:";"; position:absolute; top:5px; right:11px; width:0; height:0; border-style:solid; border-width:12px 9px 0 9px; border-color:#fff transparent transparent transparent; line-height:0;}

Info : Silahkan copy CSS Diatas jika anda ingin menerapkan kedua trik Back to top dan Go to Down tampil pada blog Anda maka copy semua CSS diatas pada kolom yang ditentukan.

Selanjutnya masih di edite template copy kode Javascript di bawah ini pastekan tepat diatas </body>

<script type='text/javascript'>
Java script back to top
$(function() { $(window).scroll(function() { if($(this).scrollTop()>100) { $('#BounceToTop').fadeIn(); } else { $('#BounceToTop').fadeOut(); } });
$('#BounceToTop').click(function() { $('body,html').animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); });
var $elem = $('body');
$('#GoToDown').click(function () {
$('html, body').animate({scrollTop: $elem.height()}, 4000);
$('#GoToDown').fadeOut()
});
$('#BounceToTop').click(function () {
$('#GoToDown').fadeIn()
});
 });
</script>
Di bawah ini ID Back to top dan Go to down
  <div id='BounceToTop'/>
  <div id='GoToDown'/>

Kode Javascript diatas dua gabungang dari tombol Back to top dan Go to Down. Jika anda menggunakan trik  ini keduanya maka kode javascript diatas copy dan pastekan tepat  diatas  kode : </body> template anda. Setelah semua kode diatas sudah terpasang dengan benar Silahkan, Save/simpan template anda dan silahkan cek halaman blog anda. Jika terpasang dengan benar maka tombol Back to top dan Tombol Go to Down. Akan nampak seperti pada halaman  DEMO berikut di bawah ini silah kan klik  demonya jangan lupa tinggalkan komentar Atau follow blog baru saya ya sobat..? oke Sob..? :

DEMO

Uppsssss...!!! .. Sebelum anda mencoba trik ini alangkah baiknya siapkan segelas kopi manis atau kopi susu + Kue cemilan. Sekalian Rokoknya dan sekalian saya numpang Ngopinya,, tt3tt3tt3 .. Selamat Mencoba semogaanda semua berhasil....

"Demikianlah kiranya yang bisa saya ketengahkan untuk anda semua. Semoga sajian yang sederhana ini bisa bermanfaat untuk sobat blogging yang membutuhkanya. Jika ada kesulitan silahkan diskusikan atau tanyakan pada kolom komentar dibawah ini. Mohon maaf jika terdapat kekeliruan/kesalahan dalam postingan ini. Dan jika anda dapatkan link url blog ini yang mati atau/brokenlink sudi kiranya memberitahu saya. Terima kasih atas sapa dan salam juga kunjung dan komentar anda pada post ini. Tetap semangat dan berexpresi. Salam sukses dan ceria selalu buat seluruh sahabat blogging yang tercinta. Happy Blogging ...."