Membuat Tombol Back To Top Keren Di Blog

Halo gimana kabar nih? kali ini Tut-Blogger mau berbagi nih bagaimana "Membuat Tombol Back To Top Keren Di Blog".
Tombol back to top ini mudah sekali di buat kok, gak ribet-ribet amat. Fungsinya pasti sudah pada tau dong buat apa.. Ya,tentunya tombol ini berfungsi memudahkan pengunjung untuk langsung ke halaman atas seperti sama halnya jika kita menekan tombol Home pada keyboard.

Tombolnya tidak seperti gambar disamping,jika ingin melihat silahkan saja lihat tombol back to top yang ada blog ini, bagaimana keren kan?

Untuk cara membuatnya silahkan simak dan perhatikan cara-cara dibawah ini :

1. Sudah pasti kita harus login ke Blogger dahulu...

2. Setelah login, kita langsung menuju template dan klik edit template.



3. Setelah itu silahkan copy dan pastekan semua script CSS yg ada, diatas  ]]></b:skin> atau </style>

/* 'Top' Link */
#gotop {display:block;cursor:pointer;position:fixed !important;position:absolute;bottom:-40px;right:-40px;z-index:999;background-color:#067BAF;background-image:-webkit-radial-gradient(top,#2493C4,#086A95);background-image:-moz-radial-gradient(top,#2493C4,#086A95);background-image:-ms-radial-gradient(top,#2493C4,#086A95);background-image:-o-radial-gradient(top,#2493C4,#086A95);background-image:radial-gradient(top,#2493C4,#086A95);-webkit-border-radius:10px 0 0 0;-moz-border-radius:10px 0 0 0;border-radius:10px 0 0 0;border:1px solid #144F69;width:30px;height:30px;overflow:hidden;text-indent:-9999px;-webkit-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black; -moz-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;}
#gotop:after {content:"";display:block;width:0;height:0; border-width:10px 4px;border-style:solid;border-color:transparent transparent #C3D1D7 transparent;position:absolute;top:0;left:11px;}
#gotop:focus {outline:none}
#gotop:hover:after {border-bottom-color:white}
#gotop:active {background-image:-webkit-linear-gradient(top,#144F69,#2493C4);background-image:-moz-linear-gradient(top,#144F69,#2493C4);background-image:-ms-linear-gradient(top,#144F69,#2493C4); background-image:-o-linear-gradient(top,#144F69,#2493C4);background-image:linear-gradient(top,#144F69,#2493C4);}
@keyframes footer-border{0%   {border-color: rgba(18, 122, 163, 0.1);}50% {border-color: rgba(18, 122, 163, 0.5);}100%   {border-color: rgba(18, 122, 163, 0.9);}}
@-moz-keyframes footer-border{0%   {border-color: rgba(18, 122, 163, 0.1);}50% {border-color: rgba(18, 122, 163, 0.5);}100%   {border-color: rgba(18, 122, 163, 0.9);}}
@-webkit-keyframes footer-border{0%   {border-color: rgba(18, 122, 163, 0.1);}50% {border-color: rgba(18, 122, 163, 0.5);}100%   {border-color: rgba(18, 122, 163, 0.9);}}

Diblog saya tidak ada ]]></b:skin> jadi saya meletakkannya diatas </style>.



4. Setelah itu copy dan pastekan script ini diatas </body>

<a href='#top' id='gotop' style='bottom: 0px; right: 0px;'></a>

5. Klik simpan dan coba view blog untuk melihat apakah tombol back to top sudah dibuat,jika ada masalah dalam pemasangan tombol silahkan beri komentar dibawah.

Terimakasih sudah berkunjung, semoga apa yang saja bagikan kali ini bermanfaat buat teman-teman semua.

Sampai jumpa di tutorial-tutorial berikutnya,Bye :D