search

Senin, 18 Februari 2013

efek kursor


hahaha,,, awalnya bingung mau bikin postingan tentang apa.

tapi untuk ada salah satu teman saya yang menanyai mengapa saat dia mengunjungi di kursornya mousenya ada bintang.
Keluar dehh ide untuk ngepost tentang Cara memberi efek bintang di kursor mouse pada blog.
kalian bisa mencobanya dengan menggesek gesekkan kursor mouse di 
Oke langsung saja saya akan mengeshare cara membuatnya.




Caranya adalah :
  1. Login ke Akun blogger kalian
  2. Klik tata letak
  3. Klik add widget

      4. Copy kode di bawah ini


<script type='text/javascript'>
// <![CDATA[
var colour="red";
var sparkles=100;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="3px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="3px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>



5. Simpan Widget ( Gak usah di kasih nama )


Note : tulisan yang saya beri tanda warna merah boleh kalian rubah sesuai keinginan.karena itu adalah warna bintang yang akan muncul di blog kalian


Oke..
Sudah selesai tugas saya
Semoga Bermanfaat...!!!!


Read More ->>

Selasa, 12 Februari 2013

kunci gitar

CHORD C
Chord C dasar :



C pada fret 3 atau yg dikenal dengan C palang :

C pada fret 8 atau yg dikenal dengan C palang :

Chord Cm :

Chord C# :

C# pada fret 4 atau yang dikenal C# palang:


CHORD D
Chord dasar D:

D pada fret 5 atau yang dikenal D palang:

Chord Dm:

Dm pada fret 5 atau yang dikenal Dm palang:

Chord D# :

D# pada fret 6 atau yang dikenal D# palang :


CHORD E
Chord dasar E :

E pada fret 7 atau yang dikenal E palang :

Chord Em:

Em pada fret 7 atau yang dikenal Em palang :


CHORD F
Chord dasar F:

F pada fret 1 atau yang dikenal F palang :

chord fm :

chord F#:



CHORD G
Chord dasar G:

G pada fret 3 atau yang dikenal G palang :

Chord Gm:

Chord G#:


CHORD A
Chord dasar A:

A pada fret 5 atau yang dikenal a palang :

Chord Am:

Chord A#:


CHORD B
Chord dasar B:

B pada fret 7 atau yang dikenal dengan B palang:

Chord Bm:


chord-chord dasar gitar

Read More ->>

Minggu, 10 Februari 2013

cara membuat buku tamu

Kali ini saya akan memposting "Cara Memasang Buku Tamu Unik di Blog. Biasanya pada blog-blog orang lain terdapat buku tamu, nah biasanya cara pemasangan buku tamu berbeda-beda, ada yang memasang dengan cara biasa, ada juga dengan cara menyembunyikannya. Nah saya akan menjelaskan bagaimana cara memasang buku tamu di blog dengan teknik floating. Nah langsung saja langkah-langkahnya sebagai berikut :
Klik "Tambah Gadget" pada blog anda lalu pilih "HTML/JavaScript" dan letakkan script berikut di dalam formulirnya
<div style="position:fixed; left:0px; bottom:0px;">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js'></script>
<script type="text/javascript"> $(document).ready(function(){ $(".btn-slide").click(function(){ $("#panel").slideToggle(600, "easeOutBounce") $(this).toggleClass("active"); return false; }); }); </script>
<style type="text/css"> a:focus {outline: none; } #panel {background: #555;border:1px solid #000; color:#FFFFFF;     height: auto;display: none;text-align:justify; } .slide {margin: 0;padding: 0;border-top: solid 4px #422410;     background: #000 no-repeat center top; } .btn-slide { background: no-repeat right -50px; text-align: center;width: 70px; height: 15px; padding: 3px 3px 0 0; margin: 0 auto; display: block; font: bold 120%/100% Arial, Helvetica, sans-serif; color: #fff; text-decoration: none; } .active { background-position: right 12px; }</style>
<div id="panel">Script Buku Tamu anda atau bisa juga widget yang lain<br /> 
</div><p class="slide"><a href="#" class="btn-slide"></a></p></div>
- Pada text color:#FFFFFF; anda bisa ganti dengan warna lain.
- Lalu pada baris background: url(URL ANDA).
- Anda juga dapat merubah letak floatingnya yaitu dengan merubah pada <div style="position:fixed;   left:0px; bottom:0px;"> atau bisa juga menghapusnya.
- Kemudian pada baris $("#panel").slideToggle(600, "easeOutBounce") anda dapat merubah tulisan "easeOutBounce" dapat di ganti dengan : -"easeInBack" atau "easeOutBack" atau "easeInOutBack"  dan dapat di lihat hasilnya sendiri.
- Anda pun dapat merubah kecepatan animasi pada baris (600, "easeOutBounce") anda dapat mengganti angka 600 dengan angka lain, semakin besar angka maka effect animasi semakin lambat.
Itu saja tutorial dari saya, semoga bermanfaat. :D
Read More ->>

Jumat, 08 Februari 2013

cara mengganti tombol prev dab next


esuai dengan judul dari postingan, kali ini saya akan berbagi kepada sobat tentangbagaimana cara mengganti tombol previous, home dan next pada blog. Mengganti tombol previous, home dan next bukanlah merupakan sebuah hal yang sulit untuk dilakukan, cukup hanya dengan mengganti bebrapa kode yang ada pada templateblog.

Tombol previous, home dan next bisa sobat modifikasi sendiri dengan kreatifitas dan imajinasi yang sobat punya. Contohnya mengganti icon-icon tombol previous, home dan next tersebut dengan icon yang sobat edit sendiri dan menguploadnya sehingga icon tersebut bisa sobat gunakan. 

Nah jika sobat tertarik mengganti tombol previous, home dan next pada blog sobat, perhatikan langkah-langkahnya berikut ini :

1. Login ke blogger
2. Pilih Template » Edit HTML » Centang Expand Template Widget
  • Untuk mengganti tulisan Beranda atau Home, cari <data:homeMsg/> ganti dengan :
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKAdqyD8z2r8rN-0GlQfncLMndk8CNDx2j4ZHg0AOqjVB0PvO9rhJVvvSi4rC17-TUMhO87ACtedgP1LL4AVI5DfqFOCJ01CiD_5-WAQLtC5koM-NhrLtbU3A7E7syLlDrmuZCelAGCDk/s1600/home.png'/>
  • Untuk mengganti tulisan Next, cari <data:olderPageTitle/> ganti dengan :
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgLTBctDEXGbMyTRlbY6TKNc_3LR24UYFZUN_m9rsovGzEKiEWa0IoIuQHbNCN4-yCy2EeEa9uF3MTFQgpF1FKBQwHhOLAcn4UXkL3cGBXjXPTMGnYxZbN4kQBRrYEKT3aHtfpMHCKRq0/s1600/next-page.PNG'/>
  • Untuk mengganti tulisan Previous, cari <data:newerPageTitle/> ganti dengan :
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoVUFYP7h9TY7XqNk2CMuMQQgNO7CE7ZMZDhWtLsRcBjtY7sH-oGY_8sMmB_Qz5J84UoeebjsmHSw6sfTpG_Co1o9-AqBVsvKGjXALQ9WswlaTlqCxO6xdkDShqNKbSGnDDmev8hWbVvY/s1600/prev-page.PNG'/>
Keterangan : Warna Merah merupakan URL image atau icon yang sudah diupload. Sobat bisa menggantinya sesuai dengan keinginan sobat. Dari ke-tiga url image/icon di atas, hasilnya akan terlihat seperti ini :
mengganti prev-home-next pada blog
3. Simpan template dan lihat hasilnya.

Semoga bermanfaat, salam bloggers...!!!
Read More ->>

cara membuat awan akatsuki

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWABmz5kaGaWmoW_E6UGe_lPD3Cl7DO5SMZ91LWkzy993uKiVhrK1gTGcIzJt0yQkNcj3ytfjMRuYh1882T-Y0VLtsiUnDvnU5FB_0Imc_eS250AOp3huth7aWmArJ9H2YXkiwuCr6p-k/s1600/Untitled-1.png


Jika ada yang belum mengerti bisa tanyakan pada saya :)

untuk memasang pada blog kamu,pertama buka blogger=>template=>edit HTML

lalu letakan CSS di atas kode ]]></b:skin>

Sedangkan Untuk HTMLnya kamu letakan kodenya di bawah code <body>


CSS


#akatsuki{position: absolute;
z-index: 0;
width:100%;
margin-top: 0px;
height: 0px;}
.akatsuki {
width: 200px; height: 138px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWABmz5kaGaWmoW_E6UGe_lPD3Cl7DO5SMZ91LWkzy993uKiVhrK1gTGcIzJt0yQkNcj3ytfjMRuYh1882T-Y0VLtsiUnDvnU5FB_0Imc_eS250AOp3huth7aWmArJ9H2YXkiwuCr6p-k/s1600/Untitled-1.png") no-repeat top center;
position: relative;
}



.awanmerah1 {
-webkit-animation: moveclouds2 15s linear infinite;
-moz-animation: moveclouds2 15s linear infinite;
-o-animation: moveclouds2 15s linear infinite;
}
.awanmerah2 {
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6;
-webkit-animation: moveclouds2 25s linear infinite;
-moz-animation: moveclouds2 25s linear infinite;
-o-animation: moveclouds2 25s linear infinite;
}
.awanmerah3 {
left: -250px; top: -200px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
-webkit-animation: moveclouds2 20s linear infinite;
-moz-animation: moveclouds2 20s linear infinite;
-o-animation: moveclouds2 20s linear infinite;
}
.awanmerah4 {
left: 470px; top: -250px;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.75;
-webkit-animation: moveclouds2 18s linear infinite;
-moz-animation: moveclouds2 18s linear infinite;
-o-animation: moveclouds2 18s linear infinite;
}
.awanmerah5 {
left: -150px; top: -150px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
-webkit-animation: moveclouds2 20s linear infinite;
-moz-animation: moveclouds2 20s linear infinite;
-o-animation: moveclouds2 20s linear infinite;
}
@-webkit-keyframes moveclouds2 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds2 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds2 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}





HTML



<div id='akatsuki'>
<div class='akatsuki awanmerah1'/><div class='akatsuki awanmerah2'/><div class='akatsuki awanmerah3'/><div class='akatsuki awanmerah4'/><div class='akatsuki awanmerah5'/></div>

Semoga artikel Cara Membuat Awan Akatsuki Di Blog ini berguna .. terima kasih

Read More ->>
Diberdayakan oleh Blogger.

slide to unlock