Membuat Back To Top dengan Efek Smooth Scroll

"Back to Top" adalah salah satu fasilitas yang dapat digunakan pada blog untuk memudahkan pengunjung menavigasi halaman pada blog anda. Fungsi dari Back To Top yaitu mengantarkan kembali pengujung anda ke halaman paling atas. Penggunaan JQuery dengan fungsi ini dapat memberikan hasil scroll yang lebih baik, dalam hal ini scroll menjadi lebih smooth atau halus. Jika anda udah gak sabaran pengen membuatnya langsung aja dipraktekin...

Copyright: Blog Trik dan Tips - http://blogtrikdantips.blogspot.com/2009/10/membuat-back-to-top-dengan-efek-jquery.html#ixzz22JD8SqQM
Tolong sertakan link ini jika mengkopi artikel diatas. Terima kasih

Hasil CodeScript

Read more »

Cara Membuat Link Blog Berwarna-Warni

Sobat pasti sudah pernah melihat link berwarna warni pada blog. Ada berbagai warna yang ditampilkan link tersebut apabila cursor anda berada diatasnya. Kali ini kita akan membuat setiap link berwarna-warni pada blog anda. Javascript yang satu ini sangat mudah untuk diinstal karena anda tidak perlu mengotak atik template. Jika ingin tau caranya ikuti langkahnya dibawah ini:

1. Login ke Blogger

2. Masuk ke Rancangan --> Edit Laman

3. Tambahkan Gadjet lalu pilih HTML Javascript

4. Masukan kode berikut ini:

<script src="http://andreblog.googlecode.com/files/Rainbow_Colors_Way2blogging.js" type="text/javascript"></script>

5. Simpan gadjet anda

Apabila script tersebut tidak bekerja itu disebabkan karena script tersebut tidak cocok pada css template. Untuk itu coba sobat hapus tag !important. Demikian trik dan tips untuk saat ini semoga bermanfaat.

Read more »

Membuat Efek Membesar dan Berpijar pada Link

Satu Lagi Trik untuk mempercantik Blog, yaitu memperbesar dan ada efek berpijar pada Tulisan Link yang ditunjuk. Caranya :

1. Login dahulu ke Akun blogger
2. Buka tata letak/Layout
3. Edit html
4. Expand template widget

Cari aja kode yang ini :

/* global link attributes */ a {color: $mainLinkColor; text-decoration: underline;} a:hover {color: $mainHoverLinkColor; text-decoration: underline;} a:visited {color: $mainVisitedLinkColor; text-decoration: underline;} a:hover {

kemudian tambahkan kode ini

color: #000fff; text-transform: uppercase; font-weight: bolder; font-size: 15px; background-image: url(http://i909.photobucket.com/albums/ac297/heryymanjala/th_stars1.gif); }

Sehingga keseluruhannya menjadi :

/* global link attributes */

a {color: $mainLinkColor; text-decoration: underline;}

a:hover {color: $mainHoverLinkColor; text-decoration: underline;}

a:visited {color: $mainVisitedLinkColor; text-decoration: underline;}

a:hover {

color: #000fff; text-transform: uppercase; font-weight: bolder; font-size: 15px; background-image: url(http://i909.photobucket.com/albums/ac297/heryymanjala/th_stars1.gif); }

Oya sebelum di simpan (simpan template) ada baiknya di pratinjau dulu siapa tau ada error... setelah semua beres baru deh di simpan dan lihat hasilnya.

Selamat Mencoba!

Read more »