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

AN NIFARI SANG PENGELANA YANG ENGGAN BICARA

🔓Owner Post Published 🕕
An-Nifari, Sang Pengelana yang Enggan Bicara Ketinggian tokoh sufi dari Irak ini konon melebihi Rumi dan Hallaj. Dia adalah teoritikus sufi sekaligus sastrawan besar. “Ketika kita sudah melakukan sesuatu dengan baik dan bersungguh-sungguh, mengapa harus meributkan penilaian orang lain? Bukankah Ridha-Nya yang kita harapkan?” Nama mistikus ini agak asing di telinga kita. Tidak seperti al-Hallaj, ia seakan kurang begitu terdengar. Padahal dimata para ahli tasawuf, pandangan-pandangan sufistiknya sangat berpengaruh. Terbukti dari banyaknya para sufi sesudahnya yang banyak mengikutinya. Dia adalah An-Nifari, yang telah meninggalkan jejak kesufian yang luar biasa. Dalam memaknai tasawuf, misalnya, ia lebih berhati-hati. Itu sebabnya ia menjadi panutan bagi para sufi yang lain. Nama lengkapnya ialah Muhammad ibnu Abdul Jabbar bin al-Husain an-Nifari. Di dunia sastra klasik Irak, namanya menjulang karena karya-karyanya yang masyhur. Tapi sejarah hidupnya sulit dilacak. Menurut c...
Posting Komentar
🔗BACA SELENGKAPNYA »

SUARA HARIAN OTO BEMO BERODA TIGA

🔓Owner Post Published 🕕
KATA PENGANTAR  Puji syukur kami panjatkan kehadirat Tuhan Yang Maha Esa karena dengan rahmat, karunia, serta taufik dan hidayah-Nya saya dapat membuat blog/site tentang apa saja yang menarik bagi penggemar membaca dengan baik meskipun banyak kekurangan didalamnya. Dan juga kami berterima kasih pada Bapak, Ibu, Saudara (i) selaku pelanggan Suara Harian Oto Bemo Beroda Tiga yang telah memberikan masukan kepada saya. Tak lupa juga ucapan terima kasih kepada teman - teman blogger telah ikut turut serta membantu dalam proses pemblo gingan ini. Saya juga menyadari sepenuhnya bahwa di dalam dunia bloging ini terdapat kekurangan dan jauh dari kata sempurna. Oleh sebab itu, saya berharap adanya kritik, saran dan usulan demi perbaikan blog/site yang telah saya buat untuk di masa yang akan datang, mengingat tidak ada sesuatu yang sempurna tanpa saran yang membangun. Semoga blog/site sederhana ini dapat dipahami bagi siapapun yang membacanya. Secara struktur, sistematis dan masif blog/site ya...
Posting Komentar
🔗BACA SELENGKAPNYA »

GERAKAN ISLAM DI TANAH BANJAR : BEBERAPA KISAH RECEH TUAN GURU DI TANAH BANJAR

🔓Owner Post Published 🕕
Beberapa Kisah Receh Tuan Guru di Tanah Banjar Hairus Salim dalam esai Gus Dur dan Guru Sekumpul: Sebuah Pertemuan menggambarkan pemasangan poster foto ulama adalah salah satu wujud penghormatan terhadap para ulama. Ulama atau Tuan Guru memiliki posisi penting dan penghormatan pada mereka hanya salah satu dari artikulasi keberislaman masyarakat Banjar. Dalam perjalanan pulang dari Banjarmasin, Hairus Salim mengisahkan bahwa seperti umumnya warung dan rumah orang Banjar di kawasan Kalimantan Selatan, dinding warung tersebut dipenuhi poster foto-foto ulama. Kisah yang dimuat di laman NU Online tersebut mengisahkan poster foto ulama tersebut merujuk pada sosok KH. Muhammad Zaini bin Abdul Ghani atau akrab dengan Guru Sekumpul dan KH. Abdurrahman Wahid atau Gus Dur. Memang, jika bepergian ke tanah Banjar, maka poster foto ulama akan sangat mudah ditemui. Tidak saja di tempat makan, sebagaimana cerita Hairus Salim, namun di rumah, tempat kerja dan lain-lain, masyarakat Banjar juga sering me...
Posting Komentar
🔗BACA SELENGKAPNYA »

PERBEDAAN SURGA BAGI KAUM SUFI DAN KAUM AWAM ADALAH JIWA

🔓Owner Post Published 🕕
Surga Didalam rukun iman disebutkan bahwa kita harus mengimani hari akhir, hari pembalasan, dan termasuk juga mengimani surga dan neraka. Surga berasal dari bahasa Sansekerta, Suar = Cahaya, dan Ga = pergi menuju. Sedangkan dalam Al Qur'an, tidak ada kata Surga, yang ada adalah kata Al Jannah. Kata jannah berakar dari huruf ‘jim’ dan ‘nun’ artinya tersembunyi atau tertutup.  Ada banyak kata yang satu akar dengan kalimat jannah yakni : ajinah/janin, jinan, janna, junnah, majnun, junun, jin dll.. Ajinah=janin (QS 53:32), jinan=hati, janna= malam (QS 6:76), junnah=perisai/kain, majnun=gila, junun=kegilaan, dan jin.  Disebut janin karena tetutup rahim, disebut hati karena tersembunyi, disebut malam karena sinar matahari tertutup belahan bumi lain, disebut perisai/kain karena menutupi badan, disebut gila karena tertutup akal, dan disebut jin karena tertutup dari mata manusia.  Jika surga adalah kebun, pasti kebun yang tertutup. Jika surga adalah taman, pasti ...
Posting Komentar
🔗BACA SELENGKAPNYA »

EMPAT BELAS CARA TEHNIK KOMUNIKASI YANG PALING EFEKTIF

🔓Owner Post Published 🕕
Menurut berbagai survei, sekitar 85% persen dari kesuksesan dalam hidup berkaitan secara langsung dengan kemampuan berkomunikasi dan keterampilan membina hubungan. Dan ketika saya mengatakan berhubungan dengan orang-orang, hal ini tentu saja bukan orang-orang yang secara natural memiliki kemiripan karakter dengan anda, karena berhubungan dengan orang-orang tersebut tidak membutuhkan banyak usaha atau kemampuan dalam berkomunikasi. Saya mengacu pada orang-orang yang anda sukai namun anda seringkali menemukan kesulitan untuk membina hubungan dengan mereka karena anda tidak yakin apa yang akan anda katakan atau lakukan. Dibutuhkan keterampilan untuk memperluas hubungan dari lingkaran kecil orang-orang dimana anda berada saat ini menuju lingkaran besar orang-orang yang akan anda temui. Keterampilan semacam ini yang menjamin akan melontarkan keberhasilan Anda dalam kehidupan. – Apakah anda menemukan kesamaan antara anda berdua? Untuk menjawab pertanyaan-pertanyaan tersebut, anda ha...
Posting Komentar
🔗BACA SELENGKAPNYA »