Efek Hover 1

Anda Ingin Hover Ketika Diklik Gambar Muncul Gambar Berbeda
Kodenya Di bawah Ini:

Simpan CSSnya Dulu

<style>
#descript a:link {
  color: #990000;}

#descript a:hover {
  text-decoration: none;
  color: #990000;}

#descript a:link span {
  display: none;}

#descript a:hover span {
  position:absolute;
  display: inline;
  margin: 0 0 0 10px;
  -webkit-animation:aniload 3s;
  -moz-animation:aniload 3s;
  -ms-animation:aniload 3s;
  -o-animation:aniload 3s;
  animation:aniload 3s;}


@-webkit-keyframes aniload {
  from {-webkit-transform:translate(0px, 1000px)}
  to   {-webkit-transform:translate(0px, 0px)}
}

@-moz-keyframes aniload {
  from {-moz-transform:translate(0px, 1000px)}
  to   {-moz-transform:translate(0px, 0px)}
}

@-ms-keyframes aniload {
  from {-ms-transform:translate(0px, 1000px)}
  to   {-ms-transform:translate(0px, 0px)}
}

@-o-keyframes aniload {
  from {-o-transform:translate(0px, 1000px)}
  to   {-o-transform:translate(0px, 0px)}
}

@keyframes aniload {
  from {transform:translate(0px, 1000px)}
  to   {transform:translate(0px, 0px)}
}
</style>

 
Lalu Sekarang Simpan Kode HTMLnya dimana Saja Seseuai Anda Inginkan

<div id="descript">
<a href="https://www.blogger.com/blogger.g?blogID=8049220762892332524#">
  </a><br />
<div align="center">
<a href="https://www.blogger.com/blogger.g?blogID=8049220762892332524#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWrD_ByJI_kzWFsSo91Ap1kd7DZ8rPavskv2jbpmk82FJGInLbqHfgYWr0BiBqHPTfh3cwY_HY7j-53aGdihk18q_PQZafDDdCt9LQT7s935EMTMO5-RXDuOMKCucb7DIgXKZN1GTMp8o/s1600/Jewl1CLR.gif" height="80" width="300" /></a></div>
<a href="https://www.blogger.com/blogger.g?blogID=8049220762892332524#">
<img height="165" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVNAx6w2pF7MMH10NIaW9banwtjz74x6S0SZwfsijgzT8281rsPYoFR6YBh2CpWEm83jTQXP0LE8iBWn2YvB1nKWuFzlO3-l12LxFRvbWBjm_O3izuCC7RbM6B7M87cXk8FTVHPeA9_qXL/s125-no/Untitled-1.jpg" width="240" /></a></div>

 Keterangan :
 

Warna hijau ganti dengan URL Gambar Anda 
Yang alt="..." itu isi dengan bacaan yang ingin ditampilkan..
 

3. Selasai sudah
4. Tinggal Simpan

Read more

Efek Hover 2

Anda Pengen Seperti Saya Efek Hover yang Puter puter gitu..
caranya Gampang.
Ikuti saja langkah berikut ini:
1. Anda Cari Dulu Kode ]]></b:skin> copykan kode dibawah ini tepat diatas kode   

<style type='text/css'>
.stage {
  margin: 0 auto;width: 210px;height: 140px;
  position: relative;perspective: 1000px;}

#gallery {
  width: 100%;height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  animation: rotation 20s infinite linear;
  -webkit-animation: rotation 20s infinite linear;
  -moz-animation: rotation 20s infinite linear;}

//menghentikan gerak putaran (hover mouse)...
#gallery:hover {
  animation-play-state: paused;
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;}

#gallery figure {
  display: block;position: absolute;
  width: 186px;height: 116px;
  left: 10px;top: 10px;
  background: black;overflow: hidden;
  border: solid 5px #666;}

//peletakan serta pengaturan tampilan gambar...
#gallery figure:nth-child(1) {
  transform: rotateY(0deg) translateZ(288px);
  -webkit-transform: rotateY(0deg) translateZ(288px);
  -moz-transform: rotateY(0deg) translateZ(288px);}

