CARA MEMBUAT BACK TO TOP BLOGGER ALA VIOMAGZ

Siapa yang tidak mengenal template legendaris buatan Mas Sugeng? Mereka para penggemarnya menyebutnya sebagai template sejuta umat. Template itu tidak hanya laris di beli tapi juga di 'bajak' ya melalui inspect elemen seorang yang memiliki pengatahuan koding akan mudah menjiplak template apapun.
back to top ala template blogger viomagz

Dalam kesempatan ini Saya ingin mengungkapkan cara membuat tombol back to top seperti pada template viomagz karena elemen buatan Mas Sugeng ini cukup reponsif dan menarik untuk di terapkan ke dalam template. Baiklah kita mulai.

1. Tambahkan CSS
  1. Masuk pengaturan blogger
  2. Pilih Tema
  3. Pilih  Edit Tema dan cari kode </head>
Letakan kode berikut di atas </head>:
<style>/* Back to top */
#back-to-top {
    background:rgb(249, 0, 255);
    color:blue;
    padding:0px 0px;
    font-size:24px;
    border-radius: 50px;
    box-shadow: 0 0px 0px 0 rgb(240, 255, 240), 0 1px 1px 0 rgb(240, 255, 240);
}
.back-to-top {
    position: fixed !important;
    position: absolute;
    bottom: 15px;
    right: 5px;
    z-index: 998;
}</style>

2. Tambahkan HTML/XML:

Masih di dalam opsi halaman Edit HTML (HTML Editor), cari kode <body> atau kode <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
Dan letakan kode berikut tepat di bawahnya:
<div class='back-to-top'><a href='#' id='back-to-top' title='back to top'>
    <svg style='width:24px;height:24px' viewBox='0 0 24 24'>
    <path d='M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M7.4,15.4L12,10.8L16.6,15.4L18,14L12,8L6,14L7.4,15.4Z' fill='#000000'/>
</svg>
</a></div>
3. Terakhir Tambahkan JavaScript

Cari kode </body> dan letakan kode JavaScript berikut tepat di atasnya:
 <script>           
$(window).scroll(function() {
    if($(this).scrollTop() &gt; 200) {
        $(&#39;#back-to-top&#39;).fadeIn();
    } else {
        $(&#39;#back-to-top&#39;).fadeOut();
    }
});
$(&#39;#back-to-top&#39;).hide().click(function() {
    $(&#39;html, body&#39;).animate({scrollTop:0}, 1000);
    return false;
});
</script>
Save template

Pada saat sekarang Mas Sugeng telah merilis template terbaru buatannya yakni Link Magz. Bedanya sama viomagz selain tampilan headernya, template ini menurut pembuatnya lebih di peruntukan untuk keperluan Jualan alias bisnis Online. Silahkan cari di Google.

Ikuti terus trik, tips, teknik hack dan kabar terupdate dari blog ini!

6 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. Thanks sudah berbagi..

    BalasHapus
  2. A great tutoring!
    I am so left behind, I have no idea about who is mas sugeng :)

    Thanks for sharing the tips and tricks.

    BalasHapus
    Balasan
    1. Everyone just have their interest and become the great one in their field, just only when he/she fight for it. And you have what we do not have..😊

      Hapus
  3. Wah keren nih bisa dicoba. Memang ya template Mas Sugeng tuh booming bgt. Hhh

    BalasHapus
  4. Caranya mudah sekali
    Bisa dipahami dan bisa langsung diterapkan
    Punya saya juga menggunakan kode yang hampir mirip dengan diatas
    Karena tombol back to top itu penting juga

    BalasHapus
Lebih baru Lebih lama

Formulir Kontak