CARA MEMBUAT EFEK BERGOYANG PADA GAMBAR ARTIKEL TEMPLATE BLOGGER CARA MEMBUAT EFEK BERGOYANG PADA GAMBAR ARTIKEL TEMPLATE BLOGGER - SUARA HARIAN OTO BEMO BERODA TIGA
Suara Harian Oto Bemo Beroda Tiga

Komunikasi, Media Ilmu & Pengetahuan Umum Blogging

Langsung ke konten utama

"OTO BEMO.. OTO BEMO.. BERODA TIGA .. TEMPAT BERHENTI.. DITENGAH TENGAH KOTA..PANGGIL NONA..PANGGIL NONA..NAIK KERETA..NONA BILANG..TIDAK PUNYA UANG.. JALAN KAKI SAJA"

CARA MEMBUAT EFEK BERGOYANG PADA GAMBAR ARTIKEL TEMPLATE BLOGGER

Gambar
🔓Owner Post Published 🕕
HOME GOOGLE CARA MEMBUAT EFEK BERGOYANG PADA GAMBAR ARTIKEL TEMPLATE BLOGGER
Sebelumnya anda mungkin mengalami menghidupkan lilin dimalam hari dalam keadaan gelap gulita, tampaklah api lilin tersebut bergoyang ditiup oleh angin itu sebagai gambaran api bergoyang adalah efek angin tak bisa membaca. Nah kali ini saya akan membuat pengaruh shake atau pengaruh bergoyang yang di implementasikan didalam gambar kiriman blogspot tanpa ada komplemen mark up apapun dan hanya menggunakan pengaruh murni CSS3 yang tidak akan terlalu kuat terhadap beban loading blog anda.

Efek ini akan bekerja pada saat pengunjung melakukan mouse over atau melakukan hover baik itu terhadap gambar yang mempunyai anchor link maupun gambar yang tidak memilikinya. Efek shake yang membuat gambar blog anda bergoyang ini akan bekerja pada semua browser mirip IE, Firefox, Chrome, Safari, Opera bahkan saya telah mencoba melakukan hover pada browser di perangkat android dan pengaruh inipun bekerja sangat mulus tanpa ada kendala.
 
Sebelumnya anda mungkin sudah mencoba memasang  Cara Menciptakan Efek Bergoyang Pada Gambar Posting Blog.
Langkah-langkah membuat pengaruh bergoyang pada gambar di blog:
1) Masuk ke dashboard blog anda
2) Klik Template control F
3) Klik edit tempalte kemudian cari aba-aba ]]></b:skin>
4) Salin kemudian pastekan semua scrift css dibawah ini tepat diatas aba-aba tersebut
Klik ganda untuk menyalin
 

.entry-content img {  transition-duration:0.5s;  transition-timing-function: ease;  transition-delay:0s;  -moz-transition-duration:0.5s;  -moz-transition-timing-function:ease;  -moz-transition-delay:0s;   -webkit-transition-duration:0.5s;  -webkit-transition-timing-function:ease;  -webkit-transition-delay:0s;  -o-transition-duration:0.5s;  -o-transition-timing-function:ease;  -o-transition-delay:0s;  }  .entry-content img:hover {  animation-name: goyang;  animation-duration: 0.8s;  transform-origin:50% 50%;  animation-iteration-count: infinite;  animation-timing-function: linear;  -moz-animation-name: goyang;  -moz-animation-duration: 0.8s;  -moz-transform-origin:50% 50%;  -moz-animation-iteration-count: infinite;  -moz-animation-timing-function: linear;  -webkit-animation-name: goyang;  -webkit-animation-duration: 0.8s;  -webkit-transform-origin:50% 50%;  -webkit-animation-iteration-count: infinite;  -webkit-animation-timing-function: linear;  }  @keyframes goyang{  0% { transform: translate(2px, 1px) rotate(0deg); }  10% { transform: translate(-1px, -2px) rotate(-1deg); }  20% { transform: translate(-3px, 0px) rotate(1deg); }  30% { transform: translate(0px, 2px) rotate(0deg); }  40% { transform: translate(1px, -1px) rotate(1deg); }  50% { transform: translate(-1px, 2px) rotate(-1deg); }  60% { transform: translate(-3px, 1px) rotate(0deg); }  70% { transform: translate(2px, 1px) rotate(-1deg); }  80% { transform: translate(-1px, -1px) rotate(1deg); }  90% { transform: translate(2px, 2px) rotate(0deg); }  100% { transform: translate(1px, -2px) rotate(-1deg); }  }  @-moz-keyframes goyang{  0% { -moz-transform: translate(2px, 1px) rotate(0deg); }  10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }  20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }  30% { -moz-transform: translate(0px, 2px) rotate(0deg); }  40% { -moz-transform: translate(1px, -1px) rotate(1deg); }  50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }  60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }  70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }  80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }  90% { -moz-transform: translate(2px, 2px) rotate(0deg); }  100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }  }  @-webkit-keyframes goyang{  0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }  10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }  20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }  30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }  40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }  50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }  60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }  70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }  80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }  90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }  100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }  } 


 5) Klik Simpan
