Tutorial Tips Wordpress | Margasatrya.com

---

Tutorial Cara Membuat Multi Scroll Page w/ Jquery Posted: 23 Aug 2010 11:00 AM PDT Jquery.com Artikel kali ini sebenarnya tidak jauh berbeda dengan artikel saya Tips Sederhana : Membuat Link Back To Top, hanya saja tutorial kali ini menggunakan Jquery dan memberikan sentuhan lembut ketika di klik. Dan bukan hanya untuk back to top saja yang bisa di beri efek seperti itu, oleh karena itu saya menulis pada judulnya Multi Scroll Page. Mas ardianzzz sebenarnya sudah menulis tehnik ini di kolom komentar disini, tapi agak berbeda codingnya dengan yang akan saya tulis sekarang. Oia, untuk contoh scroll page ini, teman-teman bisa mencoba link ini. Bagaimana ? Tertarik ? Kalau tertarik kita lanjut Silahkan anda download terlebih dahulu script jquery.js Setelah anda download, sekarang anda harus mengakses cpanel blog anda. Upload jquery.js tadi ke dalam folder template yang anda gunakan sekarang. Setelah itu anda buka file header.php, copykan script di bawah ini tepat sebelum tag < / head > (tanpa spasi) <script language="JavaScript" type="text/javascript" src="<?php bloginfo('template_url'); ?>/jquery.js"></script> Kemudian anda copy juga script di bawah ini, di bawah script di atas yang baru saja anda copykan. <script type='text/javascript'> $(document).ready(function(){ $(".scroll").click(function(event){ event.preventDefault(); var full_url = this.href; var parts = full_url.split("#"); var trgt = parts[1]; var target_offset = $("#"+trgt).offset(); var target_top = target_offset.top; $('html, body').animate({scrollTop:target_top}, 800); }); }); </script> Script ini artinya, setiap anchor text akan menghasilkan efek smooth atau lembut ketika di klik apabila di beri tambahan class="scroll" Contoh penggunaannya, sekarang anda buka file footer.php, biasanya di setiap template ada tulisan nama pembuat templatenya tersebut, tepat di sebelah nama pembuat template itu anda copy kan script di bawah ini. <a href="#top" class="scroll">Back To Top</a> href="#top" merupakan lokasi yang dituju dari anchor text tersebut. Sekarang anda buka kembali file header.php, copy script di bawah tepat setelah tag < body >(tanpa spasi) <span id="top"></span> Refresh halaman blog anda, kemudian anda coba klik link Back To Top yang ada di footer blog anda. Berhasil ? Nah, bila sudah berhasil anda tinggal memberi sedikit style agar lebih rapi. Anda bisa menggunakan tehnik ini dimana saja, seperti misalkan saya menggunakannya pada tombol Go To Footer yang ada di sebelah kanan atas halaman blog saya. Selamat mencoba ! Sebagai catatan sedikit, apabila anda sudah mengikuti tutorial ini namun anchor text anda tetap tidak ada efek scroll nya, itu berarti ada javascript lain yang bertabrakan dengan jquerynya. Solusinya, coba anda matikan plugin yang mengandung javascript. Referensi : WebDevTuts Bavotasan Original post from : Tutorial Cara Membuat Multi Scroll Page w/ Jquery Tutorial Tips WordPress | Margasatrya.com

Ternyata “Thumbnail Image” 100% Valid XHTML Posted: 23 Aug 2010 06:26 AM PDT Terima kasih utnuk teman-teman yang sudah berkomentar di artikel saya yang kemarin. walaupun hanya beberapa orang saja yang berkomentar, tapi bagi saya sudah cukup menjadi refrensi untuk ke depannya. Saya juga mau mengklarifikasi kan mengenai masalah template saya ini. Mohon maaf sekali, template saya ini tidak akan saya free kan, mungkin teman-teman ada yang salah paham membaca tulisan saya kemarin . Klarifikasi yang kedua, adalah mengenai Thumbnail Image yang kemarin saya bilang tidak valid atau banyak menimbulkan error. Setelah saya coba menelusuri lebih jauh, ternyata ada sedikit bagian dari sistem thumbnail yang belum saya masukan . Sekarang pun blog saya ini sudah 100% valid XHTML (homepage only), anda bisa cek sendiri atau klik link yang ada pada  footer. Blog ini hanya Valid 100% pada bagian homepage, karena pada bagian dalam/single terdapat beberapa element seperti facebook like yang tidak valid. Kalau pun saya menghapus beberapa kode dari element-element yang ada pada bagian dalam agar bisa 100 % valid, untuk beberapa artikel pasti masih tetap ada error. Di karenakan saya selalu menggunakan property target="blank" pada link atau link image. Untuk itu, semoga rencana reguler saya membuat free theme bisa terwujud. Kemarin saya masih ragu dengan sistem thumbnail yang banyak menimbulkan error. Tapi sekarang saya sudah bisa menemukan solusinya, dan mungkin saya akan menerapakan thumbnail image ini untuk template-template saya ke depannya. Postingan ini hanyalah untuk meng-klarifikasikan pernyataan saya kemarin, mungkin karena ketidak telitian saya langsung mengeluarkan pernyataan tersebut. So, keep blogging ! Original post from : Ternyata “Thumbnail Image” 100% Valid XHTML Tutorial Tips WordPress | Margasatrya.com

You are subscribed to email updates from Tutorial Tips Wordpress | Margasatrya.com To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610