#gallery figure:nth-child(2) {
  transform: rotateY(40deg) translateZ(288px);
  -webkit-transform: rotateY(40deg) translateZ(288px);
  -moz-transform: rotateY(40deg) translateZ(288px);}

//teruskan dengan selisih nilai rotateY(40deg) pada gambar berikutnya...
#gallery figure:nth-child(3) { ...}
#gallery figure:nth-child(4) { ...}

img{
   -webkit-filter: grayscale(1);
   cursor: pointer;
   transition: all 1.5s ease;
   -webkit-transition: all 1.5s ease;
   -moz-transition: all 1.5s ease;}

img:hover{
   -webkit-filter: grayscale(0);
    transform: scale(1.2,1.2);
   -webkit-transform: scale(1.2,1.2);
   -moz-transform: scale(1.2,1.2);
   transform: rotate(360deg);
   -webkit-transform: rotate(360deg);
   -moz-transform: rotate(360deg);}

@keyframes rotation{
 from {transform: rotateY(0deg)}
 to {transform: rotateY(360deg)}}
</style>

  

 2. Lalu Anda Sekarang copykan dimanasaja sesuai anda inginkankan

   yang penting bersatu dengan kode HTML

  
  

<figure><img src="http://URL-Gambar Anda (1).png" alt="..."></figure>
<figure><img src="http://URL-Gambar Anda (2).png" alt="..."></figure>
...
//dan seterusnya...
    </div>
</div>

 Keterangan :


Warna hijau ganti dengan URL Gambar Anda
Yang alt="..." itu isi dengan bacaan yang ingin ditampilkan..



3. Selasai sudah

4. Tinggal Simpan

Read more

Cara Membuat Link Bergoyang Saat Di Sentuh Oleh Cursor

Anda Ingin Seperti Saya Apabila Link Di Sentuh Cursor Suka Bergoyang.. Nich Saya Punya Tutorial Nya :

