CARA MEMBUAT BACK TO TOP SMOOTH MURNI CSS TANPA JAVASCRIPT

Javascript dapat membuat back to top bergerak halus pada saat tombol yang biasanya berada di bagian bawah kanan footer blog tersebut - pada saat di sentuh atau di pencet atau di tekan. Tombol juga hanya akan muncul setelah scrolling  pada ketinggian tertentu. Itulah fungsi Javascript.

Akan tetapi Javascript juga tidak dapat dihindari selalu memotong kecepatan loading sebuah halaman. Sementara CSS sudah semakin sakti dan bahkan dapat menggantikan beberapa fitur yang biasanya kita buat menggunakan Javascript.

Ada trik CSS untuk membuat back to top menjadi tetap smooth meskipun tanpa menggunanakan Javascript sebagai elemennya. Baik mari kita mulai membuatnya:

1. CSS

Dengan memanipulasi fitur animasi gerak yang kita kenali sebabai 'transition', kita dapat mengatur kecepatan gerakan tombol Back to top pada saat meng'scroll' halaman menuju ke atas. 

1. Masuk ke dasbor blogger ke pengaturannya.
2. Pilih tema
3. Pilih Edit HTML

Setelah berada di halaman editor HTML blogger, cari kode </head> letakan kode berikut di atasnya 

<style>html {scroll-behavior:smooth;} .backToTop {width:60px; height:60px; position:fixed; bottom:20px; right: 20px; z-index:99; cursor:pointer; border-radius:100px; transition:all .7s; background:rgba(444,555,0, 0.1)
url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center center;} .backToTop:hover {background:rgba(444,555,0, 0.5) url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center center;}</style>

2. HTML

Masih di dalam halaman editor blogger cari kode </body> dan letakan kode berikut di atasnya:

<a class='backToTop' href='#'/>

2. Save template blogger

Kelebihan:

Cepat karena tanpa:

• Tanpa Javascript
• Ikon SVG bukan font-awesome

Kekurangan:

Trik CSS memang dapat membuat tombol tidak terlihat setelah layar tidak disentuh dalam beberapa detik, namun hal itu untuk sementara hanya berlaku pada browser versi web/desktop. Sedangkan pada mobile masih belum keluar fiturnuya. 

Dan pada beberapa browser tua mungkin smooth berikut tampilan hiddennya tidak bekerja.

Tapi jangan kuatir CSS terus up to date, sedangkan browser tua semakin langka di pergunakan.

DEMO

Catatan Admin: Sekarang kami usahakan melengkapi setiap konten tutorial dengan peragaan video agar dapat lebih mudah di cerna. Jika tutorial di atas kurang di mengerti mungkin tayangan video berikut akan memperjelasnya:

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

SHARE YA:

Cara membuat back to top ringan ala editblogtema

Back to top adalah sebuah tombol yang pada umumnya di letakan di bagian kiri paling bawah halaman blog, tepatnya di sebelah ujung paling kiri bagian footer paling bawah. Kegunaan atau fungsinya adalah untuk menscrool halaman kembali ke bagian atas dengan cepat hanya dengan cara mengklik tombol tersebut.

Jadi benar benar jelas dia berfungsi membantu menavigasi halaman agar lebih cepat kembali ke halaman awal yang letaknya di bagian bawah header blog. 

Terutama jika menimbang untuk membantu pengunjung kembali dengan cepat ke atas hanya dengan cara mengklik sebuah tombol alih alih menscrolling halaman kembali ke atas menggunakan mouse atau menggeser di layar sentuh yang membutuhkan waktu lama, khususnya pada sebuah artikel atau konten yang di tulis sangat panjang.

Gambar di atas adalah tombol yang di pergunakan oleh halaman blog ini, yakni back to top ala editblogtema yang di buat dan di ramu berdasarkan contoh contoh tombol back to top yang telah ada, namun di sederhanakan, di ringkas agar lebih ringan dan fast loading. Misalnya membuang ikon font awesome berikut link pemanggilnya, membuang link img dan menggantikannya dengan SVG icon yang lebih alami jika di embed ke dalam HTML.

Cara membuatnya:

