Cara Memasang Tombol Go Up Dan Go Down Di Blogger

Tombol go up dan go down ini terletak di samping scroll kafe blog, fungsinya tidak jauh beda menyerupai tombol back to top hanya saja tombol ini dilengkapi dengan tombol go to bottom.

Makara tombol go up dan go down ini dapat dengan gampang dan cepat menggulir halaman artikel atau postingan untuk pribadi loncat ke bab bawah dan bab atas.

Karena melaksanakan scroll ke bawah atau ke atas dengan memakai mouse sudah kurang efektif apalagi jikalau halaman blog tersebut mempunyai konten yang banyak, sehingga butuh beberapa kali melaksanakan scroll ke bawah dan ke atas.

Sehingga dengan adanya tombol go up dan go down ini dapat memperlihatkan fasilitas kepada pengunjung atau pembaca blog Anda untuk melaksanakan scroll atau menggulir halaman artikel ke atas dan ke bawah dengan sangat mudah.

Tombol ini juga di lengkapi imbas smooth scroll jadi dikala tombol go up atau go down di klik lalu akan melaksanakan scroll ke atas atau ke bawah dengan imbas scroll yang halus.

Jika Anda tertarik untuk menciptakan tombol go up dan go down di blog silahkan ikuti langkah-langkahnya di bawah ini.

Cara Memasang Tombol Go Up dan Go Down di Blog

1. Masuk ke Blogger.com
2. Klik Tema > Edit HTML
3. Kemudian simpan arahan css ini, di atas arahan </head>

Versi 1 (Sederhana)

<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>

Versi 2 (Lingkaran)

<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>

4. Lalu tambahkan arahan ini, di atas arahan </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>

5. Tambahkan arahan font awesome ini, di atas arahan </head> tapi jikalau template blog Anda sudah memakai font awesome maka arahan ini tidak perlu di pasang lagi

<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>

6. Terakhir klik Simpan tema

Code by Arlina Design

Itulah artikel mengenai cara memasang tombol go up dan go down di blogger, supaya bermanfaat.
Sumber https://www.caramanual.com/

Related Posts