1. Masuk Dulu Ke Blog Anda
2. Masuk Ke Template
3. Pilih Edit HTML
4. Cari KOde </head> Biar Gampang Klik Ctrl F
5. Copykan Kode berikut ini Diatas Kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'> 
$(document).ready(function() { 

6. Simpan
$(&#39;a&#39;).hover(function() { //mouse in 
$(this).animate({ marginLeft: &#39;12px&#39; }, 400); 
}, function() { //mouse out 
$(this).animate({ marginLeft: 0 }, 400); 
}); 
});</script>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'> 
$(document).ready(function() { 
$(&#39;a&#39;).hover(function() { //mouse in 
$(this).animate({ marginLeft: &#39;12px&#39; }, 400); 
}, function() { //mouse out 
$(this).animate({ marginLeft: 0 }, 400); 
}); 
});</script> Read more

Cara Memasang Buku Tamu (Cbox) Lengkap

Berikut ini adalah Cara Memasang Buku Tamu (CBOX) Di Blog: Kiri, Kanan, Bawah, Atas:

1. Seperti biasa sobat harus Login dulu di akun blog sobat
2. Pilih Tata Letak
3. Tambah Gadget HTML/Java Script
4. Selanjutnya copy paste kode script di bawah ini dan masukan ke dalam Gadget HTML/Java Script
   
   
   
   <style type="text/css">
   #at{
   position:fixed;
   right:35%;
   z-index:+1000;
   }
   * html #at{position:relative;}
   .attab{
   height:0px;
   width:0px;
   float:top;
   cursor:pointer;
   background:url(url);
   }
   .atcontent{
   float:left;
   border:2px solid #fff;
   background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSA8BI5vjEm1q6n4ySAoOver4TZ3S4Ed8O2E1uCapkK_EuJtEvB1GMRUiT5Yl0BDCX9f9jCqKOiFSaq1QgFHpHaGgPBiJ2g_tcv6x5EDnHCRhJUg8QpXOxDzbwTdKs0xlsq2IH4JSuTcrA/)#000000 repeat-x bottom center scroll;
   -moz-border-radius:10px;
   padding:10px;
   }
   .atcontent:hover{
   border:2px solid #fff;
   background:url(http://petir-project.googlecode.com/files/zuaz-petir.gif)#000000 repeat-x bottom center scroll;
   }
   </style>
   <script type="text/javascript">
   function showHideAT(){
   var at = document.getElementById("at");
   var w = at.offsetWidth;
   at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
   at.opened = !at.opened;
   }
   function moveAT(x0, xf){
   var at = document.getElementById("at");
   var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
   var dir = xf>x0 ? 1 : -1;
   var x = x0 + dx * dir;
   at.style.bottom = x.toString() + "px";
   if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
   }
   </script>
   <div id="at">
   <div class="attab" onclick="showHideAT()"> </div>
   <div class="atcontent">
   <div align="center">
   <div style="background:url(http://i53.tinypic.com/oiu4n9.gif) no-repeat;">
   
   Strip kode cbox sobat
   
   </div>
   </div>
   <br />
   <div align="right"><a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png" alt="close" title="Tutup Cbox" /></a></div>
   </div></div>
   
   <script type="text/javascript">
   var at = document.getElementById("at");
   at.style.bottom = (-200-at.offsetWidth).toString() + "px";
   </script>

Klik save / simpan.

Keterangan:

1. Kode warna merah adalah warna gambar, silakan sobat sesuaikan sendiri sesuai selera bila ingin mengganti gambarnya
2. Kode warna kuning adalah penepatan dimana cbox akan muncul, bila sobat ingin cbox muncul dari atas ganti kode tersebut menjadi TOP, dari sebelah kiri LEFT, dari sebelah kanan RIGHT .
3. Kode warna putih adalah jarak cbox dari sebelah kanan. Silakan sobat sesuaikan sendiri.
4. Texts berwarna hijau adala tempat untuk menaruh strip kode cbox sobat (atur cbox sobat agar backgroudnya transparant untuk hasil yang lebih sempurna).

Selanjutnya adalah cara membuat tombol cbox (tombol untuk menampilkan cbox)

1. Tetap login di akun blog sobat
2. Masukan script berikut bersamaan dengan script di atas dalam gadget HTML / Java Script

<div style="position: fixed; top: 55px; right: 5px;width:30px;height:100px;"><a href="javascript:void(0);"onclick="showHideAT()"/><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH9qXeFoVUn9BepYDlkHsk1Ic_woafGYiQ7zooe0XSFKsDZmX93XfiVVqOSzSdG8t5AkFTdvKEG70_pASb9N-UFJzQIbiC0xdtcybTIIxlcszdSeE51rek29ONjqfI4o8Fj5D_kKDeuf2V/s128/guestbook.png" alt="cbox" title="Buka Chat Book"/></a></div>

Keterangan: 

• Kode berwarna merah adalah gambar tombol, bisa sobat ubah sesuai selera.
• Kode warna kuning adalah dimana tombol akan ditempatkan, TOP untuk menempatkan tombol di atas, BOTTOM untuk menempatkan tombol di bawah, LEFT untuk menempatkan tombol di sebelah kanan.
• Kode warna biru anda sesuaikan jarak tombol TOP dari atas blog, BOTOM dari bawah blog.

Demikianlah Cara Lengkap Memasang Buku Tamu / CBOX Di Blog: Kiri, Kanan, Bawah, Atas. Semoga bermanfaat bagi sobat semua. Read more

Kunci Hadroh

Anda Suka Memainkan Hadroh..?? Nich Saya Punya Kuncinya Karena saya juga suka memainkan Hadroh.
Saya Ingin berbagi kunci sama kalian semua..

Kunci Al-Banjari

1. DT DDD / TDT DDD / ( diketuk ber xx mengikuti lagu )
2. TD TTTT TTTD DDDD DDDD TTT. D. TTTT TTT. D. TTTD
3. T.T.T. TTTT TTT. D. TTTD TTT. D. TTTD TTT. D. TTTD
4. T.T.T. TTTT TTT. D. TTTD TTT. D. TTTD TTT. D. TTTD
TTT. D. TTT DD
TTT. D. TTTD

1. D.T DDDT / TDTT DDDT / ( diketuk ber xx mengikuti lagu )
2. TDTT TTTT TDDD DDDD DDTT TTDT TTTT TTDT TD
3. T. TTTT TTTT TTDT TDTT TTDT TDTT TTDT TD
4. T. TTTT TTTT TTDT TDTT TTDT TDTT TTDT TDTT
TTDT TDDT
TTDT TD

Ket : Rumus di atas adalah rumus dasar (belum diterapkan pada lagu), apabila akan diterapkan pada lagu maka rumus tersebut diketuk dengan mengikuti panjang pendeknya lagu, dengan cara dikurangi atau ditambah. Ketentuannya, untuk rumus A (yang ditambah atau dikurangi) adalah pada ketukan TTT. D. TTT D dan untuk rumus B pada ketukan TTDT TDTT.

CONTOH PENERAPAN PADA LAGU

Lagu Assalamu’alaik : Baris nomor 3 diketuk 2x, baris nomor 4 dikurangi 1
Lagu Yaa Nabi Salam ’Alaik : Baris nomor 4 ditambah 1.
Lagu Yaa Imamarrusli : Baris nomor 3 diketuk 2x, baris nomor 4 dikurangi 1.
Lagu Thola’al Badru : Baris nomor 3 dikurangi 1.

CONTOH VARIASI KETUKAN AWALAN LAGU

D / D DDD / T DDD...
D / TD TDD / T DDD...
D / D. D. D TT D / T DDD...
D / DD D / T DDD...
D / D D DD / T DDDT...
D / TD T. DD / T DDDT...
D / D. D. D TT TD / T DDDT...
D / DD D / T DDDT...

CONTOH KETUKAN BASS

D / D DD D
D / DD DD D
D / D DD D
D / D DD DD D D
D / D D D

Ket : Untuk ketukan awalan Bas, mengikuti ketukan awalan pada rumus A.

RUMUS DASAR HADLROH ( pelan )

ASSALAMU’ALAIK

A. 1. T. D. TT TD ( diketuk ber xx mengikuti lagu )
2. T. D. TT TDD TT TT T TT TD D DD DD D DD DD
T. TT D TT TT T TT TT D TT TD
B. 1. T. DT. TD ( diketuk ber xx mengikuti lagu )
2. T. DT. T. DDT T. TT T T. DD D D DD D DDT
TT D TT T TT TT TT D TT TD

MAULAYA

A. 1. D/ DD. T. TT. TD / ( diketuk ber xx mengikuti lagu )
2. DD. T. TT. TDD TT TT T TT TD D DD DD D DD DD
T. TT D TT TT T TT TT D TT TD
3. T. TT D TT TT T TT TT D TT TD T TT TT D TT TD
T TT TT D TT TDD TT TT D TT TD
B. 1. D/ DD. T. TD / ( diketuk ber xx mengikuti lagu )
2. DD. T. T. DD T T. TT T T. DD D D DD D DDT
TT D TT T TT TT TT D TT TD
3. T.T.T. DT T TT TT TT D TT TD TT TT D TT TD
TT TT D TT T DD TT TT D TT TD

EKSTRA BONUS VARIASI

1. A. D/ TD TDD / ( Huwannur, Ala Ya Rosulalloh )
B. D/ TD T. DD /
2. A. DD/ TT TT T. DD / ( Ya Madihan )
B. DD/ TT T TT TDD /
3. A. D/ TD T DDD / TT TT TD ( Ya Robbana’tarofna )
B. D/ TD T. DD DD / TT T TT TD
4. A. D/ T DT DT DD / ( Saaltulloh Barina )
B. D/ TD TD T. D DD /
5. A. DT / T DDX ( Ya Badrotim )
B. DT / T. DD DX
6. A. DTT. DTTD TT XX ( Lagu bebas )
B. D. TT. D. TT. TD. TT. XX.

Read more