Tambahkan kode ajax berikut ke atas kode </head> jika belum ada di dalam template Anda (abaikan jika sudah ada):

 <script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'/>

1. Tambahkan CSS

Copy CSS berikut dan letakan di atas tag penutup </head> di dalam pengaturan editor HTML blogger blogspot Anda.

<style> /* Tombol kembali ke atas*/

#back-to-top{background:transparent;color:#CC00CC;padding:0px 0px;font-size:10px}

.back-to-top{position:fixed!important;position:absolute;bottom:0px;right:1px;z-index:9000}</style>

Keterangan: Kita dapat merobah warna dengan mengganti kode warna yang di merahkan.

2. Tambahkan HTML /JS

Copy kode berikut dan letakan di atas tag penutup </body> masih di dalam pengaturan editor HTML blogger blogspot Anda.

  <div class='back-to-top'><a href='#' id='back-to-top' title='back to top'>kembali ke atas

<svg style='width:24px;height:18px' viewBox='0 0 24 18'>

    <path d='M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z' fill='currentColor'/>

</svg>

</a></div>

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

Lalu save template.

Anda juga bisa membuat tombol back to top atau tombol kembali ke atas menggunakan CSS, HTML dan JS dengan mudah tanpa menggunakan link eksternal seperti contoh yang telah kami lakukan di atas. Contoh pembuatan scrolling back top ini juga dapat di pelajari di w3school. Namun bagaimana tampilannya (desainnya) itu tergantung daya kreativitas Anda sendiri.

Sebenarnya cara pembuatannya sama saja dengan cara pembuatan tombol back to top template viomagz-nya Mas Sugeng.

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

SHARE YA:

Cara membuat back to top ringan

Telah banyak trik pembuatan back to top oleh para master, semua tujuan sama, yakni: Tombol Back to Top itu di tujukan sebagai tombol navigasi halaman. Letaknya bisasanya di bagian bawah sebelah kiri halaman web atau blog kita, ia muncul terutama pada saat halaman di scroll ke bawah berupa tanda panah menuju ke atas dan apabila di klik halaman akan meluncur kembali ke atas seperti awal di buka.

Yang membedakan tombol back to top dengan tombol sama yang lain adalah:

• Bentuknya
• warnanya
• kecepatannya

Saya menyarankan kalian memilih yang sederhana saja lagi cepat adapun hal yang mungkin membuat Tombol back to top jadi memberatkan kecepatan loading blog adalah:

1. Menggunakan ikon awesome, karena ikon ini menyertakan script pemanggil yang dapat memblokir kecepatan halaman blog pada saat merender data.
2. Menggunakan Javascript, karena penggunaan Javascript yang berlebihan dapat memblokir kecepatan halaman blog secara signifikan.

Bayangkan tombol back to top yang di buat dengan dua musuh kecepatan diatas.

Nah saya akan memberikan tutrorial berdasarkan halaman w3school yang sedikit saya modifikasi sumber kodenya. Ikon back to top ini menggunakan ikon SVG sebagai tombol panahnya.

1. Tambahkan CSS.

Masuk ke pengaturan dasbor blogger

Pilih Tema

Pilih Edit HTML

Cari kode ]]></b:skin>

Lalu copy dan pastekan kode berikut ke atas kode ]]></b:skin> tadi.

body {

  font-family: IM Fell English, Helvetica, sans-serif;

  font-size: 20px;

}

#myBtn {

  display: none;

  position: fixed;

  bottom: 20px;

  right: 1px;

  z-index: 99;

  font-size: 18px;

  border: none;

  outline: none;

  background-color: transparent;

  color: black;

  cursor: pointer;

  padding: 0px;

  border-radius: 4px;

}

#myBtn:hover {

  background-color: #555;

}

2. Tambahkan Ikon SVG.

Masih di dalam halaman editor HTML blogger cari kode <body> atau <body...dengan sambungan..>. Lalu copy kode berikut dan pastekan di atas kode <body> tersebut.

