Laman

Minggu, 26 Juni 2011

Membuat Warna Body Berbeda-Beda Warna

 

Waktu itu saya pernah tulis Link Berbeda Warna Di Setiap postingan kali ini bukan warna link lagi yang berganti warna, melainkan warna tampilan body bisa di ganti-ganti sesuka hati pengunjung! Jika anda tidak mengerti apa maksud saya bisa anda lihat deh contohnya disini


Udah liat kan contoh-nya? Berikut ini caranya!

>> Seperti biasa anda login dulu di Blogger
>> Rancangan/Design
>> Tambah Gadget/Add a Gadget
Gambar, Warna Blog Berbeda-beda, Blog berganti-ganti Warna,
>> Pilih HTML/javascript
Gambar, Blog Berbeda warna di setiap postingan, Blog Bisa Di Ganti
 warna oleh pengunjung,
Kemudian copy paste kode di bawah ini dan letakkan di HTML/javascript tersebut.

<script type='text/javascript'>
function bgChange(bg)
{document.body.style.background=bg;}
</script>
<input type="button" value="Putih" onclick="bgChange('#ffffff')" /><br />
<input type="button" value="Cyan" onclick="bgChange('#00ffff')" /><br />
<input type="button" value="Biru" onclick="bgChange('#0000ff')" /><br />
<input type="button" value="Merah" onclick="bgChange('#ff0000')" /><br />
<input type="button" value="Orange" onclick="bgChange('#ffd000')" /><br />
<input type="button" value="Hijau Lumut" onclick="bgChange('#00ff00')" /><br />
<input type="button" value="Kuning" onclick="bgChange('#ffff00')" /><br />
<input type="button" value="Merah Jambu" onclick="bgChange('#ff69ba')" />

Kemudian anda simpan dan lihat hasilnya.

Kalau mau menambahkan warna tinggal tambahkan kode seperti ini
<input type="button" value="Merah Jambu" onclick="bgChange('#ff69ba')" />

Kalau mau mengganti warna tinggal di edit yang berwarna merah, mungkin trik ini tidak suport dengan beberapa template!

Selamat Mencoba Dan Semoga Bermanfaat!

Jumat, 24 Juni 2011

Mengganti tampilan cursor

Selamat datang di blog yang sederhana ini.!, melakukan modifikasi tampilan pada cursor mouse adalah salah satu cara yang dapat mempercantik blog kita. Cara ini cukup mudah dan sederhana. Sekarang kita akan bahas 2 jenis trik untuk merubah tampilan cursor mouse.







Type Pertama ( variasi image )
  • Pilih tab Elemen Halaman ( Page Element ).
  • Klik pada bagian Tambah Gadget dan pilih HTML/JavaScript.
  • Copykan script berikut dan letakkan pada kotak Content yang tersedia:
  • Note : Bisa kamu letakan dimana saja pada layout.

<style type="text/css">body {cursor:url("http://lh5.ggpht.com/_wC8_9aR_6uE/S6ufngy_rmI/AAAAAAAACcg/XQ6AD06Zt10/appstarting.gif"),default}</style>
Keterangan :
  • Warna merah, URL cursor ( ganti dengan URL cursor lain yang sesuai dengan warna / type template ) 
Simpan dan lihat hasilnya.. !

Type Kedua ( variasi Texs )
  • Pilih tab Elemen Halaman ( Page Element ).
  • Klik pada bagian Tambah Gadget dan pilih HTML/JavaScript.
  • Copykan script berikut dan letakkan pada kotak Content yang tersedia:
  • Note : Bisa kamu letakan dimana pada layout.


