Tutorial Cara Memasang Tombol Go Up & Go Down di Blog
Amaterasublog – Hallo teman-teman bloggers, pada kesempatan kali ini saya akan membahas tutorial blogging Cara Memasang Tombol Go Up & Go Down di Blog.
Fungsi dari Tombol Go Up & Go Down di Blog adalah dapat memudahkan para pembaca konten artikel di blog kita, untuk menuju ke atas atau ke bawah pada bagian halaman tanpa harus men-scroll secara manual. Apalagi jika situs blog kita memuat konten artikel yang panjang-panjang, maka tombol go up & go down ini sangat dianjurkan untuk dipasang.
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 terpasang teman-teman bisa copy kode 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>
Cara Mudah Memasang Tombol Go Up & Go Down di Blogspot
<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