Tutorial Cara Memasang Tombol Go Up & Go Down di Blog
amaterasublog.com - Halo teman-teman blogger! dan selamat datang di amaterasublog. Pada kesempatan kali ini saya akan mengulas tutorial blogging Cara Memasang Tombol Go Up & Go Down di Blog.
Fungsi dari Tombol Go Up & Go Down pada suatu blog yaitu dapat memudahkan para pengunjung (pembaca) untuk menuju ke bagian atas atau ke bagian paling bawah halaman blog tanpa harus men-scroll secara manual. Apalagi jika situs blog yang kita miliki banyak memuat konten artikel yang panjang-panjang, maka memasang fitur tombol ini menjadi sangat direkomendasikan.
Nah, bagi teman-teman blogger yang ingin memasang Tombol Go Up & Go Down di blog, silahkan ikuti tutorial di bawah ini:
Note : Jika teman-teman ingin memasang tombol go up & go down seperti yang saya pasang juga di blog ini, pastikan blog teman-teman sudah terpasang link FontAwesome. Jika belum, silahkan pasang terlebih dahulu atau bisa copy kode skrip di bawah ini dan tempelkan sebelum 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>
Tutorial Cara Memasang Tombol Go Up & Go Down di Blogspot
Tutorial:
<style type='text/css'>
/* Go Up and Go Down */
#gotop,#gobottom{background:#4267b2;margin:0;padding:5px 15px 0;border-radius:0;position:fixed;color:#fff;bottom:0;cursor:pointer;display:none;line-height:2;backface-visibility:hidden;-webkit-transform:translateZ(0);transform:translateZ(0);transition:all .3s}#gotop:hover,#gobottom:hover{background:#6bc9f9}#gotop{right:40px;}#gobottom{background:#282480;right:0}
@media only screen and (max-width:768px){#gotop{right:43px}}
</style>
<div id='downfooter'/>
<a href='#' id='gotop'><i class='fa fa-chevron-up' title='Go Up'/></a><a href='#' id='gobottom'><i class='fa fa-chevron-down' title='Go Down'/></a>
<script type='text/javascript'>
//<![CDATA[
// Go Up and Go Down
!function(o){o(window).scroll(function(){o(this).scrollTop()>75?(o("#gotop").removeAttr("href"),o("#gotop").fadeIn()):o("#gotop").fadeOut()}),o(function(){o("#gotop").click(function(){return o("html, body").animate({scrollTop:0},"slow"),!1})})}(jQuery),function(o){o(window).scroll(function(){o(this).scrollTop()<0?(o("#gobottom").removeAttr("href"),o("#gobottom").fadeOut()):o("#gobottom").fadeIn()}),o(function(){o("#gobottom").click(function(){return o("html, body").animate({scrollTop:$("#downfooter").offset().top},"slow"),!1})})}(jQuery);
//]]>
</script>
wajib dicoba
BalasHapusAku kira caranya susah, ternyata cukup mudah ya. Makasih infonya.
BalasHapusCari cari tutorialnya di google Alhamdulillah dapet disini
BalasHapusmakasih kode go up dan down nya mas. keren parah, tombolnya smooth banget
BalasHapusBerkat tutorial ini, saya bisa langsung mencobanya di blog dan ternyata 100% work, min..
BalasHapusJd kga ssh2 lg klo mau lihat postingan ke bawah ataupun sebaliknya
Makasih banyak, min