Cara Membuat Gambar Memutar pada Blog

Cara Membuat Gambar Memutar pada Blog ~ Bagi para bloger sekalian yang suka memodifikasi blognya dengan semenarik mungkin disini saya akan memberikan satu trik tentang gambar memutar apabila diarahkan oleh cursor, kini menggunakan CSS dan kode Html langsung saja simak langkah-langkahnya...
pertama anda masuk dulu  keblog
setelah itu ada laman Tata Letak disana ada Konten Tambahkan Gadget lalu anda klick dan pilih Gadget Html/Javascript, setelah jadi masukan kode ini kedalam konten yang tersedia,

<style type="text/css">  
<#mode-miring,#mode-depan,#mode-pindah
{  
  width:70px;  
  height:18px;  
  border:1px solid #999;  
  box-shadow: 2px 2px 5px #aaa;  
  padding:5px;  
  font-size:12px;  
  font-weight:bold; 
  background: #faa518;  
  text-align:center;  
  -webkit-transition: all 0.4s ease-in-out;  
  -moz-transition: all 1s ease-in-out;  
  -o-transition: all 1s ease-in-out;
}>
 
#mode-miring a, #mode-depan a, #mode-pindah a
{  
  color:#000;  
  text-decoration:none;
} 

#mode-miring a:hover, #mode-depan a:hover, #mode-pindah a:hover
{  
  color:#0000ff;  
  background-color:#ffff00;  
  text-decoration:none;
} 

#mode-miring:hover
{
    -webkit-transform: rotate(180deg) scale(1);
    -moz-transform: rotate(180deg) scale(1);
    -o-transform: rotate(180deg) scale(1);
    //background:#ffff00;
-moz-transition: all 2s ease-in-out;
-webkit-transition: all 2s ease-in-out;

-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}  

ul.menu-semua
{
   list-style:none;
   margin:0;
   padding:0;
} 

ul.menu-semua li
{
   display:inline-block;
   width:85px;
} 

#mode-depan:hover
{
    -webkit-transform: scale(1.3);
    -webkit-transform: translate(20px,-10px) scale(1.3);
    background:#ffff00;
}  

#mode-pindah:hover 
{
    margin-left:20px;
    padding-left:5px;
    background:#ffff00;
} 
</style>


<div id="mode-miring"><p><img src="http://readmore1234.googlecode.com/files/Banner-Blog.gif" /></p></div><br />

jika anda ingin mengganti gambarnya maka anda tinggal merubah code ini

<div id="mode-miring"><p><img src="http://readmore1234.googlecode.com/files/Banner-Blog.gif" /></p></div><br />

menjadi link gambar yang anda punya contohnya seperti ini

<div id="mode-miring"><p><img src="http://desaindigital.com/wp-content/uploads/2010/12/tutorial-ikon-bola-dunia/tutorial-ikon-bola-dunia-5.jpg" /></p></div><br />

lihat link yang berwarna tersebut berikut adalah gambar atau code apabila anda ingin merubah gambarnya, disini saya menggunakan gambar bumi bisa dilihat perubahan dari gambar tersebut :

  jika sudah maka tinggal tekan simpan setelah itu lihat blog anda.
Semoga bermanfaat silahkan baca artikel yang lebih menarik lainnya