Sekarang coba lihat salah satu posting blog yang terdapat gambar atau foto maka pengaruh bergoyang pun akan mengiringinya pada saat anda melakukan hover. Enjoy & Happy Coding!
Sumber https://8tutorialandroid.blogspot.com/ Baca Juga : Pertimbangkan-dalam-membuat-logo


Bagaimana Reaksi Anda Tentang Artikel Ini?

Komentar

Posting Komentar

SILAKAN KOMENTAR SESUAI TOPIK.....

POPULAR POST

HALAL BIHALAL PDAM KOTA PONTIANAK

🔓Owner Post Published 🕕
PDAM Kota Pontianak melaksanakan halal bihalal sabtu tanggal 27 Oktober 2007 dihalaman Surau Almutahhroh kantor PDAM dihadiri seluruh jajaran staf, pejabat, 3 Direksi yaitu ; Dirut Syahril Japarin, Dirum, Dirtek serta keluarga besar PDAM Kota Pontianak dan para undangan serta menghadiri bapak Ustad Drs. Abdul Aziz, yang dalam ceramahnya jangan "selingkuh" yang sudah berkeluarga dan harmonisasi hubungan atasan dan bawahan harus dijaga. Ketika pak ustad mengulangi kalimat selingkuh karyawan dan karyawati tersenyum simpul. Baca Juga :   Pdam-kota-pontianak-milik-pemkot Selingkuh adalah perilaku melanggar komitmen hubungan, yang akhirnya melukai rasa percaya dalam sebuah hubungan romantis. Oleh karena itu, batasan selingkuh tiap pasangan bisa berbeda, tergantung pada komitmen hubungan mereka masing-masing. Misalnya, Sinta bisa saja berpendapat bahwa jika Rama menonton film porno, ia telah berselingkuh. Sementara menurut Budi, Ani berselingkuh jika melakukan hubungan seksual d...
9 komentar
🔗BACA SELENGKAPNYA »

IMAM GHAZALI 40 JILID KITABNYA MUSNAH DIBAKAR

🔓Owner Post Published 🕕
Imam Ghazali, 40 Jilid Kitabnya Musnah Dibakar  Di kalangan para sufi, Imam Ghazali adalah ikon tersendiri. Ia sangat produktif, sementara karya-karyanya sungguh luar biasa. Dalam beberapa tulisannya, tasawuf disuguhkan dalam penalaran dan argumentasi yang sungguh mencengangkan. Hampir semua karyanya menjadi rujukan dan bahan penelitian hingga kini. Bagi Ghazali, tasawuf merupakan himpunan antara akidah, syariat dan akhlak. Baginya perjalanan spritual seseorang mampu menjernihkan hati secara berkesinambungan sehingga mencapai tingkat Musyahadah (kesaksian). Menurut Ghazali, kehidupan seorang muslim tidak dapat dicapai dengan sempurna kecuali dengan mengikuti jalan Allah yang di lalui secara bertahap. Tahapan itu antara lain tobat, sabar, kefakiran, zuhud, tawakal, cinta dan makrifat. Setelah ketujuh tahapan itu, manusia memperoleh Ridla. Oleh karena itu seseorang yang mempelajari taawuf wajib mendidik jiwanya. Lebih dari itu juga harus mendidik akhlaknya. Menurut dia,...
Posting Komentar
🔗BACA SELENGKAPNYA »

NUR MUHAMMAD ADALAH CAHAYA ATAU RUH

