Lompat ke konten Lompat ke sidebar Lompat ke footer

√ Cara Menciptakan Navigasi Kembali Keatas (Back To Top Responsif) Di Blog

Memasang back To Top atau yang sering kita lihat yakni navigasi kembali ke atas merupakan Navigasi yang sangat penting untuk kita terapkan, khususnya Untuk mempermudah pengguna kembali ke paragraf pertama.

Apalagi jikalau anda mempunyai Postingan Yang super duper panjang dan mempunyai banyak paragraf, tentunya menerapkan atau memasang Tombol Back To Top ini wajib anda pasang pada website/blog yang anda miliki.

Jadi, sehabis anda pasang back To Top ini akan mempermudah visitor atau pengunjung kembali ke atas / paragraf pertama.

Kebayang gak si, kalo anda menemukan Artikel yang super duper panjang dan tidak ada Navigasi Back To Top-nya?? Pasti nggeser-geser layar ke atas nya cukup mengesalkan, meskipun kala kini semua Gadget udah banyak aplikasi yang support back To Top, namun anda perlu memasangnya semoga tampilan lebih komplit dan mudah.
Jika anda tertarik untuk memasangnya di blog ataupun di website, silakan ikuti langkah-langkahnya berikut ini:

1. Login ke Blog
2. Pilih >> Theme/Template
3. Pilih >> Edit HTML
4. lalu carilah Kode dibawah ini
]]></b:skin>
Untuk mempermudah pencarian instruksi tersebut, silakan gunakan CTRL+F untuk menemukanya.

Jika sudah ketemu, silakan Copy Kode dibawah ini dan Letakan sempurna diatas instruksi  ]]></b:skin> tersebut.

/* Back To Top .Blogspot.com */ #ignielToTop {display:none;z-index:2;position:fixed;bottom:20px;right:20px;border-radius:2px;cursor:pointer;transition:all .4s;width:45px;height:45px;background:#008c5f 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} #ignielToTop:hover{background:#2f303f 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}

Jika sudah, selanjutnya silakan cari instruksi dibawah ini:
</body>
Untuk mempermudah pencarian kode, gunakan CTRL+F.
Jika sudah ketemu, silakan Copy Kode dibawah ini dan letakan sempurna diatas </body> tersebut.


<div id='ignielToTop'/> <script> //<![CDATA[ /* Back To Top syilent.blogspot.com */ var igniel_kecepatan = 300; //kecepatan scroll var igniel_jarak = 300; //posisi munculnya tombol eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('f 7=["\\h\\a\\g\\h\\F","\\C\\h\\w\\c\\a\\a\\l\\c\\v","\\e\\c\\h\\K\\p\\9\\d\\b\\m\\a\\9\\p\\9\\d\\b","\\G\\c\\e\\q","\\J\\e\\e\\m\\I\\9\\d\\b\\H\\g\\C\\b\\9\\d\\9\\w","\\g\\u\\d\\g\\9\\a\\l\\c\\l\\c\\v","\\u\\9\\b\\m\\a\\9\\p\\9\\d\\b\\M\\q\\U\\e"];8[7[6]](7[5])[7[4]](7[0],j x(){f i=8[7[2]][7[1]]||8[7[3]][7[1]];o(k<=0){s};f r=0-i;f t=r/k*X;L(j(){8[7[3]][7[1]]=8[7[2]][7[1]]=i+t;o(i==0){s};x(8[7[3]],0,k)},P)},Q);B.Y(\'O\',j(){o(B.N>=n||8.R.z>=n||8.W.z>=n){8.y(\'A\').E.D=\'V\'}T{8.y(\'A\').E.D=\'S\'}});',61,61,'|||||||_0x3e17|document|x65|x6C|x74|x6F|x6E|x64|var|x69|x63|_0x2ceax2|function|igniel_kecepatan|x54|x45|igniel_jarak|if|x6D|x79|_0x2ceax3|return|_0x2ceax4|x67|x70|x72|ignielScroll|getElementById|scrollTop|ignielToTop|window|x73|display|style|x6B|x62|x4C|x76|x61|x75|setTimeout|x42|pageYOffset|scroll|10|false|documentElement|none|else|x49|block|body|50|addEventListener'.split('|'),0,{})); //]]></script>
Jika sudah, silakan Save dan Lihat Hasilnya..

Nah itulah cara menciptakan Tombol Scroll back To Top untuk Blog / website.

Semoga bermanfaat.
Sumber https://syilent.blogspot.com/