Memasang Tombol Back To Top di Blog

1/13/2016
hosting murah
Memasang Tombol Back To Top di Blog - Kali ini Arlina Design akan share tombol back to top yang lebih sederhana. Bagi Anda yang ingin memasang tombol kembali ke atas atau back to top, di sini Saya akan berbagi bagaimana cara memasang kode itu di blog Anda.

Memasang Tombol Back To Top di Blog

Walaupun tombol ini cukup sederhana, tetapi menurut Saya terasa sangat menarik dan minimalis. Tombol ini nantinya akan muncul di pojok bawah kanan blog Anda. Oke! Langsung saja kita menuju tutorial :

1. Login ke Blogger > Klik Template > Edit HTML > Tambahkan kode di bawah ini tepat di atas kode ]]></b:skin> atau </style>

/* Back To Top */
.backtotop{display:none}.backtotop{position:fixed;bottom:50px;right:0;cursor:pointer;font-weight:bold;box-shadow:-5px 5px rgba(0,0,0,.1);padding:10px;background-color:#fff;opacity:.6}.backtotop span{background-image:url(https://2.bp.blogspot.com/-QLZM-aUhB6w/VyL3AeOfEfI/AAAAAAAADBU/g6Ff-NvsU_c3ZZn3LM0luDDCRnQjzEK9wCLcB/s1600/icon.png);background-position:0 -272px;background-repeat:no-repeat;height:25px;width:22px;display:inline-block;vertical-align:middle;margin-right:5px }.backtotop:hover{opacity:1}

2. Setelah itu tambahkan kode di bawah ini tepat sebelum kode </body>

<div class="backtotop hide"><span></span>Atas</div>
<script type='text/javascript'>
$(function(){$(window).scroll(function(){$(this).scrollTop()>100?$(".backtotop").fadeIn():$(".backtotop").fadeOut()}),$(".backtotop").click(function(){return $("html,body").animate({scrollTop:0},800),!1})});
</script>

3. Terakhir simpan template dan lihat hasilnya.

Artikel Terkait

Next Article
« Prev Post
Previous Article
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

Disqus
Tambahkan komentar Anda

No comments

Silakan tambahkan komentar sesuai dengan topik dan komentar dengan link akan dihapus, terima kasih.