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 : 189 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 : 185 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 : 375 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 : 334 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 : 171 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 : 193 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 : 191 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 : 286 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...
Umno Youth To Protest Extra Hours For Civil Servants Working Shifts

The Difference In The Concept Of Illicit Relationship Between Muslims And Non Muslims

Pensyarah Didakwa Hina Nabi Jawi Turut Buka Siasatan

Pas Langkaui Retorik Dap Isytihar Pas Muuh Utama

Murid Buktikan Pada Guru Lembu Makan Martabak

Let S Not Return To The Old Ways Of Tight Media Control

Abang Adik Wins Best Film Award In Los Angeles

Air Terjun Tujuh Puteri Bukit Sri Permata


echo '';
Senarai Lagu Tugasan Konsert Minggu 1 Gegar Vaganza 2024 Musim 11

Info Dan Sinopsis Drama Berepisod Dhia Kasyrani Slot Akasia TV3

Biodata Terkini Reshmonu Peserta Gegar Vaganza 2024 Musim 11 GV11 Penyanyi Lagu Hey Waley

Gegar Vaganza 2024 GV 11 Hadiah Tiket Peserta Juri Format Pemarkahan Dan Segala Info Tonton Live Di Astro Ria Dan Sooka

6 Janji Donald Trump Kalau Dia Naik Jadi Presiden Semula


Pengalaman Naik Mahkamah Saman Jpj Bila Kereta Tiada Roadtax Dan Insuran

12 Abang Abang Macho Berentap Dalam Who S Your Bro Maskulin

Hoo Pang Ron Cheng Su Yin Ke Final China Masters 2024

Geng Jin

Perbanyakkanlah Taubat

Bagaimankah Cara Kira Umur Kucing