Tuesday, August 27, 2013

Cara Membuat Gambar Berputar di Blog

Artikel kali ini masih seputar gambar yaitu tentang cara membuat gambar berputar di blog, tidak jauh berbeda dengan artikel sebelumnya yang membahas cara membuat gambar posting berputar dan juga membesar ketika di sentuh oleh kursor. Bedanya, kalau yang sebelumnya memutar gambar di setiap artikel yang telah kita buat, kali ini kita akan memutar gambar yang ada di sidebar, footer ataupun pada header blog.


Dengan cara memasukan gambar kita sendiri, ke tata letak pada bagian Add HTML, Untuk lebih jelasnya Silakan arahkan mouse anda ke gambar diatas. Cara membuatnya silakan ikuti langkah-langkah dibawah ini.
  1. Login ke blogger. Pada halaman Dasbor, pilih pengaturan Tata Letak.
  2. Selanjutnya klik Tambahkan Gadget. Dan pilih HTML/Javascript.
  3. Setelah itu copi kode dibawah ini.
  4. <style>
    #img{
    width: 250px;
      height: 200px;

      position: relative;
    -moz-transition:all .8s ease-in-out;;
    -ms-transition:all .8s ease-in-out;;
    -o-transition:all .8s ease-in-out;;
    -webkit-transition:all .1s ease-in-out;
    transition:all .8s ease-in-out;}
    #img:hover{
    -o-transform: scale(1) rotate(360deg);
    -moz-transform: scale(1) rotate(360deg);
    -webkit-transform: scale(1) rotate(360deg);
    }
    </style>
    <div id="img">
      <img id="img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgblIyoQOKpZAOnT6aNWV0bvEOA6oDmbI9QSkcKYF74S5jMmKu-eZeLF5TtuI4oyGsxggt_mzaE7BoIA4WCF-iES22oN1IxSFfUyF6PTBZo24tOElRiLjuWGPbLp9v8PF0XgbhsOENs3nJu/s1600/A.jpg" />
    </div>
  5. Dan Pastekan di HTML/Javascript Tadi.
  6. Setelah itu save, lalu pindahkan gadget gambar ini ketempat yang kalian inginkan. Selesai.
Keterangan Kode:
width: 250px; height: 200px; Untuk mengatur lebar dan tinggi gambar.
8s adalah lama putaran gambar.
scale(1) ini fungsinya agar gambar tetap pada ukuran semula ketika disentuh mouse, jadi gambar tidak membesar atau mengecil ketika disentuh kursor.
Dan  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgblIyoQOKpZAOnT6aNWV0bvEOA6oDmbI9QSkcKYF74S5jMmKu-eZeLF5TtuI4oyGsxggt_mzaE7BoIA4WCF-iES22oN1IxSFfUyF6PTBZo24tOElRiLjuWGPbLp9v8PF0XgbhsOENs3nJu/s1600/A.jpg adalah URL dari gambar yang ingin kalian masukan.
    Itulah sedikit pembahasan atau tutorial desain blog yang dapat saya bagikan, yaitu tentang cara membuat gambar berputar di blog, ketika disentuh kursor mouse. Semoga Bermanfaat.
      Share:

      0 comments:

      Post a Comment

      BTemplates.com

      Powered by Blogger.