Tempatnya Belajar dan Berbagi |
Membuat Tombol Back To Top Di Blogger Posted: 19 Aug 2013 05:53 PM PDT Membuat tombol Back to top kira-kira seperti itu judul tutorial blog kali ini. Tapi ngomong-ngomong temen-temen sudah tahu belum seperti apa sih tombol back to top itu? Kalau diuraikan dengan kalimat tombol back to top itu adalah tombol yang digunakan untuk kembali ke halaman atas. Biasanya tombol ini berada di bagian bawah halaman dan kebanyakan dibagian pojok halaman bawah. Kalau temen-temen mau lihat contohnya disini. Di samping itu tombol Back to top memudahkan kita khususnya para pengunjung blog untuk kembali ke halaman atas, jadi kita tidak perlu men-scroll secara manual menggunakan mouse untuk kembali keatas, cukup dengan mengklik tombol itu. Dalam tutorial pembuatan back to top kali ini saya menggunakan jquery. Perbedaan dengan yang biasa adalah ketika kita berada di halaman atas tombol back to top ini tidak terlihat dan ketika kita scroll mouse ke halaman bawah tombol ini baru ada. Nah, jika anda tertarik untuk membuat tombol itu, di bawah ini akan saya uraikan langkah-langkah pembuatannya. 1. Pertama login ke blogger dengan akun anda2. Pilih Rancangan >> EDIT HTML (centang expand template widget) 3. Simpan kode berikut sebelum kode ]]></b:skin> #top-link{display:none; font-weight:bold; font-family:tahoma; font-size:10px; width:70px; background:#000; color:#fff; text-shadow:1px 1px 1px #666; font-size:11px; position:fixed; right:-20px; bottom:150px; padding:5px; -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px}
4. Sekarang simpan kode berikut diatas kode </head>
5. Tahap selanjutnya adalah pemanggilan dan pembuatan tombol back to topnya. Anda simpan kode berikut tepat diatas kode </body> <a class="no-click no-print" href="#top" id="top-link" rel="nofollow" title="Back to Top Page">Back To Top</a> Catatan : Jika ketika di-klik tombol back top tidak bekerja (tidak mau kembali ke atas) anda ganti kode #top dengan # sehingga hasilnya seperti ini : <a class="no-click no-print" href="#" id="top-link" rel="nofollow" title="Back to Top Page">Back To Top</a> Bagaimana, sulit atau gampang? Kalau sulit tanya saja sama kotak komentar di bawah. Kalau gampang tanya sama rumput yang bergoyang. Selamat mencoba dan semoga bermanfaat. |
Memasang Tooltip Pada Link di Blog Posted: 19 Aug 2013 05:54 PM PDT Pada postingan sebelumnya saya sudah menjelaskan bagaimana kita memasang baloon tooltip pada kata atau kalimat tertentu. Bagaimana untuk memasangnya pada setiap link? Nah, itu pembahasan kali ini yaitu cara memasang tooltip pada link di blog. Jadi setiap link yang ada di dalam postingan jika cursor kita arahkan ke link tersebut akan muncul tooltip di bawahnya. Untuk pengertian tooltip sendiri sudah saya jelaskan pada postingan sebelumnya, jadi saya tidak perlu mengulangi lagi, bagi temen-temen yang belum membaca bisa dibuka dulu itu artikelnya. Untuk membuat tooltip ini anda bisa ikuti langkah-langkah berikut : 1. Login ke Blogger anda 2. Pilih Rancangan 3. Pilih EDIT HTML (centang Expand template widget) 4. Sekarang simpan CSS berikut diatas kode ]]></b:skin> /* start Tooltip blogger maskolis*/4. Sekarang simpan script berikut diatas kode </head> <script src='http://milikazis.googlecode.com/files/tooltipURL.js' type='text/javascript'/> Cukup itu dulu penjelasannya, jika ada yang kesulitan temen-temen bisa isi kotak komentar di bawah. Selamat mencoba dan semoga bermanfaat. |
You are subscribed to email updates from Tempatnya Belajar dan Berbagi To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
Google Inc., 20 West Kinzie, Chicago IL USA 60610 |
0 komentar:
Posting Komentar