Home »
» Trik Tips dan Tutorial untuk Blogger
Trik Tips dan Tutorial untuk Blogger
Trik Tips dan Tutorial untuk Blogger |
Membuat tombol Back to Top dengan JQuery (Smooth Version) Posted: 29 May 2011 09:15 PM PDT Fungsinya sama dengan postingan ini, hanya saja widget ini akan scrolling ke bagian paling atas website yang memasangnya ketika diklik. Fungsi Back to Top ini sangat berguna jika pengunjung blog malas scrolling ke atas, hanya dengan sekali klik maka JQuery ini akan melakukan tugasnya. Langsung saja: - Login ke blogger - Pada Dashboard, klik Design > Edit HTML - Download file ini lalu buka menggunakan Notepad - Cari kode ini: setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]}, controlHTML: '<img src="up.png" style="width:48px; height:48px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol" controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links - Lalu edit controlHTML: '<img src="up.png" style="width:48px; height:48px" />', menjadi kode dibawah: controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4R9T80R7Rv90qzLyZUGbzjqRMxy0ASi8WBYB9pCsSc13LMBWzGRUCt6w57u8blC5GRuFcIyHbZoUgP64ZQrVFbwSVXpTP6i0_g9d6BwJWK5YsDev83-NSlfVz61aNw6VVUvQxlHSUqB4/s1600/up.png" style="width:48px; height:48px" />', - Lalu klik "File > Save" - Kemudian upload ke hosting anda - Lalu copy kode ini dan paste diatas kode </head> : <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://[URL_scrolltopcontrol_ANDA].com/scrolltopcontrol.js"> /*********************************************** * Scroll To Top Control script- �© Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Project Page at http://www.dynamicdrive.com for full source code ***********************************************/ </script> - Ganti tulisan http://[URL_scrolltopcontrol_ANDA].com/scrolltopcontrol.js dengan link file yang anda upload tadi - Setelah itu masukkan kode ini diatas kode </body> : <div id='topcontrol'> </div> - Kemudian save dan lihat hasilnya Widget ini akan tidak terlihat jika anda berada di paling atas blog, dan akan muncul ketika anda scroll kebawah dan berfungsi dengan baik. PENTING: JANGAN LUPA, BACKUP TEMPLATE ANDA SEBELUM MELAUKAN TRIK INI! |
Membuat background berbeda-beda pada setiap posting Posted: 29 May 2011 08:33 PM PDT Akhirnya, setelah setahun lebih absen blogging, akhirnya muncul lagi nafsu blogging yang saya punya, entah kenapa setelah jalan-jalan ke Kaskus keinginan blogging muncul lagi. Di post pertama saya pada tahun 2011 ini, saya akan menjelaskan cara membuat background berbeda-beda pada setiap posting . Untuk apa? Sesuai judulnya, kali ini kita bisa membuat warna background pada setiap posting berbeda dengan posting blog lainnya. Agar tidak membosankan. Langsung saja ya, ada 2 cara membuat background yang berbeda itu, yaitu dengan warna atau dengan gambar . Membuat background dengan warna: - Login ke Blogger - Pilih "Posting (Ketika akan memposting artikel)" lalu "Edit HTML (Bukan 'Compose')" - Awali dengan memasukkan code ini: <div style="background:kode_warna_disini;"> - Ganti tulisan "kode_warna_disini" dengan kode warna yang anda inginkan - Setelah itu mulailah memposting artikel anda seperti biasa, jangan lupa setelah itu pada akhir posting masukkan kode </div> - Lalu publish post dan lihat hasilnya Membuat background dengan Gambar: Sebelum membuat background, anda harus punya gambar yang anda inginkan untuk dijadikan background. Saya sarankan anda sendiri yang mengupload gambar ke hosting gambar yang anda mau, karena jika anda mengambil dari link lain bisa jadi linknya dihapus dan background tidak akan tampil lagi. - Sama dengan cara diatas, Login > Posting > Edit HTML - Sebelum memulai posting, masukkan kode ini: <div style="background:url(alamat_gambar_disini) no-repeat;"> - Jangan lupa, ubah tulisan "alamat_gambar_disini" dengan alamat gambar yang ingin anda tampilkan - Setelah itu mulailah memposting seperti biasa, jangan lupa diakhir postingan, anda harus menempelkan kode </div> juga - Lalu publish post seperti biasa dan lihat hasilnya Nah, berhasil bukan? |
You are subscribed to email updates from T3-Blogger To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
Google Inc., 20 West Kinzie, Chicago IL USA 60610 |
Jangan Lupa Jempolnya :