Cara Memasang Tombol Go Up Dan Go Down Di Blogger - Gasskeun Cara Memasang Tombol Go Up Dan Go Down Di Blogger | Gasskeun
» » » » Cara Memasang Tombol Go Up Dan Go Down Di Blogger

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.

Pasang Tombol Share Facebook Twitter Google Plus Di Blog
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.

Tombol go up dan go down ini terletak di samping scroll kafe blog Cara Memasang Tombol Go Up dan Go Down di Blogger

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>
Cara Menambahkan Bantuan Paypal Di Blogspot

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
Membuat Related Post Atau Artikel Terkait Dengan Gambar
<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/
<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>

Cara Memasang Iklan Adsense Tengah Artikel Tanpa Merusak Gambar
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

Matikan AdBlock

Agar blog Ini tetap berjalan, matikan AdBlock atau masukkan blog ini ke dalam whitelist.
Terima kasih.