Cara membuat Tombol go up dan go down di blogger




Cara membuat Tombol go up dan go down di blogger
Cara membuat Tombol go up dan go down di blogger : Sebenarnya sudah banyak juga teman blogger kita yang telah membahas cara membuat tombol go up dan go down, tetapi tidak ada salah nya juga saya membagikan atau share kembali cara membuat tombol go up dan go down. Nah jika anda tertarik untuk membuat nya, bisa anda simak penjelasan saya di bawah ini.

Tombol go up dan go down ini terletak di samping scroll bar blog, namun untuk fungsinya tidak jauh beda lah seperti tombol back to top lainnya, hanya saja tombol ini dilengkapi dengan tombol go to bottom.

kita bukan hanya saja harus membangun blog/website, namaun kita juga harus memenuhi kebutuhan pengunjung, ini merupakan hal paling penting dalam membangun blog yang baik dan di sukai oleh para pembaca. Dengan kita memasang tombol go up dan go down ini tentunya dapat mempermudahkan para pengunjung dengan cepat untuk menggulir halaman artikel atau postingan untuk langsung loncat ke bagian bawah dan bagian atas dengan sekali klik saja pastinya. 

Mungkin bagi anda yang penasaran bagaimana bentuk dari tombol go up dan go down tersebut, jika anda ingin melihat demonya bisa anda lihat langsung di blog saya yang sudah saya pasang tombol go up dan go down nya, itupun jika belum saya lepas tombol go up dan go down nya. 

Nah untuk lebih jelasanya dan jika sudah tidak sabar lagi anda ingin membuatnya, maka ikuti langkah- langkah di bawah ini dengan teliti. karena untuk yang masih pemula pasti akan terkendala sedikit untuk cara pemasangan tombol go up dan go down nya jika tidak teliti.

Di bawah ini adalah domo dari Tombol go up dan go down bisa anda lihat.
Tombol go up dan go down
1. Pertama , pastikan anda sudah masuk di dasbhor milik anda sendiri atau klik disni
2. Masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML. 
3. Kemudian anda bisa mencari kode sepeti ini </head>, atau lebih cepat pencariannya anda bisa tekan CTRL+F. Jika di template anda belum memasang kode ikon fontawesome, maka ada harus copy dan di letakan di atas kode </head>
<script type='text/javascript'>
//<![CDATA[
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>
4. Di bawah ini bisa anda copas juga dan di letakan di atas kode</head>atau tepat sebelum kode </head>
5. Style atau versi 1
<style type='text/css'>
/* Go Up and Down */
#scrollToTop{display:none;list-style:none;position:fixed;bottom:49%;right:20px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}
#scrollToTop a{display:inline-block;background:#fff;color:#222;font-size:.8rem;margin:5px auto;padding:12px 14px;border-radius:99em;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#scrollToTop a:hover{color:#222;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)}
#top{position:absolute;top:0}
</style>
6. Style atau versi 2, lebih simple lagi pastinya.
<style type='text/css'>
/* Go Up and Down */
#scrollToTop{display:none;list-style:none;position:fixed;bottom:49%;right:10px;cursor:pointer;-webkit-transform:translateZ(0);transform:translateZ(0);z-index:99}
#scrollToTop a{color:rgba(0,0,0,0.2);font-size:16px}
#scrollToTop a:hover{color:rgba(0,0,0,0.5)}
#top{position:absolute;top:0}
</style>
7. Selanjutnya anda bisa menambahkan kode di bawah ini sebelum kode </body> atau di atas nya.
<ul id='scrollToTop'>
  <li><a href='#top'><i class='fa fa-chevron-up' title='Go up'/></a></li>
  <li><a href='#bottom'><i class='fa fa-chevron-down' title='Go down'/></a></li>
</ul>
<div id='top'/>
<div id='bottom'/>

<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(){var o=220,r=600;jQuery(window).scroll(function(){jQuery(this).scrollTop() > o?jQuery("#scrollToTop").fadeIn(r):jQuery("#scrollToTop").fadeOut(r)})});
$(function(){$("a[href*=#]:not([href=#])").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var t=$(this.hash);if(t=t.length?t:$("[name="+this.hash.slice(1)+"]"),t.length)return $("html,body").animate({scrollTop:t.offset().top},600),!1}})});
//]]>
</script>
8. Jika sudah anda ikuti langkah- langkah seperti di atas, maka langsung anda klik save template
9. Dan jangan lupa klik pertinjauan atau lihat hasilnya, berhasil atau tidaknya. Jika berhasil saya ucapkan selamat, namun jika anda gagal bisa mencoba kembali langkah- langkah dengan cermat.

Bila anda kurang jelas dapat berkomentar di bawah ini, saya akan segera menjawab komentar anda.
Demikian penjelasan pada sore ini, selamat mencoba dan semoga sukses.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect