Cara Membuat Animasi Bergerak Di Blog

• masuk atau login ke blog kalian
  
• klik Rancangan / Design kemudian klik Elemen laman / page Elements
  
  
• Lalu klik tambah gadget / add gadget , setelah di klik akan muncul banyak pilihan ..
  
  
• pilih HTML/JAVA SCRIPT
  
  
• lalu copy pastekan script-script berikut  ini ( sebaiknya jangan di beri judul )
  

untuk anda yang suka memilih milih  .. sekarang anda pilih nih .. animasi beregerak mengikuti mouse di bawah ini ..: 
langsung copas aja gann !!!

Cara Menambahkan Musik DI Blog

1. kunjungi situs scmplayer.net, kemudian pada tab Choose Skin, silahkan pilih tampilan skin widget yang nantinya akan ditampilkan pada blog anda.

2. klik pada tab Edit Playlist, disini ada dua pilihan yaitu dengan memasukan url lagu yang di pasang manual(Manual Playlist). Atau dari playlist akun youtube(RSS Podcast) anda. gunakan saja pilihan pertama "Manual Playlist".

Contoh Yang Saya Lakukan

Perhatikan pada gambar yang saya lingkari merah, disitu terterah contoh untuk memasukan lagu yang anda inginkan, silahkan anda cari situs yang menyediakan lagu atau bisa anda upload sendiri ataupun mencari di youtube.com video yang nantinya sebagai url lagu.(bukan menampilkan video, hanya suara dari video)

3. klik pada tab Configure Settings untuk mengatur lagu yang sudah kita pilih tadi, atur sesuai keinginan anda. Atau seperti pengaturan saya pada gambar dibawah ini

Klik Untuk Memperbesar

4. Setelah itu klik tombol Done, lalu copy script yang diberikan.

Langkah terakhir, masuk ke akun blogger anda pilih tata letak. Kemudian kliktambah gadget pilih gadget HTML/Javascript. Lalu paste kan script tadi. klik Simpan.


thanks for read my articles..:D

Cara Membuat Mouse Di Kelilingi Text Untuk Blog

1. Login ke Blogger, pilih Rancangan ( Yang dulunya Tata Letak ) kemudian pilih Edit HTML Klik tulisan Download Template Lengkap.
2. Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula. Beri tanda centang pada kotak di samping tulisan Expand Template Widget,
3. Kemudian cari kode </head>

Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol Ctrl + F atau (F3).
Kalau sudah ketemu, Copy Paste kode berikut dan letakkan diatasnya.



<style type='text/css'>
#outerCircleText {
font-style: italic;
font-weight: bold;
font-family: 'comic sans ms', verdana, arial;
color: #0000ff; /* warna huruf */
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
</style>

<script type='text/javascript'>
//<![CDATA[
;(function(){
// Your message here (QUOTED STRING)
var msg = " Fahmi Blogger "; /* tulisan yang muncul */
/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */
// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size =15; /* ukuran huruf */
// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;
// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;
// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;
// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;
////////////////////// Stop Editing //////////////////////
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split('');
var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
o = document.createElement('div'), oi = document.createElement('div'),
b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement
:
document.body,
mouse = function(e){
e = e || window.event;
ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
},
makecircle = function(){ // rotation/positioning
if(init.nopy){
o.style.top = (b || document.body).scrollTop + 'px';
o.style.left = (b || document.body).scrollLeft + 'px';
};
currStep -= rotation;
for (var d, i = n; i > -1; --i){ // makes the circle
d = document.getElementById('iemsg' + i).style;
d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) +
'px';
d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
};
},
drag = function(){ // makes the resistance
y[0] = Y[0] += (ymouse - Y[0]) * speed;
x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
for (var i = n; i > 0; --i){
y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
x[i] = X[i] += (x[i-1] - X[i]) * speed;
};
makecircle();
},
init = function(){ // appends message divs, & sets initial values for positioning arrays
if(!isNaN(window.pageYOffset)){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
} else init.nopy = true;
for (var d, i = n; i > -1; --i){
d = document.createElement('div'); d.id = 'iemsg' + i;
d.style.height = d.style.width = a + 'px';
d.appendChild(document.createTextNode(msg[i]));
oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
};
o.appendChild(oi); document.body.appendChild(o);
setInterval(drag, 25);
},
ascroll = function(){
ymouse += window.pageYOffset;
xmouse += window.pageXOffset;
window.removeEventListener('scroll', ascroll, false);
};
o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
if (window.addEventListener){
window.addEventListener('load', init, false);
document.addEventListener('mouseover', mouse, false);
document.addEventListener('mousemove', mouse, false);
if (/Apple/.test(navigator.vendor))
window.addEventListener('scroll', ascroll, false);
}
else if (window.attachEvent){
window.attachEvent('onload', init);
document.attachEvent('onmousemove', mouse);
};
})();
//]]>
</script>

Tulisan yang berwarna biru bisa sobat ganti sesuai selera Simpan dan lihat hasilnya.
Selamat mencoba.

Simpan.

Oooh , hampir lupa. Coba Anda cari kata "Fahmi Blogger" didalam kode,  anda ganti dengan kata yang anda inginkan. nantinya kata tersebut yang akan tampil mengikuti Mouse.

Kali ini saya akan berbagi cara membuat Chat Box dengan aplikasi CBOX.
Chat Box atau Guest Box atau sebagainya adalah fasilitas untuk kita chatting dengan teman di dunia maya atau dengan teman Blogger khususnya. Manfaat lainya adalah agar alamat Blogspot kita dapat diketahui teman blogger dapat menyebar atau bahkan terkenal. Lumayan, buat bantu-bantu agar blogspot kita rame gitu deh..hha.





Salah satu situs chat box adalah CBOX, tak perlu basa-basi lagi mari kita mulai.
1. Masuk ke situs cbox, http://www.cbox.ws/ .
2. Lanjut, pilih sign up tentunya untuk buat akun.

3. Pada tahap sign up, silakan isi dengan lengkap. cbox name isi dengan keinginan sobat, email address isikan alamat email sobat, password isikan tanpa diketahui orang lain (mesti lah,hha),website isikan alamat blogspot/web tujuan sobat, language pilih bahasa yang sobat mengerti,style pilih backround yang anda suka, jangan lupa centang terms and conditions, lanjut klik "create my cbox".

4. cbox sobat berhasil dibuat.

5. Masuk ke yahoo dan periksa mail sobat, pasti ada mail dari cbox. Baca mail dari cbox dan klik link dari cbox untuk dapat login ke control panel cbox.

6. Setelah link tersebut diklik maka sobat akan masuk ke control panel cbox. Lalu sobat lakukan proses login.

7. Lalu kita masuk ke laman berikutnya, gulir sedikit ke bawah disitu ada kode html. Blog kode tersebut dan "copy".

8. Lanjut, masuk ke akun blogger sobat dan pilih "Tata Letak". Tentukan dimana cbox akan disimpan. Klik "Tambahkan gadget", pilih HTML/JavaScript dan paste-kan kode HTML dari cbox tadi.

9. Selesai, sobat sekarang bisa chat dengan teman blog menggunakan cbox.

Cara Membuat Chat Facebook

Berhubung Bulan lalu ada yang komment bagaimana Cara Membuat Chat Facebook Generator "Rainbow Text" Pada Blog .Nih Bagi yang mau tau gimana sih caranya membuat "Chat Facebook Generator". Oke akan saya kasih tau caranya :

1. Login ke blogger.2. Bikin sebuah postingan baru.

3. Pada Postingan pilih pengaturan yang "HTML", bukan yang Compose.

4. Silahkan Copy Kode Berikut di Postingan yang "HTML".

Berikut ini Kode Chat Facebook Generator "Rainbow Text"

<center><style type="text/css"> .form {background:url(http://th529.photobucket.com/albums/dd339/pimpleshate/th_attachment.gif); border-radius:5px; border:2px solid #de0101; box-shadow:0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25); width:320px; padding:10px} .input {padding:10px 10px; box-shadow:inset 1px 1px 0 #777; border-radius:5px; border:1px solid #fff} .input:focus {background:#ffffe0} .type {width:200px} .output {width:295px} .button {color:#fff; padding:9px 18px; background:-moz-linear-gradient(top,#76c1e3 0%,#1e97e8 25%,#2b84f0); background:-webkit-gradient(linear,left top,left bottom,from(#76c1e3),color-stop(0.25,#1e97e8),to(#2b84f0)); border-radius:5px; border:1px solid #b85f00; box-shadow:0px 1px 3px rgba(000,000,000,0.5),inset 0px -1px 0px rgba(255,255,255,0.7); text-shadow:0px -1px 1px rgba(000,000,000,0.2),0px 1px 0px rgba(255,255,255,0.3)} </style><br /> <form class="form" name="code"> <div style="text-align: center;"> <div style="text-align: center;"> <span style="color: red; font-size: large;">Kolom Generator</span></div> <div style="text-align: center;"> <input class="input type" name="type" size="63" type="text" value="Ketik disini" /></div> <input class="button" onclick="change();" type="button" value="Generate..!" /></div> <div style="text-align: center;"> <div style="text-align: center;"> <input class="input output" name="output" onclick="select();" size="63" type="text" /></div> <span style="color: red; font-size: large;">^ Kode Generator ^</span></div> </form> <script language="javascript" src="http://alkaz-comunity.googlecode.com/files/Generator_Pelangi.js"> </script></center>

Berikut ini Kode Chat Facebook Generator "Green Text"

<center><style type="text/css">
.form {background:url(http://th529.photobucket.com/albums/dd339/pimpleshate/th_attachment.gif); border-radius:5px; border:2px solid #de0101; box-shadow:0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25); width:320px; padding:10px}
.input {padding:10px 10px; box-shadow:inset 1px 1px 0 #777; border-radius:5px; border:1px solid #fff}
.input:focus {background:#ffffe0}
.type {width:200px}
.output {width:295px}
.button {color:#fff; padding:9px 18px; background:-moz-linear-gradient(top,#76c1e3 0%,#1e97e8 25%,#2b84f0); background:-webkit-gradient(linear,left top,left bottom,from(#76c1e3),color-stop(0.25,#1e97e8),to(#2b84f0)); border-radius:5px; border:1px solid #b85f00; box-shadow:0px 1px 3px rgba(000,000,000,0.5),inset 0px -1px 0px rgba(255,255,255,0.7); text-shadow:0px -1px 1px rgba(000,000,000,0.2),0px 1px 0px rgba(255,255,255,0.3)}
</style><br />
<form class="form" name="code">
<div style="text-align: center;">
<div style="text-align: center;">
<span style="color: red; font-size: large;">Kolom Generator</span></div>
<div style="text-align: center;">
<input class="input type" name="type" size="63" type="text" value="Ketik disini" /></div>
<input class="button" onclick="change();" type="button" value="Generate..!" /></div>
<div style="text-align: center;">
<div style="text-align: center;">
<input class="input output" name="output" onclick="select();" size="63" type="text" /></div>
<span style="color: red; font-size: large;">^ Kode Generator ^</span></div>
</form>
<script language="javascript" src="http://alkaz-comunity.googlecode.com/files/Generator_Green.js">
</script></center>

Berikut ini Kode Chat Facebook Generator "Green Text"

<center><style type="text/css">.form {background:url(http://th529.photobucket.com/albums/dd339/pimpleshate/th_attachment.gif); border-radius:5px; border:2px solid #de0101; box-shadow:0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25); width:320px; padding:10px}.input {padding:10px 10px; box-shadow:inset 1px 1px 0 #777; border-radius:5px; border:1px solid #fff}.input:focus {background:#ffffe0}.type {width:200px}.output {width:295px}.button {color:#fff; padding:9px 18px; background:-moz-linear-gradient(top,#76c1e3 0%,#1e97e8 25%,#2b84f0); background:-webkit-gradient(linear,left top,left bottom,from(#76c1e3),color-stop(0.25,#1e97e8),to(#2b84f0)); border-radius:5px; border:1px solid #b85f00; box-shadow:0px 1px 3px rgba(000,000,000,0.5),inset 0px -1px 0px rgba(255,255,255,0.7); text-shadow:0px -1px 1px rgba(000,000,000,0.2),0px 1px 0px rgba(255,255,255,0.3)}</style><br /><form class="form" name="code"><div style="text-align: center;"><div style="text-align: center;"><span style="color: red; font-size: large;">Kolom Generator</span></div><div style="text-align: center;"><input class="input type" name="type" size="63" type="text" value="Ketik disini" /></div><input class="button" onclick="change();" type="button" value="Generate..!" /></div><div style="text-align: center;"><div style="text-align: center;"><input class="input output" name="output" onclick="select();" size="63" type="text" /></div><span style="color: red; font-size: large;">^ Kode Generator ^</span></div></form><script language="javascript" src="http://alkaz-comunity.googlecode.com/files/Generator_Block.js"></script></center>

5. Pilih Publikasikan.

Udah Segitu doank caranya.. Gampang kan..? Kode-Kode diatas masih bisa anda kreasikan sesuai dengan yang anda inginkan. Ok sekian dulu ya... Semoga Sukses