<button id='myBtn' onclick='topFunction()' title='Go to top'><svg style='width:44px;height:44px' viewBox='0 0 24 24'>
<path d='M16.59,9.42L12,4.83L7.41,9.42L6,8L12,2L18,8L16.59,9.42M16.59,15.42L12,10.83L7.41,15.42L6,14L12,8L18,14L16.59,15.42M16.59,21.42L12,16.83L7.41,21.42L6,20L12,14L18,20L16.59,21.42Z' fill='#60c'/>
</svg></button>

3. Tambahkan Javascript

Sekarang cari kode </body> dan copy kode berikut di bawah ini lalu pastekan tepat di atasnya:

<script> //Get the button

var mybutton = document.getElementById(&quot;myBtn&quot;);

// When the user scrolls down 20px from the top of the document, show the button

window.onscroll = function() {scrollFunction()};

function scrollFunction() {

  if (document.body.scrollTop &gt; 20 || document.documentElement.scrollTop &gt; 20) {

    mybutton.style.display = &quot;block&quot;;

  } else {

    mybutton.style.display = &quot;none&quot;;

  }

}

// When the user clicks on the button, scroll to the top of the document

function topFunction() {

  document.body.scrollTop = 0;

  document.documentElement.scrollTop = 0;

}

</script>

Save Template.

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

SHARE YA:

CARA MEMBUAT BACK TO TOP UNTUK BLOGGER TANPA CSS DAN TANPA JAVASCRIPT

CSS memang relatif lebih ringan daripada Javascript namun pada saat render mereka ini memblokir kecepatan halaman blog menuju server karena banyaknya tautan penghubung ke dalam librari librari di website mereka masing masing. Terutama jika elemen dari fitur yang dibuat terbebani oleh link link misalnya link awesome untuk menampilkan ikon yang cantik, link jquerry untuk tombol ekspresi dan reaktifnya. Pokoknya mereka yang sebenarnya terpisah dari sistem internal HTML inti Blogger itu sendiri. Harus dipanggil untuk mengaktifkannya.

Bahkan sebuah fitur 'Back To Top' sebuah tombol kecil yang di klik untuk mengembalikan halaman dengan cepat ke atas, memiliki tiga hal berikut:

1. Kode CSS.
2. Kode Javascript, jquery.
3. Link font Awesome, atau link provider ikon lainnya.

Ketiga hal di atas terbukti racun yang ampuh menyakiti dan sekaligus melukai kecepatan halaman blog kita - terutama jika kita mempercayai bahwa elemen kecepatan adalah salah satu faktor SEO yang penting, hingga Google sempat meng-anak emaskan halaman AMP oleh karena demi kecepatan ini.

Akan tetapi apakah tidak bisa membuat tombol yang dapat di klik dan mengembalikan halaman yang sudah di scroll jauh kebawah untuk halaman blogger? Bisa asalkan kalian tetap mengutamakan kesederhanaan.

Jika kalian menggunakan salah satu dari 4 template terbaru:

1. Contempo cari kode:  <b:template-script async='true' name='indie' version='1.0.0'/>
2. Emporio cari kode:  <b:template-script async='true' name='vegeclub' version='1.0.0'/>
3. Soho cari kode: <b:template-script async='true' name='fancy' version='1.0.0'/>
4. Notable cari kode: <b:template-script async='true' name='rockpool' version='1.0.0'/>

Maka letakan saja kode berikut di atas masing masing pada salah satu dari 4 kode di atas tadi:

<a class='trans color-hover' href='#' id='jump-top-button'>
<center><span class='block black color-hover'><abbr title='klik untuk kembali ke atas'><svg style='width:34px;height:34px' viewBox='0 0 24 24'>
<path d='M13,18H11V10L7.5,13.5L6.08,12.08L12,6.16L17.92,12.08L16.5,13.5L13,10V18M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z' fill='currentColor'/>
</svg></abbr></span>
<span class='block color-hover upper'/></center>
</a>

Lalu save template.

Kelebihan menggunakan matode ini adalah: Tombolnya simple, cepat dan tidak mempengaruhi kecepatan. Sedangkan kekurangannya adalah tidak stylish. Namun bagi Kalian yang mengusung kesederhanaan model ini tampaknya akan cocok.

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

SHARE YA:

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.

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!

SHARE YA:

CARA MEMBUAT BACK TO TOP BLOGGER TANPA JAVASCRIPT

