Cara Membuat Tombol Go Up Dan Down Di Blogspot - Pada kesempatan ini aku ingin membuatkan cara menciptakan tombol go up dan down di blog. Cara nya sangat mudah. Sebelum kita mulai tutorial kali ini aku akan jelaskan apa itu tombol go up dan down. Tombol up down sebetulnya sama menyerupai Cara menciptakan tombol Go To Top yang dapat kalian temukan pada template kalian kalau kalian memakai nya. Yang dimana dikala kita klik tombol tersebut kita akan menuju ke halaman atas. Nah untuk tombol up dan down yang akan aku bagikan ini fungsi nya hampir sama, yang membedakan nya adalah aku hanya menambahkan tombol untuk down. Sehingga kalian tidak susah - susah payah untuk menggerakan mouse atau jempol kalian kalau browsing melalui hp.
Mungkin kita pribadi saja mulai tutorial kali ini, silahkan ikuti langkah berikut ini.
Cara Memasang Tombol Go Up Dan Down Di Blogspot
Silahkan kalian copy code di bawah ini dan letakan code tersebut di atas code </head>.Sebelumya kalian lihat terlebih dahulu, apakah code yang di bawah ini sudah ada atau belum di template kalian. Bila sudah ada kalian dapat lewatkan code yang di bawah ini dan lanjut ke tahap berikut nya.
<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> Sekarang kalian copy lagi code di bawah ini dan letakan code tersebut di atas code </head>
Tombol UP Dan Down ini memiliki 2 tampilan :
- Code Di bawah ini untuk 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> - Dan code di bawah ini untuk Versi 2
<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>
Dan yang terakhir copy 2 code di bawah ini dan letakan code tersebut di atas code </body>
<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> Untuk Demo kalian dapat lihat demo / tampilan nya di bawah ini.
Mungkin itu saja yang dapat aku berikan di kesempatan kali ini. Semoga dapat bermanfaat untuk sahabat blogger. Selamat mencoba!
