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?


Jangan Lupa Jempolnya :


 

Dibutuhkan Bulan ini :

Paling Dibutuhkan :

Dibutuhkan Minggu Ini

© 2011 tutorial blogger indonesia PublisedSeo Template Blogger Converted Template by Hack Tutors.info