🔓Owner Post Published 🕕
Hakekat Nur Muhammad ini perlu diterangkan lebih lanjut agar bisa difahami semuanya. Apa itu Nur Muhammad, dan apa hubungannya dengan diri nabi Muhammad, dan apa hubungannya dengan diri manusia. Dalam ranah hakikat, Nabi Muhammad dan Nur Muhammad itu berbeda. Nabi Muhammad adalah manusia. Anak dari seorang ayah bernama Abdullah dan ibunya bernama Aminah. Lahirnya di Mekah dan makamnya di Madinah. Tetapi hakekat "Nur Muhammad" adalah cahaya atau ruh, jiwa yang tunggal, jiwa jiwa yang terpuji. Hakekat Nur Muhammad itu ada dalam diri tiap tiap manusia, ada dalam diri kalian semua, sebagaimana ada dalam diri para nabi-nabi Allah dan rasul rasulNya, serta wali-wali Allah. Nur Muhammad itu hanya ada satu namun ada dalam diri semua umat manusia, jika engkau pakai akalmu, bisa bingung, bagaimana bisa ada satu hal namun ada dalam tiap manusia yang jumlahnya milyaran?? Lalu apa hubungannya antara Nur Muhammad itu dengan diri nabi Muhammad?? Diri nabi Muhammad ...
2 komentar
🔗BACA SELENGKAPNYA »

DAGING- DAGING

🔓Owner Post Published 🕕
Sepuluh (10) ribu tahun silam, manusia mulai mendomestikasi hewan dan tumbuhan. Hewan-hewan liar ditangkap, dilatih, dirawat, dan dikembangbiakkan. Manusia tak perlu lagi berburu untuk memakan daging.  Manusia adalah spesies luar biasa. Ia tak hanya unggul dibanding hewan-hewan lain, tapi juga menaklukkan, mengatur, dan menentukan nasib alam raya. Alam menyediakan tanah, manusia menyulapnya menjadi gerabah. Alam menyediakan logam, manusia mengubahnya menjadi roket dan pesawat terbang. Manusia terus berinovasi, mencari solusi untuk mengatasi keterbatasannya. Industri hewan mencapai titik jenuh yang membahayakan manusia. Hewan ternak menyumbang 15% dari pemanasan global. Belum lagi perilaku manusia yang brutal dalam memperlakukan hewan. Manusia membutuhkan jutaan ton daging setiap hari, yang diperoleh dengan cara membantai ribuan sapi, kambing, ayam, dan hewan ternak lainnya. Sebelum dibantai, mereka digemukkan dengan cara-cara yang tak etis dan berbahaya bagi kesehatan manusia. Untu...
Posting Komentar
🔗BACA SELENGKAPNYA »

SYAIKH ABDUL QADIR AL-JAILANI : AMALAN YANG MENJADIKAN WALI ALLAH

🔓Owner Post Published 🕕
Sayyid Bakri mengutip jalan berbeda yang dijalani Syaikh Abdul Qadir Al-Jailani sehingga ia mencapai maqam makrifatullah yang dicintai Allah. Setiap orang memiliki jalan spiritual, suluk, dan cara yang berbeda untuk sampai kepada Allah SWT. Tidak setiap orang menempuh ibadah mahdhah untuk sampai ke tingkat makrifatullah. Setiap orang memiliki jalannya sendiri. Demikian halnya dengan suluk Syaikh Abdul Qadir Al-Jailani.  Sayyid Bakri bin Sayyid Muhammad Syatha Ad-Dimyathi mengutip perkataan Syaikh Abdul Qadir Al-Jailani terkait amalan, ibadah, suluk yang ditempuhnya dalam mencapai derajat wali Allah. Sayyid Bakri mengutip jalan berbeda yang dijalani Syaikh Abdul Qadir Al-Jailani sehingga ia mencapai maqam makrifatullah yang dicintai Allah. قال سيدي عبد القادر الجيلاني رضي الله عنه ما وصلت إلى الله تعالى بقيام ليل ولا صيام نهار ولكن وصلت إلى الله تعالى بالكرم والتواضع وسلامة الصدر  Artinya, “Syaikh Abdul Qadir Al-Jailani mengatakan, ‘Aku tidak sampai kepada Allah ta’ala dengan s...
1 komentar
🔗BACA SELENGKAPNYA »