Create Scroll to Top Control using CSS3

Scroll to top Control atau biasa juga disebut sebagai Back to top Control berfungsi untuk menggulung halaman blog kembali ke halaman teratas. Scroll to top control yang kita buat ini hanya menggunakan kode CSS terutama CSS3 yang melibatkan CSS3 transition, CSS3 rgba, CSS3 box shadow (drop shadow) dan CSS3 border radius. Link Scroll to top Control tidak akan kita letakkan di bawah tag pembuka body (), akan tetapi di atas tag penutup body () supaya tidak hanya berguna ketika halaman blog di buka, namun link scroll to top control ini juga bisa dimanfaatkan saat kita berada di "Page Elements" atau "Elemen Laman".

Penggunaan Scroll to Top Control akan menjadi sangat bermanfaat ketika sebuah blog menampilkan posting yang cukup panjang atau halaman blog menampilkan beberapa posting sekaligus (karena di-set untuk menampilkan beberapa posting atau ketika pengunjung membuka link categories/label). Selain itu tentu saja scroll to top control ini bisa dimanfaatkan untuk memperindah penampilan blog. Dan ini sangat memungkinkan berkat digunakannya CSS3.

Cara Membuat Scroll to Top Controll

• Login : Login to Blogger.
• Dasboard : KLIK "Design" atau "Rancangan".
• Page Elements : KLIK "Edit HTMl". Amankan template (back-up) template untuk berjaga-jaga bila terjadi kekeliruan (lihat Special Tutorials).
• Find CSS Code : Cari kode ]]>, kemudian copy dan pastekan Kode CSS Scroll to Top Controll di atasnya.
• Lanjutkan dengan mencari kode , yang terletak di ujung terbawah template. Copy dan Pastekan xHTML di atas kode .
• KLIK "SAVE Templates" atau "Simpan Template".
• Untuk mempermudah pencarian kode html di template gunakan Ctrl+F. Untuk mengetahui caranya silahkan buka "Special Tutorials" di kiri atas halaman blog (menu). Di sana ada beberapa tutorial dasar penting yang berisi panduan tentang mencari kode HTML secara cepat, mengganti template, tambah widget baru dan Cara back-up (mengamankan) template yang sangat penting untuk dipelajari.
• Buka blog untuk melihat hasilnya!

Kode CSS Scroll to Top Control

a.top {
      font-size: 16px;
      font-weight: 700;
      display: block;
      color: #FFFFCC;
      text-shadow: 1px 1px 1px #000;
      text-decoration: none;
      background: rgba(0,0,0, 0.8);
      border: 1px outset #777;
      border-left: 6px solid #888;
      border-top: 3px solid #888;
      border-radius: 6px;
      border-top-right-radius: none;
      border-top-left-radius: 16px;
      -moz-border-radius: 6px;
      -moz-border-radius-topleft: 16px;
      -moz-border-radius-topright: 0px;
      -webkit-border-radius: 6px;
      -webkit-border-top-right-radius: 0px;
      -webkit-border-top-left-radius: 16px;
      -webkit-border-top-right-radius: none;
      box-shadow: -1px -1px 1px #fff, 1px 1px #fff, -3px -3px 12px #999;
      -moz-box-shadow: -1px -1px 1px #fff, 1px 1px #fff, -3px -3px 12px #999;
      -webkit-box-shadow: -1px -1px 1px #fff, 1px 1px #fff, -3px -3px 12px #999;
      width: 90px;
      height: 22px;
      text-align: center;
      position:fixed;
      bottom:2px;
      right:2px;
      cursor: pointer;
      -o-transition: all 0.6s ease-in-out;
      -moz-transition: all 0.6s ease-in-out;
      -webkit-transition: all 0.6s ease-in-out;
}
a.top:hover {
      color: red;
      box-shadow: 1px 1px 8px blue;
      -moz-box-shadow: 1px 1px 8px blue ;
      -webkit-box-shadow: 1px 1px 8px blue;
      background: #003366;
}
a.top:active {
      color: blue;
      background: #aaa;
      font-size: 14px;
}

xHTML Scroll to Top Control

<br>
<a href="post-edit.g?blogID=319128124503920323&postID=8312881136102812108" title="Click me, and I will bring you fly into the blue sky!"><a class="top" href='#' title='Click me, and I will bring you fly into the blue sky!'>Back to top</a></a><o:p></o:p></pre><pre>

The Owner of Education For All Blog hanyalah seorang Blogger pemula namun bila sobat blogger mania berminat untuk melihat tutorial lainya bergaya magazine blog silahkan. Akses melalui link di bawah ini :

• 
• 

» Selamat Berkreasi - E F A «