Berbagi Tutorial Seputar Blog Terserah Adminnya, Masalah?

Membuat Tombol Back To Top Keren Di Blog

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.

Membuat Tombol Back To Top Keren Di Blog

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

Membuat Tombol Back To Top Keren Di Blog

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 

Share on Facebook
Share on Twitter
Share on Google+
Tags :

Related : Membuat Tombol Back To Top Keren Di Blog

22 comments:

  1. Replies
    1. makasih bang udah mau berkunjung,walau seucap terimakasih

      Delete
  2. Wahh izin coba gan, btw nice info ya

    ReplyDelete
  3. wah mantap nih langsung dicoba
    thanks for share

    ReplyDelete
  4. bgus nih back to top nya... kenapa nggak make yang ini aja mas..??

    ReplyDelete
  5. ini dia widget yang ane cari-cari ,, akhirnya ketemu juga :D
    makasih gan udah share :D

    ReplyDelete
  6. Saya punya gan koleksi gambar back to top, tinggal gabungin sama nih script mantap deh:D

    ReplyDelete
  7. Mas, kalo back to topnya ada efek bounce gitu buatnya gmn ya :) ?

    ReplyDelete
    Replies
    1. ane pernah blokwalking,ada ditutorial nya kang ismet

      Delete
  8. Klo lewat ADD widget, scriptnya gmn gan?

    ReplyDelete
  9. wahh ane coba ya gan beratin blog kah??

    ReplyDelete
  10. nahh pass banget saya mau masang tombol kaya gini nihh :) ijin nyoba :D

    ReplyDelete

Silahkan berikan komentar dan masukan anda di bawah ini, komentar dengan link tidak akan di approve