Cara Letak Butang Navigasi Atas Dan Kebawah


Butang keatas dan kebawah boleh digunakan untuk menavigasi ke bahagian atas dan bahagian bawah kandungan halaman, terutamanya apabila pada halaman utama terdapat banyak rencana atau apabila artikel yang mempunyai terlalu banyak komen. Butang ini mempunyai fadeIn dan kesan fadeOut, ini bermakna ia akan pudar sedikit apabila kita bergerak ke bahagian atas bawah halaman dan ia mempunyai fungsi naik ke atas atau ke bawah blog

Cara meletakkan butang kebawah dan keatas

1.Pada dashboard pilih template dan klik edit HTML

2.Cari kod  ]]></b:skin> dengan menggunakan Ctrl+F

3.Letakkan kod dibawah ini diatasnya
/* Up and Down Buttons with jQuery
----------------------------------------------- */
.button_up{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: whiteurl(http://4.bp.blogspot.com/-7zE5N9GdDUk/T6rH17KE6II/AAAAAAAACeQ/aEcKRyEhxsE/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:280px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.button_down{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(http://3.bp.blogspot.com/-sukwuViZaYY/T6rH15A8niI/AAAAAAAACeM/YErd0S8lPGA/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Button's width */
height:20px; /* Button's height */
bottom:242px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

Nota:teks berwarna hijau adalah jika anda hendak mengubah kedudukan butang.
        Untuk menukar warna latar belakang ubahkan teks white dengan  warna yang dingini

4.Seterusnya cari kod </body>

dan letakkan kod ini diatasnya

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<div class='button_up' id='button_up' style='display:none;'/>
<div class='button_down' id='button_down' style='display:none;'/>

<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();

$(function() {
var $elem = $('body');
$('#button_up').fadeIn('slow');
$('#button_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#button_up,#button_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#button_up,#button_down').stop().animate({'opacity':'1'});
});
$('#button_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
} );
$('#button_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
} );});
//]]>
</script>

5.Simpan template anda
sumber:helpblogger

Artikel ini hanyalah simpanan cache dari url asal penulis yang berkebarangkalian sudah terlalu lama atau sudah dibuang :

http://teknikbuatblog.blogspot.com/2014/01/cara-letak-butang-navigasi-atas-dan.html

Kempen Promosi dan Iklan
Kami memerlukan jasa baik anda untuk menyokong kempen pengiklanan dalam website kami. Serba sedikit anda telah membantu kami untuk mengekalkan servis percuma aggregating ini kepada semua.

Anda juga boleh memberikan sumbangan anda kepada kami dengan menghubungi kami di sini
Cara Letak Baja Di Pokok Orkid Hutan

Cara Letak Baja Di Pokok Orkid Hutan

papar berkaitan - pada 11/11/2021 - jumlah : 186 hits
Assalamualaikum dan Salam SejahteraKali ini noe nak kongsi perihal Pokok Orkid noe yang dah bertahun tahun tak berbunga Pokok ini pemberian arwah bapa mertua yang noe panggil sebagai Uncle Arwah Uncle memang penggemar pokok orkid Kalau dia ...
Cara Letak Site Map Pada Blog

Cara Letak Site Map Pada Blog

papar berkaitan - pada 12/11/2021 - jumlah : 182 hits
Salah satu kekurangan yang ada pada blog ialah ia tidak mempunyai indeks atau peta laman bagi sesuatu blog bagi menyenangkankan pembaca mencari sesuatu kandungan posting Blog archive dan pula tidak memaparkan keseluruhan kandungan jadi untu...
Nak Masak Sendiri Tapi Tak Cukup Masa Ini Cara Mudah Sediakan Makanan Bayi 6 Bulan Ke Atas Mama Kena Tahu

Nak Masak Sendiri Tapi Tak Cukup Masa Ini Cara Mudah Sediakan Makanan Bayi 6 Bulan Ke Atas Mama Kena Tahu

papar berkaitan - pada 6/11/2021 - jumlah : 370 hits
Menyediakan sendiri makanan untuk bayi memang rasa puas hati Bukan saja dapat kawal kandungan bahannya bahkan dapat berikan makanan kaya nutrisi buat anak Jika bijak merancang masa dan tahu tip mudahnya ibu dapat sediakan makanan berkhasiat...
Cara Mohon Bina Rumah Mesra Rakyat Atas Tanah Sendiri Subsidi Sehingga Rm20 000