<script>
//mouse
//Circling text trail- Tim Tilton
//Website: http://www.tempermedia.com/
//Visit http://www.dynamicdrive.com for this script and more
function cursor_text_circle(){
// your message here
var msg='Inspirasi dan Kreasi'.split('').reverse().join('');

var font='Times New Roman';
var size=3; // up to seven
var color='#ff0000';

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 for just plain rotation w/out drag
var speed=.2;

// This is the rotation speed, set it negative if you want
// it to spin clockwise
var rotation=-.2;

// Alter no variables past here!, unless you are good
//---------------------------------------------------


var ns=(document.layers);
var ie=(document.all);
var dom=document.getElementById;
msg=msg.split('');
var n=msg.length;
var a=size*13;
var currStep=0;
var ymouse=0;
var xmouse=0;
var props="<font face="+font+" color="+color+" size="+size+">";

if (ie)
window.pageYOffset=0

// writes the message
if (ns){
for (i=0; i < n; i++)
document.write('<layer left="0" top="0" width="+a+" name="nsmsg'+i+'" height="+a+"><center>'+props+msg[i]+'</font></center></layer>');
}
else if (ie||dom){
document.write('<div id="outer" style="position:absolute;top:0px;left:0px;z-index:30000;"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="iemsg'+(dom&&!ie? i:'')+'" style="position:absolute;top:0px;left:0;height:'+a+'px;width:'+a+'px;text-align:center;font-weight:normal;cursor:default">'+props+msg[i]+'</font></div>');
document.write('</div></div>');
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;

function Mouse(evnt){
ymouse = (ns||(dom&&!ie))?evnt.pageY+20-(window.pageYOffset):event.y; // y-position
xmouse = (ns||(dom&&!ie))?evnt.pageX+20:event.x-20; // x-position
}

if (ns||ie||dom)
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
var y=new Array();
var x=new Array();
var Y=new Array();
var X=new Array();
for (i=0; i < n; i++){
y[i]=0;
x[i]=0;
Y[i]=0;
X[i]=0;
}

var iecompattest=function(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}

var makecircle=function(){ // rotation properties
if (ie) outer.style.top=iecompattest().scrollTop+'px';
currStep-=rotation;
for (i=0; i < n; i++){ // makes the circle
var d=(ns)?document.layers['nsmsg'+i]:ie? iemsg[i].style:document.getElementById('iemsg'+i).style;
d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15+(ie||dom? 'px' : '');
d.left=x[i]+a*Math.cos((currStep+i*1)/3.8)*2+(ie||dom? 'px' : ''); // remove *2 for just a plain circle, not oval
}
}

var drag=function(){ // makes the resistance
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (var i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);

}
makecircle();
// not rotation speed, leave at zero
setTimeout(function(){drag();},10);
}
if (ns||ie||dom)
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", drag, false );
else if ( typeof window.attachEvent != "undefined" )
window.attachEvent( "onload", drag );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
drag();
};
}
else
window.onload = drag;
}

}
cursor_text_circle();

</script>


Keterangan :
  • Warna merah, Teks akan muncul  sebagai animasi yang mengikuti cursor mouse ( ganti teks kamu sendiri )

Simpan dan lihat hasilnya ..! ( Contoh Penggunaan " SAMPLE BLOG " )


Tips : Untuk mencari jenis cursor cukup dengan ketik "cursor" pada mesin pencari atau bisa juga dengan menggunakan Image kamu sendiri baik animasi/non animasi.

MEmbuat Mp3 player di blog

Salom Saabat Blogger,Pada Pertemuan Kali ini Saya Mau Membahas Tentang Cara Memasukan Pemutar MP3 Di Blog Kita.Saya Yakin Para Sahabat Blogger Sudah Tau Cara Membuatnya,Tapi Saya Rasa,Mungkin Ada Sebagian Kecil Dari Sahabat Blogger Yang Masi Belum Tau Caranya,Jadi Saya Rasa Tidak Ada Salahnya Saya Coba Mempostingin Lagi Cara Membuatnya,Caranya Cukup Mudah Kok,Yang Mau Mencoba Ikuti Cra Berikut ini :

1. Login ke blogger.com
2. Pilih Tata Letak --> Tambah Gadget
3. Selanjutnya pilih HTML/JavaScript
4. Masukan (copy paste) kode di bawah ini


<img style="visibility:hidden;width:0px;height:0px;" border=0
width=0 height=0 src="http://c.gigcount.com/wildfire/IMP
/CXNID=2000002.0NXC/bT*xJmx*PTEyOTIyODA3
OTU5NTMmcHQ9MTI5MjI4
MDgwMTQyMSZwPTU2MjAxMiZkPSZnPTEmbz*xO
DU3ZWZjMmIxY2Y*ZjkzOWNi/YjgwMjdlMTkwODkyYyZvZj
*w.gif" /><div align="left"><object width="275" height="310">
<param name="movie" value="http://kodelagu.net/Skinister
Amp.swf"></param><param name="wmode" value="transparent">
</param><embed src="http://kodelagu.net/Skinister Amp.
swf" type="application/x-shockwave-flash" wmode="transparent"
width="275" height="310"></embed></object></div>
<div align="left" style="background: white;border: solid 1px
#2554c7; width: 274px;text-align:center;font: bold 8pt arial;">
<a style="text-decoration:none; color: #2554c7;"</a></div>


5.Jika Suda Selesai,Klik Simpan Dan Lihat Hasilnya Di Blog.

Selamat Mencoba,Semoga Bermafaaat

Menampilkan musik Mp3 di blog