Para blogger sering menyebutnya tombol 'back to top' sedangkan kalau kita belajar HTML, CSS dan JS melalui w3School terdapat tutorial membuatnya dengan nama: "How TO - Scroll Back To Top Button" namun walau menggunakan desain, elemen dan material bersih (clean) saya tetap merasa keberatan menggunakannya, mengapa? karena dia menggunakan JavaScript.

scroll to top button - image by Microsoft.com

JavaScript itu penting sebagai bagian dari material dan elemen desain. Tapi memasukan terlalu banyak JavaScript ke dalam template bisa mengakibatkan berkurangnya kecepatan loading halaman blog. Bahkan pada bagian yang dapat di tambahkan dengan atribut "asynchronize' sekalipun, tetap saja memblokir kecepatan loading blog.

Gunanya back to top
Gunanya back to top adalah sebagai tombol pintas agar dengan cepat pengunjung kembali ke halaman atas konten setelah scroll halaman hingga jauh ke bawah. Karena begitu tombol back to top di tekan, halaman akan scrolling ke atas secepat kilat.

Halaman internet terutama blog pada masa sekarang ibarat sebuah buku digital yang terkadang membuat pengunjung ingin kembali ke halaman atas dimana navbar yang berisikan menu navigasi halaman berada. Mungkin ini pula alasannya mengapa sebagian template memiliki navbar 'fixed' seperti viomagz, atau sticky, seperti editblogtema.

CARA PERTAMA (DENGAN JAVASCRIPT)
Jika menggunakan cara standar menurut tutorial dari w3school adalah sebagai berikut:

1. Masukan CSS berikut di atas </head> di dalam editor HTML blogger kalian:

<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
#myBtn:hover {
background-color: #555;
}
</style>

 2. Masih di dalam halaman editor HTML blogger cari kode <body> atau  <body class='container'> letakan kode HTML berikut tepat di bawahnya:

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>

3. Terakhir masih di dalam halaman editor HTML blogger cari kode </body> dan letakan kode Javascript berikut tepat di atasnya:

<script>
var mybutton = document.getElementById("myBtn");
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>

Save template. Kalian perhatikan cara ini melibatkan Javascript untuk membantu reaksi tombol 'back to top'. Dan ini yang paling sering di tawarkan oleh tutorial jika kita mencarinya melalui pencarian Google di internet. Saya mencoba menghilangkan JavaScript melalui cara kedua di bawah berikut.

CARA KEDUA (TANPA JAVASCRIPT)
1. Masuk kepengaturan blogger dan pilih tema lalu pilih Edit HTML. Di dalam halaman editor HTML cari kode </body> dan letakan kode HTML berikut tepat di atasnya:

<button id='myBtn'><a href='#top' style='color: white'>Top</a></button>

2. Masih di dalam opsi edit HTML, di dalam halaman editor HTML cari kode </head> dan letakan kode CSS berikut tepat di atasnya:

<style>
#myBtn {
position: fixed;
bottom: 10px;
float: right;
right: 0.5%;
left: 95.25%;
max-width: 30px;
width: 100%;
font-size: 12px;
border-color: rgba(85, 85, 85, 0.2);
background-color: rgb(240, 255, 240);
padding: .5px;
border-radius: 4px;
z-index: 200;
}
/*On Hover Color Change*/
#myBtn:hover {
background-color: #7dbbf1;
}
</style>

Save tema. Selesai.

Jika kalian menginginkan back to top dalam bentuk ikon panah atau lainnya, saya anjurkan kalian tidak menggunakan ikon dari font awsome, lagi lagi karena ia dapat mengurangi (merugikan) kecepatan laoding blog hingga 20%, lebih baik gunakan ikon SVG, kalian dapat merubah 'TOP' dengan ikon, contohnya:

Sebelum: <button id='myBtn'><a href='#top' style='color: white'>Top</a></button>

Sesudah: <button id='myBtn'><a href='#top' style='color: white'><svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="currentColor" d="M16.59,9.42L12,4.83L7.41,9.42L6,8L12,2L18,8L16.59,9.42M16.59,15.42L12,10.83L7.41,15.42L6,14L12,8L18,14L16.59,15.42M16.59,21.42L12,16.83L7.41,21.42L6,20L12,14L18,20L16.59,21.42Z" />
</svg></a></button>