Cara Mohon Bina Rumah Mesra Rakyat Atas Tanah Sendiri Subsidi Sehingga Rm20 000

papar berkaitan - pada 9/11/2021 - jumlah : 330 hits
Syarikat Perumahan Negara Berhada merupakan sebuah syarikat milik Menteri Kewangan Diperbadankan yang menawarkan Skim Rumah Mesra Rakyat Sejajar dengan Dasar Perumahan Negara SPNB diletakkan di bawah pengurusan Kementerian Perumahan dan Ker...
Cara Letak Contact Form Pada Blog

Cara Letak Contact Form Pada Blog

papar berkaitan - pada 12/11/2021 - jumlah : 170 hits
Untuk pengguna blogspot jika ingin meletakkan contact anda mungkin memilih Formstack Foxyform dan sebagainya Sekarang anda tidak perlu menggunakannya lagi kerana blogger telah mengeluarkan contact formnya sendiri Cara memasukkan contact pad...
Cara Mudah Buat Semakkan Wang Tak Dituntut Atas Talian

Cara Mudah Buat Semakkan Wang Tak Dituntut Atas Talian

papar berkaitan - pada 11/11/2021 - jumlah : 190 hits
Bagi memudahakan untuk orang ramai membuat semakkan Wang Tak Dituntut Jabatan Akauntan Negara secara dalam talian Kaedah ini memudahkan dan menjimatkan masa untuk berurusan di This is a content summarry Visit my website for full link other ...
Tips Cara Membuat Navigasi Breadcrumbs Supaya Terindex Di Search Engine Google

Tips Cara Membuat Navigasi Breadcrumbs Supaya Terindex Di Search Engine Google

papar berkaitan - pada 12/11/2021 - jumlah : 188 hits
Tips Cara Membuat Navigasi Breadcrumbs Supaya Terindex Di Search Engine Google Jom kita ikuti tutorial mudah ini Untuk membuat agar label atau kategori yang terdapat dalam breadcumbs tersebut boleh muncul dalam hasil pencarian atau terindek...
Cara Nak Buat Konten Yang Berkualiti Tinggi Mengikut Standard Google

Cara Nak Buat Konten Yang Berkualiti Tinggi Mengikut Standard Google

papar berkaitan - pada 9/11/2021 - jumlah : 283 hits
Cara Nak Buat Konten Yang Berkualiti Tinggi Mengikut Standard Google Anda seorang blogger Susah ke nak buat konten atau menulis entri setiap hari Dah lah tak ada idea nak pulak kena buat post yang berkualiti tinggi Nak kena ikut standard Go...
Oriental Kopi Klcc Port Minum Kopi Terbaru

Pasar Raya Flagship Jaya Grocer Di Sunway Pyramid Tarik Pengunjung Dengan Penampilan Serba Baharu

U Mobile The New Ali Baba Contractor For The Second 5g Network Tender

Rachel Zegler S Legs And Feet In Tights 6

Panas Artis Wanita Malaysia Ditahan Polis Thailand Turut Ditemukan 6 000 Biji Pil Kuda

The Celebrity Legs And Feet In Tights 2024 Pantyhose Queen Poll Full Contender List

Projek Tebatan Banjir S Ngor Gagal Rugi Besar

Iphones Dalam Bahaya Amaran Baru Peretasan Sasarkan Peranti Apple


echo '';
Info Dan Sinopsis Drama Berepisod Senyawa iQIYI Malaysia

Info Dan Sinopsis Drama Berepisod Project Projek Exit Astro Originals

Pelajari Asal Usul Nama Makhluk Seram Kisah Fiksyen Barat Yang Terkenal

10 Fakta Filem Kahar Kapla High Council Yang Ramai Tak Tahu Prekuel Drama Project Projek High Council

Anugerah Seri Angkasa 2024 Senarai Keputusan Pemenang Calon Top 5 Kategori Hadiah Persembahan Penyampai Trofi Dan Segala Info ASA 36


Ebook Rahsia Taobao

Larangan Menjalinkan Hubungan Sulit Dengan Suami Isteri Orang

12 Cawangan Ahmad S Fried Chicken Yang Semakin Mengganas Di Pasaran

Drama One Cent Thief 2

Jadual Tarikh Pembayaran Pencen Tahun 2025

Biodata Vivy Yusof Usahawan Ikon Fesyen Malaysia