Cara Memasang Tombol Go Up dan Go Down di Blog - Arlina Design
Kali ini Arlina Design akan berbagi tips Cara Memasang Tombol Go Up dan Go Down di Blog. Apa itu Tombol Go Up dan Go Down? Tombol Go Up dan Go Down adalah tombol yang berfungsi baik cara untuk melompat ke atas maupun ke bawah dengan mudah dan singkat, daripada menggerakannya dengan mouse. Ini adalah salah satu cara untuk mendorong pengguna menelusuri lebih banyak konten-konten yang lainnya dengan mudah.

Cara Memasang Tombol Go Up dan Go Down di Blog

Tombol Go Up dan Go Down memiliki peranan cukup penting bagi sebuah situs dengan konten yang memiliki halaman yang panjang. Untuk situs yang memiliki banyak informasi pada halamannya akan membuat konten-konten lain terlewati tanpa disadari menggulir jauh ke bawah halaman.

Baiklah, bagi yang ingin memasangnya silakan ikuti langkah berikut ini

Cara Memasang Tombol Go Up dan Go Down di Blog


Langkah pertama, buka Blogger > Klik menu Tema > Klik Edit HTML

Kode yang akan saya bagikan ini menggunakan ikon dari Fontawesome, jika belum ditambahkan. Tambahkan kode di bawah ini sebelum </head> pada Template editor.

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

Setelah menambahkan kode Fontawesome silakan tambahkan kode di bawah ini tepat sebelum </head>

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>

Versi 2 yang lebih 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>

Kemudian tambahkan kedua kode di bawah ini sebelum </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>

Simpan tema dan lihat hasilnya di blog sobat.


Sekian untuk tips Cara Memasang Tombol Go Up dan Go Down di Blog, semoga bermanfaat dan wassalam.

Cara Memasang Tombol Go Up dan Go Down di Blog

Kali ini Arlina Design akan berbagi tips Cara Memasang Tombol Go Up dan Go Down di Blog. Apa itu Tombol Go Up dan Go Down? Tombol Go Up dan Go Down adalah tombol yang berfungsi baik cara untuk melompat ke atas maupun ke bawah dengan mudah dan singkat, daripada menggerakannya dengan mouse. Ini adalah salah satu cara untuk mendorong pengguna menelusuri lebih banyak konten-konten yang lainnya dengan mudah.

Cara Memasang Tombol Go Up dan Go Down di Blog

Tombol Go Up dan Go Down memiliki peranan cukup penting bagi sebuah situs dengan konten yang memiliki halaman yang panjang. Untuk situs yang memiliki banyak informasi pada halamannya akan membuat konten-konten lain terlewati tanpa disadari menggulir jauh ke bawah halaman.

Baiklah, bagi yang ingin memasangnya silakan ikuti langkah berikut ini

Cara Memasang Tombol Go Up dan Go Down di Blog


Langkah pertama, buka Blogger > Klik menu Tema > Klik Edit HTML

Kode yang akan saya bagikan ini menggunakan ikon dari Fontawesome, jika belum ditambahkan. Tambahkan kode di bawah ini sebelum </head> pada Template editor.

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

Setelah menambahkan kode Fontawesome silakan tambahkan kode di bawah ini tepat sebelum </head>

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>

Versi 2 yang lebih 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>

Kemudian tambahkan kedua kode di bawah ini sebelum </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>

Simpan tema dan lihat hasilnya di blog sobat.


Sekian untuk tips Cara Memasang Tombol Go Up dan Go Down di Blog, semoga bermanfaat dan wassalam.
Portal Bola Online

Related Post

Portal Bola Online
Disqus Codes
  • To write a bold letter please use <strong></strong> or <b></b>
  • To write a italic letter please use <em></em> or <i></i>
  • To write a underline letter please use <u></u>
  • To write a strikethrought letter please use <strike></strike>
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>
    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Subscribe Our Newsletter

Notifications

Disqus Logo