CARA PEMASANGAN PALING MUDAH:

1. Masuk ke pengaturan blogger.
2. Pilih tata-letak (layout)
3. Pilih 'tambahkan gagdet'
4. Pilih gagdet HTML/Javascript
5. Pada blanko kosong widget HTML/Javascript yang telah muncul tersebut, letakan seluruh kode berikut ke dalamnya:

<style>
#myBtn {
position: fixed;
bottom: 10px;
float: right;
right: 0.5%;
left: 95.25%;
max-width: 30px;
width: 100%;
font-size: 12px;
border-color: rgba(249, 0, 255);
background-color: rgb(240, 255, 240);
padding: .5px;
border-radius: 4px;
z-index: 200;
}
/*On Hover Color Change*/
#myBtn:hover {
background-color: #7dbbf1;
}
</style>
<button id='myBtn'><a href='#top' style='color: white'><svg style="width:24px;height:24px" viewbox="0 0 24 24"><path fill="rgb(249, 0, 255)" d="M16.59,9.42L12,4.83L7.41,9.42L6,8L12,2L18,8L16.59,9.42M16.59,15.42L12,10.83L7.41,15.42L6,14L12,8L18,14L16.59,15.42M16.59,21.42L12,16.83L7.41,21.42L6,20L12,14L18,20L16.59,21.42Z" />
</path></svg></a></button>

Lalu geser widget hingga ke bagian footer paling bawah tataletak blogger. Dan Save template. Jangan lupa kosongkan judul ya.

Gambar gadet atau widget HTML/Javascript blogger

Lihat DEMO

Seperti yang kalian lihat fungsi Javasrcipt hanya untuk menyembunyikan elemen pada saat scroll sampai pada batas tertentu ke bagian atas konten. Namun menurut saya itu tidak terlalu penting. Lagipula kalian dapat membuat ikon yang stylish untuk membuatnya layak dan menarik di tampilkan. Misalnya mengapa tidak meletakan photo profile sebagai back to top? Itu hanya contoh, namun pada akhirnya tergantung selera masing masing orang...

SHARE YA:

Membuat ikon sosial plus back to top tanpa javascript

Back to top

Kalian tahu, JavaScript dan ikon pihak ketiga juga ikon font awsome, bootstrap dan sebagainya itu sangat memperlambat loading halaman blog?, Sedangkan back to top kebanyakan memerlukan JavaScript untuk tindakannya ditambah dengan ikon panah menunjuk keatas dengan warna kesukaan kita menggunakan font awsome, lengkaplah sudah menjadi beban yang melukai halaman blog kita .

Akan tetapi jika kalian hanya menginginkan sebuah tombol "back to top" tanpa "action" dan hanya membutuhkan panah menunjuk ke atas yang ketika di klik oleh pembaca akan mengembalikan konten ke awal baca, kalian bisa mencoba trik sederhana ini.Yang perlu kalian ketahui adalah disini:

Jika kita hanya membutuhkan kecepatan blog mobile klasik (non AMP) maka kita harus menyederhanakannya diantaranya melalui cara:Menyederhanakan template. Jika perlu tidak memasang gadget/widget berlebihan, mengurangi penggunaan javascript dan mengganti ikon ikon pihak ketiga dengan ikon ikon SVG alami ala bawaan blogger.

• Mengurangi penggunaan JavaScript, CSS Style
• Menghindari pemakaian link pemanggil pemasangan ikon.

Jadi back to top yang kita gunakan disini harus menghindari penggunaan JavaScript dan Ikon kecuali ikon SVG seperti bawaan asli blogger. Penggunaan ikon SVG nyaris tidak mempengaruhi kecepatan loading halaman web atau halaman blog kalian.

Cara penggunaannya mudah kalian bisa mengunjungi situs ikon SVG dan mengambil materialnya untuk di pasang di blog kalian melaui URL di bawah ini:

https://materialdesignicons.com

Langkah pertama:

Untuk berjaga jaga backup terlebih dahulu template kalian.

