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

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

POPULAR POST

JANGAN TERLALU MEMBANGGAKAN IBADAHMU

Dari kisah sebelumnya bisa disimpulkan ilmu syareat yang saya pelajari dahulu tidaklah salah.. ilmu syareat itu benar.. hanya syareat tanpa tasawwuf sama saja kosong.. Sholat siang dan malam tapi sering menyakiti dan mendzalimi orang lain padahal Allah berfirman dalam hadits qudsi : “Wahai hamba-Ku, Aku telah mengharamkan kedzaliman atas diri-Ku dan Aku jadikan ia sebagai sesuatu yang haram di antara kalian. Karena itu, jangan kalian saling mendzalimi. Wahai hamba-Ku, kalian semua lapar kecuali yang telah  Aku beri makan. Wahai hamba-Ku kalian semua telanjang, kecuali yang Aku beri pakaian. Karena itu, mintalah pakaian kepada-Ku pasti akan Aku beri kalian pakaian. Wahai hamba-Ku, kalian senantiasa berbuat salah siang dan malam, sementara Aku mengampuni semua dosa kalian. Karena itu, mintalah ampunan kepada-Ku pasti Aku mengampuni kalian. Wahai hamba-Ku, kalian semua tidak akan bisa memberikan bahaya kepada-Ku sehingga mencelakakan-Ku dan tidak akan bisa memberikan manfa...

BUDAYA KERJA JEPANG MERUPAKAN KESATUAN DALAM KELOMPOK

Jepang terkenal dengan kerja kerasnya dan kerja lemburnya. Semua orang tau itu. Tapi tak banyak yang tahu kalau budaya kerja Jepang itu “Ndeso”. “Ndeso” berarti “kampungan” seperti yang kita tahu, tapi bukan itu yang saya maksud. Dalam budaya kerja Jepang, “Ndeso” berarti berpikir seperti penduduk desa. Seorang pekerja Jepang akan merasa kantornya seperti desa, penduduknya saling gotong royong membangun lingkungannya. Ini adalah sebuah pemikiran ala Jepang, budaya kerja unik yang hanya ada di negeri sakura ini. Pemikiran “Ndeso” ini dikenal dengan istilah “Village Relationship” atau muranogurupu ( 「ムラ」のグループ ), yang jadi basis Jepang berpikir secara kelompok. 1. Society built on “place” relationship Ada seorang anak baru di kantor, anggap saja namanya Budi. Sebelum bergabung, Budi sempat kerja di perusahaan Indonesia. Ia orang yang super dan hebat, pemikir ulung dan kreatif, kariernya menanjak cepat sekali. Ia merasa seperti star employee saking hebatnya, semua orang mengenalnya...

CIRI-CIRI WALI YANG MURSYID

Ciri-ciri dari seorang Mursyid yang Wali : Syarat lainya yang mutlak harus dimiliki seorang wali yang mursyid adalah mereka berpegang teguh pada Qu’ran dan Hadist tidak pernah meninggalkan syariah dan sunnah. Karena tak ada tariqah tanpa syariah, karena seumpama syariah adalah penerang untuk menjalani jalan tariqah agar tak tersesat dan menuju hakikat. Imam Malik, Imam Mazhab Maliki mengatakan Syariat tanpa tasawuf adalah zindik, dan tasawuf tanpa syariat adalah sesat. Dan salah satu ciri para wali  biasanya mereka tersembunyi, meskipun begitu mereka sangat terkenal diantara para kekasih Allah. Selama bermursyid dengan seorang yang wali anda akan menganggap kematian adalah sebuah anugerah dan hadiah dari Allah, tapi jika anda semakin takut mati maka carilah mursyid yang lain. Seorang yang wali dapat mengetahui dan menyembuhkan penyakit fisik dan jiwa muridnya. Bila mendengarkan ceramah dari Mursyid tasawuf yang Wali Allah, maka ia akan mendapatkan ilmu sekalig...

SOLUSI DARI SETIAP PERMASALAHAN

Tidak ada satu pun dari manusia di dunia ini yang tidak memiliki masalah. Namanya juga hidup, selalu ada gejolak dan permasalahan yang akan muncul, selalu ada rintangan yang menghadang, selalu ada cobaan yang menguji. Sebagai manusia, tugas kita adalah menghadapi setiap permasalahan itu, dan menjalani hidup sebaik mungkinsebagai khalifah Allah di muka bumi. Sebenarnya, jika kita mau mempelajari Alquran dengan baik, Allah memberikan petunjuk atas setiap permasalahan kita dalam Alquran. Solusi setiap permasalahan yang berhubungan dengan rezeki, hubungan antar sesama, bahkan permasalahan yang sifatnya vertical yaitu hubungan kita dengan Allah. Jika kita dilanda permasalahan, bacalah Alquran dan carilah solusi dari permasalahan kita di dalamnya. Yakinlah, bahwa semua permasalahan kita akan segera berlalu, dan permasalahan yang sedang kita alami merupakan ujian dari Allah untuk mengangkat derajat kita ke tempat yang lebih tinggi, sebab Allah tidak akan pernah memberi ujian melebihi ...

SYAIKH ABDUL QADIR AL-JAILANI SEBUT PONDASI BANGUNAN MAKRIFAT DAN KEWALIAN

Bangunan kenabian, kerasulan, kewalian, makrifatullah, dan mahabbah, kata Syekh Abdul Qadir Al-Jailani, berdiri kokoh di atas fondasi kesabaran (menahan dan mengendalikan diri) orang yang berada pada maqam tersebut dalam menghadapi sebuah bala’ atau ujian.  Syekh Abdul Qadir Al-Jailani mengilustrasikan maqam spiritual sebagai bangunan yang juga memiliki struktur dan unsur-unsur yang membentuknya. Syekh Abdul Qadir menyebut ujian atau bala sebagai fondasi (spiritual) utama dalam sebuah bangunan kebaikan. Syekh Abdul Qadir Al-Jailani mengatakan, tanpa fondasi sebuah bangunan fisik tidak akan dapat berdiri. Kalau pun berhasil juga berdiri, pendirian bangunan fisik tanpa fondasi tersebut akan sangat  rapuh dan lemah.  Hal yang sama juga terjadi pada sebuah bangunan spiritual. Bangunan kenabian, kerasulan, kewalian, makrifatullah, dan mahabbah, kata Syekh Abdul Qadir Al-Jailani, berdiri kokoh di atas fondasi kesabaran (menahan dan mengendalikan diri) orang yang berada pada maq...