Ada banyak website yang memberikan layanan download file2 mp3 untuk di tampilkan kedalam blog. salah satu yang akan kita bahas adalah MP3-Codes.com. dengan adanya mp3 player yang memainkan musik favorit pengunjung bisa lebih terhibur dan blog kita menjadi lebih hidup.
Untuk mengambil code di MP3-Codes.com caranya sebagai berikut :
1. buka website http://www.mp3-codes.com
layout mp3-codes.com
2. Search lagu atau artis favorit anda, contohnya kalau kamu penggemar Dixie Chicks ketik di kotak search lalu enter, akan ditampilkan semua lagu yang berhubungan dengan Dixie Chicks.3. Klik lagu yang anda cari, misalnya Wide Open Spaces - Dixie Chicks .

code htmla lagu mp3-codes.com

4. copy semua code dalam kotak Embed Codes
5. masuk ke dashboard blog, klik add gadget dan pilih HTML/JavaScript, paste code html tadi save dan lihat hasilya.





Free MP3 Downloads at MP3-Codes.com



Karena banyak pertanyaan gw update nih " cara menampilkan musik MP3 di blog"

ada yang nanya : kalau misalnya mau lebih dari satu lagu ? Sebenarnya sih mudah, caranya sama :

1. Masih di halaman mp3-codes.com, klik playlist,
2. Akan tampil puluhan album playlist yang terdiri dari beberapa lagu didalamnya.
3. Kalau suka klik dan copy Embed Codes nya dan paste di blogmu.

daftar Playlist yang kamu pilih sebenarnya milik orang lain yang punya akun, jadi kamu tidak bisa menambah atau mengurangi lagu-lagu yang ada didalamnya.

Kalau mau bikin playlist sendiri yang isinya lagu yang lu suka ? ini juga gampang .

1. Yang jelas kamu harus jadi member dulu di Mp3-codes.com, ya daftarlah.
2. Cara daftar klik link dibawah ini (gratis) :

REGISTER MP3-CODES.COM

rdaftar mp3-codes.com- isi username dengan namamu, mis : bento
- isi password, terserah.
- ketik ulang password .
- Email, isi dengan alamat email kamu.
- ketik code verifikasi lalu, Submit
biasanya cepat, kalu barhasil akan ada konfirmasi.
Kalau sudah sekarang kita buat playlistnya.
( pikir-pikir dulu lagu apa yang lu suka ????)

Caranya sama dengan diatas :

1. Search lagu atau artis favoritmu, lagu artis indonesia juga ada, mis : ari lasso, iwan fals, atau dewi persik kali.. he..he.. terserah deh.
2. kalu sudah ketemu contohnya " ari lasso - sehidup semati " klik add to playlist


cara buat playlist mp3-codes.com
3. isi " created new playlist with this Song" dengan nama playlistmu.
4. Setelah itu playlistmu sudah jadi, cari lagi lagu yang lu suka dengan cara yang sama.
5. nantinya kamu tinggal pilih mau buat playlist baru atau menambahkan di playlist lama.
6. untuk menambahkan di playlist lama klik " add song ".

Membuat tombol melayang "kembali ke atas"

Kalau halaman artikel blog anda terlalu panjang akibat dari artikel yang panjang, komentar yang banyak, gambar, banner dan link yang banyak, atau karena jumlah artikel yang ditampilkan di haman utama banyak maka akan sulit bagi pengunjung blog untuk menggulung layar dengan mouse untuk kembali ke bagian atas halaman blog.

Sebenarnya solusi untuk para pengunjung blog adalah hanya dengan menekan tombol Ctrl + Home maka halaman akan kembali keatas, tapi mengharapkan itu dilakukan pengunjung bagi pemeilik blog tak akan memberi nilai tambah bagi blognya.

nah berikut ini adalah cara sederhana membuat tombol melayang kembali keatas, disini kita akan menempatkannya di pojok kanan bawah, copy script berikut :



ganti "urlGambarAnda" dengan alamat url gambarmu atau kamu bisa cari di google, kalau tidak mau pusing pakai saja banner di atas ini url nya : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNNlT41BHdVeNWiSYyZu34sPPyWMBn0_T4zGA9FYKWfDtvgP7FNdzJjdVdsWDXka8oOVQK0ecKuLRjjnuDrWVYqdkjj6kTGiH3B37Oyqdf-ELnEEo-xmjZiFGJCAe7RwtiW-vpH1NoAw/s320/backtotop.JPG

Jika kamu ingin meletakkan di pojok kiri bawah maka pada script "position:fixed;bottom:5px;right:5px;" ganti kata right dengan left.

1. Masuk ke dasboard - Design - Edit Html
2. Untuk Mengantisipasi kegagalan klik " expand widget templates " dan " Download Full Templates ".
3. Cari kode </body> dan tempatkan script diatas kode </body>
4. Save dan lihat hasilnya.