Untuk empat template blogger terbaru seperti contempo, dan notable, terdapat untaian kode HTML sebagai berikut di dalam template (akses melalui edit HTML):

<b:include name='snippetedPostContent'/>
</article>
</b:loop>
</div>
</b:includable>
</b:widget>
</b:section></aside>
<div style='clear:both;'/>
<b:section class='footer' id='footer' name='Footer' showaddelement='false' tag='footer'/>

Kalian bisa memasukan kode dibawah berikut tepat dibawah kode yang telah saya sorot (highlight) warna kuning:

<div class='menuku-wrap'>
<div class='menuku'>
<ul>
<ul>
<li><a href='https://www.editblogtema.net/p/contempo-re-desain-d-o-you-want-this.html' title='About'>About</a></li>
<li><a href='https://mail.google.com/mail/mu/#' title='Contact'>contact</a></li>
<li><a href='https://www.editblogtema.net/p/privacy-policy-for-editblogtema-if-you.html' title='Privacy'>Privacy</a></li>
</ul>
</ul>
</div></div>
<div class='editblog'><div class='editblogsocial-icons'> <ul> <li class='social-facebook'><a href='https://www.facebook.com/AnissaSufyan/' target='_blank' title='Facebook'>Facebook</a></li> <li class='social-twitter'><a href='https://twitter.com/sufyan331?s=09' target='_blank' title='Twitter'>Twitter</a></li> <li class='social-instagram'><a href='https://www.instagram.com/sufyan_yaan/?hl=en' target='_blank' title='Instagram'>Google+</a></li> <li class='social-pinterest'><a href='https://id.pinterest.com/sufyan_yaan/' target='_blank' title='Pinterest'>Pinterest</a></li> <li class='social-rss'><a href='https://www.google.com/bookmarks/' target='_blank' title='RSS'>RSS</a></li> <li class='social-youtube'><a href='https://www.youtube.com/user/Nayfus1' target='_blank' title='youtube'>youtube</a></li></ul>
<center><b:section id='bagiankaki1'/>Copyright &#169; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>. All rights reserved.
Designed by: editblogtema
<h6><a href='#'><svg style='width:54px;height:54px' 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='#FF0000'/>Back to top
</svg></a></h6></center>
</div>
</div></div>

Atau kalian bisa meletakannya sebelum atau di atas kode:

<b:template-script async='true' name='indie'.....

 Langkah kedua:

Letakan kode berikut sebelum kode </head>:

