SUYATI'S BLOG: MENULIS SETIAP HARI: Memasang Animasi di Blog

/* widget kuis by wendy code */ .wc-qws-mhs,.wc-qws-sls{position:relative;padding:10px 15px;margin:20px auto;width:100%;background-color:#fff;box-shadow: 0 2px 15px -2px rgb(0 0 0 / 12%);border-radius:3px} .wc-qws-mhs.hidden,.wc-qws-sls.hidden,#wc-qws-start.hidden,.wc-qws-knt.hidden,.wc-qws-wkt.hidden,#wcqws-made-by{visibility:hidden;opacity:0} .wc-qws-mhs input[type=text],.blogContent .widget input[type=text]{padding:15px;border-radius:3px;margin:10px 0;width:100%;border:1px solid #ddd;outline:none;background:rgba(255,255,255,0.2);color:#444} .wc-qws-mhs input[type=text]:focus,.blogContent .widget input[type=text]:focus{border-color:#f89000!important} .wc-qws-mhs input[type=text]::-webkit-input-placeholder{color:#a5a5a5;font-size:14px} button#wc-qws-lnj,button#wc-qws-start,button#wc-qws-fns{width:100%;padding:15px;outline:none;border:0;background-color:#f89000;color:#fff;border-radius:3px;margin-bottom:10px;font-size:15px;font-weight:bold}button#wc-qws-start,button#wc-qws-fns{margin-top:25px} @media screen and (min-width:500px){button#wc-qws-start,button#wc-qws-fns{max-width:300px}} .wc-qws-sls h3{text-align:center;font-size:17px} .wc-qws-sls p{font-size:15px;margin:5px auto} .wc-qws-sls p:last-child{font-size:13px;line-height:1.5em;margin-top:15px;font-style:italic;opacity:.8} .wc-qws-knt label{background-color:#E7E9EB;display:block;position:relative;padding:10px;margin-bottom:1px;cursor:pointer;border-radius:3px;font-size:18px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;word-wrap:break-word} .wc-qws-knt input{border:2px solid #fff;box-shadow:0 0 0 1px #f89000;appearance:none;border-radius:50%;width:12px;height:12px;background-color:#fff;transition:all ease-in 0.2s} .wc-qws-knt input:checked{background-color:#f89000} .wc-qws-knt label:hover{background-color:#ddd} .wc-qws-knt input{margin-right:10px} .wc-qws-knt b{padding:0 6px;border-radius:50%;border:5px solid rgba(255,219,158);color:#f89000;margin-right:5px} .wc-qws-knt form:nth-child(n+2):before{content:'\2027 \2027 \2027'; display:block;text-align:center;font-size:28px;font-style:normal;letter-spacing:0.6em;text-indent:0.6em;margin:20px auto} /* css darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */ .darkMode .wc-qws-mhs,.darkMode .wc-qws-mhs input[type=text],.darkMode .wc-qws-knt label,.darkMode .wc-qws-mhs,.darkMode .wc-qws-sls{background-color:#2d2d30;color:#fefefe} .darkMode .wc-qws-mhs input[type=text]{border-color:rgba(255,255,255,.1)}

Friday, 25 December 2020

Memasang Animasi di Blog

Sebenarnya memasang animasi di blog adalah hal yang menarik. Walaupun tidak semua harus terpasang karena mungkin akan membuat berat tampilan blogitu sendiri. Saya sendiri memasang beberapa animasi yaitu animasi burung terbang dan animasi teks berjalan.

Awalnya hanya iseng saja. Penasaran membuka berbagai cara menambahkan animasi di blog kita. Tadinya saja pasang banyak animasi. Ada animasi waktu, animasi ucapan sapaan dan seterusnya. Tetapi lambatlaun sepertinya kurang berfungsi. Mungkin karena berat ditampilannya. Sehingga kemudian saya menghapusnya.

Sekarang yang terpasang adalah animasi burung terbang dan teks berjalan. Pada kesempatan ini saya berikan cara menambah animasi burung terbang di blog kita:

Masuklah ke akun blog kita.

Pilih tata letak/Lay out.

Pilih Tambah gadget.

Pilih HTML yang sesuai dengan animasi burung terbang

Masukkan kode HTML yang di bawah ini dengan cara dipastekan saja di bagian HTML

<div style="position: fixed; top: 0px; left: 10px;width:225px;height:160px;"><a href="http://christiantatelu.blogspot.com" target="_blank"><img alt="animasi blog" src="http://i567.photobucket.com/albums/ss114/fatiasa/bird_ann.gif" title="Click to get more." /></a></div>

Silahkan sesuaikan dulu pengaturan posisi burung mau di kanan atau kiri, di atas atau di tengah. Tergantung dari keinginan masing-masing blogger.

top=atas, bottom= bawah, center =tengah

left = kiri right= kanan

Setelah itu tinggal kita simpan di blog kita. Lihat hasilnya. Jika sudah sesuai selamat. Kalu belum pas tinggal sesuaikan kembali.

Demikian semoga bermanfaat.

19 comments:

indrawahyuddin25 December 2020 at 16:57
Akhirnya, saya tahu caranya
Terimakasih Ibu
Sehat selalu
ReplyDelete
Replies
Suyati Binyo Purbalingga25 December 2020 at 17:51
Alhamdulillah, aamiin.
ReplyDelete
Replies
Sumarjiyati25 December 2020 at 20:05
Boleh d coba ini buk..hehe
ReplyDelete
Replies
Suyati Binyo Purbalingga25 December 2020 at 20:23
Silahkan ibu. Semoga sukses.
ReplyDelete
Replies
sriyamini.blogspot.co.id25 January 2021 at 11:31
Bunda Suyati, trimks share ilmunya. Nanti dicoba mudah2an bisa maklum masih gaptek ha...luar biasa keren...
ReplyDelete
Replies
Suyati Binyo Purbalingga25 January 2021 at 11:47
Sama-sama Bunda. Semoga bermanfaat.
ReplyDelete
Replies
Imam Syafii25 January 2021 at 12:22
Terima kasih Bu. Sdh berkenan berbagi ilmu. Sangat bermanfaat
ReplyDelete
Replies
Imam Syafii25 January 2021 at 12:22
Terima kasih Bu. Sdh berkenan berbagi ilmu. Sangat bermanfaat
ReplyDelete
Replies
Pak D Susanto25 January 2021 at 13:52
Jadi bergairah, tampilan blog tidak monoton. Terus berbagi!
ReplyDelete
Replies
Tini Sumartini25 January 2021 at 18:48
Terimakasih sudah berbagi tips mdh2n sy bisa niru hehe..
ReplyDelete
Replies
Pak Iroen25 January 2021 at 18:58
Alhamdulillah...satu lagi ilmu yang sangat bermanfaat, terimakasih Bu sduah berbagi tips..🙏
ReplyDelete
Replies
astutiamudjono.wordpress.com25 January 2021 at 20:00
Animasi keren uang jadi daya tarik tersendiri
ReplyDelete
Replies
Suyati Binyo Purbalingga25 January 2021 at 20:08
Terima kasih kunjungannya. Semoga bermanfaat.
ReplyDelete
Replies
ninibelajar26 January 2021 at 09:34
Suka banget lihat animasi burung terbangnya😍
ReplyDelete
Replies
Suyati Binyo Purbalingga28 January 2021 at 06:39
Ini animasi favorit saya Bunda. Silahkan dicoba.
ReplyDelete
Replies

Subscribe to: Post Comments (Atom)