Kumpulan efek gambar untuk blog | Czikart Software | free Download full Version

Rabu, 28 Mei 2014

Kumpulan efek gambar untuk blog

Kumpulan efek gambar untuk blog

Berjumpa lagi dengan saya kali ini saya akan membagikan sebuah tutorial efek efek gambar untuk mempercantik blog anda,
dan mungkin sekarang dalam postingan kali ini saya tidak menyertakan contohnya atau demo, saya yakin dengan sobat smua tentunya sudah tau kan ketika sobat berkunjung ke blog lain dan ketika Sobat menaruh mous kita di sebuah gambar akan terjadi sebuah perubahan atau sebuah gerakan dari gambar tersebut entah itu membesar gambarnya atau juga berputar. nah langsung aja ni sob kalau sobat berminat tinggal  kopas kode kode tersebut di bawah ini.


  • EFEK BERPUTAR
.post img{-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}.post img:hover{-o-transform:scale(1.2) rotate(360deg) translate(0px);-moz-transform:scale(1.2) rotate(360deg) translate(0px);-webkit-transform:scale(1.2) rotate(360deg) translate(0px);-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}}




  • EFEK FADE OUT
.post img{-webkit-transition:opacity .5s ease-out;-moz-transition:opacity .5s ease-out;-ms-transition:opacity .5s ease-out;-o-transition:opacity .5s ease-out;transition:opacity .5s ease-out;}.post img:hover{opacity:0.2;}




  • EFEK BUMPING
.post img{-webkit-transition:all .5s ease-out;-moz-transition:all .5s ease-out;-ms-transition:all .5s ease-out;-o-transition:all .5s ease-out;transition:all .5s ease-out;}.post img:hover{-webkit-transform:translate(0px,10px);-moz-transform:translate(0px,-10px);-ms-transform:translate(0px,-10px);-o-transform:translate(0px,10px);transform:translate(0px,-10px);}




  • EFEK ROTASI
.post img{background-color:#ffffff;border:0px;outline:none;padding:5px 5px 20px;-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.7);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.7);box-shadow:0 1px 3px rgba(0,0,0,0.7);}.post img:hover{-webkit-transform:rotate(5deg);-moz-transform:rotate(5deg);-ms-transform:rotate(5deg);-o-transform:rotate(5deg);transform:rotate(5deg);}




  • EFEK ZOOM
.post img{ -webkit-transform:scale(0.8); -moz-transform:scale(0.8); -o-transform:scale(0.8); -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; opacity: 0.7; margin: 0 2px 2px 0; } .post img:hover{ -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1); opacity: 1; }




  • EFEK ZOOM Versi ke 2
.post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; } .post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }



Langkah Penerapannya gampang tinggal Copy/paste

  • Buka blog id sobat
  • kemudian pilih templat
  • Selanjutnya edit HTML
  • Kemudian Copy kode pilihan Sobat Letakan di atas kode ]]></b:skin>
  • Simpan


Selesai...

Selamat mencoba dan semoga bermanfaan untuk sobat semua khususnya bagi saya sendiri

================================================================
Sedikit tambahan


Efek zoom ala kaca pempesar

Letakan kode d bawah ini tepat di atas </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="http://gadget-irvan.googlecode.com/files/perbesar-gambar.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(document).ready(function($){ $('#gambaranu').perbesaranunya({ sorotanu: 2, kisaranu: [2,10], anubesar: null, pembesaranu: [140,140] }) }) </script>

dan ini kode penerapan image nya

<img id="gambaranu" src="Url gambar" style="height: 300px; width: 400px;" />





Cara memakai background image pada postigan
Penerapan nya gampang tinggal memasukan kode di bawah ini ke dalam postingan (HTML)

<div style="padding: 5px; background-image: url(URL GAMBAR FORMAT JPG); background-repeat: repeat; background-position: center;">

TULIS ARTIKEL/POSTINGAN SOBAT DI SINI

<br /> </div>



G+

Ditulis Oleh : Unknown ~ Czikart Software

Anda sedang membaca sebuah artikel yang berjudul Kumpulan efek gambar untuk blog, Silahkan download software, games, Antivirus ataupun tutorial sepuasnya secara gratis di czikart software dan tetap kunjungi czikart software. Dan bagi yang ingin Copy Paste, Silahkan sertakan link sumbernya karena kami tidak bertanggung jawab jika blog/web anda dihapus oleh google kareana tidak menyertakan link sumbernya sesuai aturan dari google, Semoga artikel tersebut bermanfaat untuk anda, Mohon maaf apabila konten yang anda baca rusak atau salah dalam penulisan. Jika ada pertanyaan, kritik, dan saran yang ingin di sampaikan silahkan komentar.

:: Terima Kasih ! ::

Artikel Terkait Menarik Lainnya :



0 komentar:

Posting Komentar

<-- link plangi -->


Konversi & menjadi &amp;
Konversi ' menjadi &#039;
Konversi " menjadi &quot;
Konversi < menjadi &lt;
Konversi > menjadi &gt;

Copyright © 2014 All Rights Reserved by らト おムや冊をれ ケまム @ czikart software

 
Jika ada Link yang Rusak Mohon Beritahu Kami agar Link Bisa Cepat di Perbaiki.
Back To Top