<style>.editblog {
background-color:#ffffff;
width:100%;margin:0 auto;
height: auto%;
padding: 5px;
box-shadow: none;
z-index:99;
}
.editblogsocial-icons {
overflow: hidden;
text-align: center;
border-bottom: 1px solid rgb(133, 133, 133);
width: 230px;
display: block;
margin: 20px auto;
}
.editblogsocial-icons ul {
margin: 0px auto !important;
text-align: center;
padding: 0px !important;
display: inline-block;
}
.editblogsocial-icons ul li {
background: transparent none repeat scroll 0% 0% !important;
border: medium none !important;
float: left;
list-style-type: none !important;
padding: 0px !important;
margin: 0px 2px !important;
}
.editblogsocial-icons ul li::before,
.editblogsocial-icons ul li::after {
display: none !important;
}
.editblogsocial-icons ul li a, .editblogsocial-icons ul li a:hover {
background: url(&quot;https://1.bp.blogspot.com/-T7Y0K9Ju3Vw/XYRZ0GVFRgI/AAAAAAAAoYs/tgpptcUCA-4WBbwyzD5s7SRI8r4upv39ACLcBGAsYHQ/s1600/pukihanim.png&quot;) no-repeat scroll 0 0;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
display: block;
height: 34px;
overflow: hidden;
text-indent: -999px;
transition: all 0.25s linear 0s;
width: 34px;
}
.editblogsocial-icons ul li.social-facebook a {
background-position: -62px 1px;
}
.editblogsocial-icons ul li.social-facebook a:hover {
background-color: #3b5998;
display: red;
}
.editblogsocial-icons ul li.social-twitter a {
background-position: -254px 1px;
}
.editblogsocial-icons ul li.social-twitter a:hover {
background-color: #00aced;
}
.editblogsocial-icons ul li.social-instagram a {
background-position: 0px 0px;
}
.editblogsocial-icons ul li.social-instagram a:hover {
background-color: #FF1493;
}
.editblogsocial-icons ul li.social-pinterest a {
background-position: -160px 1px;
}
.editblogsocial-icons ul li.social-pinterest a:hover {
background-color: #cb2027;
}
.editblogsocial-icons ul li.social-rss a {
background-position: -190px 0px;
}
.editblogsocial-icons ul li.social-rss a:hover {
background-color: #F87E12;
}
.editblogsocial-icons ul li.social-youtube a {
background-position: -287px 1px;
}
.editblogsocial-icons ul li.social-youtube a:hover {
background-color: #7FFF00;
}
body {margin:0;font-family:&#39;Mansalva&#39;, cursive;}

Janga lupa save template.

www.editblogtema.net

SHARE YA:

CARA MEMBUAT BACK TO TOP DENGAN CSS

Back To Top adalah tombol yang dapat di pencet atau di klik untuk mengembalikan halaman sebuah blog kembali ke atas, biasanya akan muncul di bawah sebelah kanan halaman apabila halaman di scroll  ke bawah.

Selama ini saya membuatnya menggunakan elemen HTML+CSS+JavaScript+link eksternal dan memanfaatkan link awsome untuk menampilkan ikon panah menunjuk keatas atau ikon "chevron up". Tetapi bagaimana jika saya tidak ingin lagi menggunakan link gambar atau image, dan membuang link awsome dari template halaman web kita? Pasti tampilan Back To Top yang telah saya buat itu hilang namun masih meninggalkan kode kode yang tidak lagi dapat dibaca oleh template saya.

Tujuan saya membuang link-link Awsome dan menghindari terlalu banyak link eksternal untuk image adalah agar template buatan saya menjadi lebih simple, fast loading dan bersih. Lalu bagaimana saya mengganti tombol back to top?

MENGGUNAKAN ELEMEN HTML CSS

Jangan kuatir, manfaatkan saja elemen dasar HTML terutama CSS, cara membuatnya adalah sebagai berikut:

1. Masuk kepengaturan blogger
2. Pilih tema
3. Pilih edit HTML

Jika sudah masuk kehalaman HTML editor, cari kode </head> lalu copy dan pastekan kode CSS  berikut diatas kode </head> tadi:

<style>

body {

  font-family: Arial, Helvetica, sans-serif;

  font-size: 20px;

}

#myBtn {

  display: none;

  position: fixed;

  bottom: 20px;

  right: 30px;

  z-index: 99;

  font-size: 18px;

  border: none;

  outline: none;

  background-color: light-grey;

  color: white;

  cursor: pointer;

  padding: 15px;

  border-radius: 4px;

}

#myBtn:hover {

  background-color: #333;

}

</style>

Masih melalui halaman HTML editor, cari kode <body> atau <body...(tanpa tutup)  kalau tidak ada pada template sobat pastekan saja dibawah </head> kodenya dibawah ini:

<button id='myBtn' onclick='topFunction()' title='Go to top'>🔺</button>

Keterangan: Image merah adalah simbol yang sifatnya sama seperti huruf biasa namun memiliki visual sebuah ikon.

Terakhir cari kode </body> dan lalu copy dan pastekan kode berikut di atasnya:

<script>

window.onscroll = function() {scrollFunction()};

function scrollFunction() {

  if (document.body.scrollTop &gt; 20 || document.documentElement.scrollTop &gt; 20) {

    document.getElementById(&quot;myBtn&quot;).style.display = &quot;block&quot;;

  } else {

    document.getElementById(&quot;myBtn&quot;).style.display = &quot;none&quot;;

  }

}

function topFunction() {

  document.body.scrollTop = 0;

  document.documentElement.scrollTop = 0;

}

</script>

Cara ini ternyata dapat mengurangi beban loading pada halaman blog, karena bebas dari link seperti awsome dan link image :

1. Tanpa link awsome
2. Tanpa link eksternal image
3. Ringan sekali

DEMO

www.editblogtema.net

SHARE YA: