Cari Blog Ini

Tampilkan postingan dengan label Efek animasi Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Efek animasi Blog. Tampilkan semua postingan

Jumat, 04 Januari 2013

Membuat tulisan berjalan marquee blogspot

membuat teks berjalan
Artikel cara membuat tulisan berjalan marque pada blogspot. cara ini sebenarnya sudah saya bahas pada artikel saya yang lalu dengan judul cara membuat tulisan bergerak di blog, namun pada kesempatan kali ini saya akan jelaskan kembali manfaat dari penggunaan kode marquee juga penambahan variasi kode marquee atau kode tulisan berjalan yang belum sempat dibahas pada artikel pertama.
Tulisan berjalan yang dipasang pada sebuah blog akan menambah tampilan blog menjadi menarik dan tentunya isi/konten informasi dari tulisan berjalan tersebut bisa menjadi pusat perhatian pengunjung. Tulisan berjalan marque ini biasanya berisi tentang info penting misal: iklan, No kontak admin, promo sebuah produk atau bisa juga dijadikan sebagai tulisan selamat datang bagi pengunjung.

Cara membuat tulisan berjalan ini tidak lah sulit, tetapi anda harus tahu dulu kode-kode marque yang digunakan, variasi kodenya-pun beragam sesuai dengan pergerakan tulisan yang diinginkan dan sesuai dengan template blog anda.
Kode perintah (kode dasar) dalam membuat marque atau tulisan berjalan adalah:
<marquee>TULISAN INI YANG AKAN BERJALAN</marquee>
Hasil tampilannya:
TULISAN INI YANG AKAN BERJALAN
 

Selain kode dasar marquee diatas, tulisan berjalan terdapat beberapa variasi, diantaranya adalah:
  • Mengubah kecepatan pergerakan dari kecepatan standar.
    Anda bisa memakai kode scrolldelay="angka kecepatan", angka kecepatan dalam milidetik, jadi ketika angka kecepatan anda tulis 500, maka jeda pergerakan adalah 500milidetik atau 0.5 detik (setengah detik)
    Contoh kode marquee:
    <marquee scrolldelay="500">KECEPATAN TULISAN INI DELAY 0.5 DETIK</marquee>
    Hasil tampilannya:

    KECEPATAN TULISAN INI DELAY 0.5 DETIK
  • Mengubah media teks yang bergerak.
    Kali ini saya akan menggunakan satuan % dalam penerapannya. Anda bisa memakai kode width="lebar bidang", jika anda memakai angka 50% maka area untuk text berjalan akan memakai setengahnya dari lebar bidang yang tersedia. bingung?? kita lihat penerapannya ya...
    contoh kode marquee:
    <marquee width="50%">TULISAN INI MEMAKAI 50PERSEN DARI BISANG YANG ADA</marquee>
    Hasil tampilannya:

    TULISAN INI MEMAKAI 50PERSEN DARI BISANG YANG ADA
  • Membuat tulisan berjalan dan akan berhenti ketika dilintasi KURSOR MOUSE
    Anda bisa memakai kode onmouseover="this.stop()" onmouseout="this.start()", jika tulisan berjalan itu terlintasi kursor mouse komputer maka otomatis tulisan berjalan akan berhenti selama kursor tersebut berada diatas tulisan berjalan tersebut.
    Contok kodenya:
    <marquee onmouseover="this.stop()" onmouseout="this.start()">TULISAN MARQUEE INI AKAN BERHENTI KETIKA KURSOR MELINTAS</marquee>
    Hasil tampilannya:
    TULISAN MARQUEE INI AKAN BERHENTI KETIKA KURSOR MELINTAS
  • Membuat Link pada tulisan berjalan
    Anda bisa menggunakan kode <a href="alamat url link">nama link</a>, jadi ketika tulisan berjalan ini diklik maka akan akan masuk ke link yang sudah ditentukan. Agar maksimal maka penggunaan kode link ini dipadukan dengan kode berhenti ketika kursor melintas dan kode pergerakan dari atas kebawah:
    Contoh kodenya:
    <marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="down" width="100%" height="100" align="center">
    <a href="http://jasapembuatanblog-murah.blogspot.com">Jasa pembuatan blog murah</a><br/>
    <a href="http://jasapembuatanblog-murah.blogspot.com/2012/12/toko-online-wordpress-2-dengan-fitur.html">Toko online wordpress</a><br/>
    <a href="http://jasapembuatanblog-murah.blogspot.com/2013/01/fitur-seo-on-page-blogger.html">Fitur SEO Blogger</a></marquee>

    Hasil tampilannya:
    Jasa pembuatan blog murah
    Toko online wordpress
    Fitur SEO Blogger
Karena pada artikel pertama banyak yang menyakan cara memasangnya pada blog, maka saya akan jelaskan cara memasang kode marquee pada blog anda:
  1. login ke blogger 
  2. Klik menu Tata Letak

    teks berjalan
  3. Klik Tambah Gadget

  4.  Pilih widget HTML/Javascript

    kode marquee
  5. Pasang Kode yang sudah dijelaskan diatas.
  6. Tempatkan gadget baru anda pada tata letak yang anda inginkan.
Note: kode diatas selain bisa di area tataletak/widget, anda juga menyisipkannya pada artikel/postingan anda, tentunya pada halaman posting rubah dahulu fungsi Compose ke HTML dan sisipkan kode yang telah disiapkan pada paragraf yang ditentukan.
Demikian paparan cara membuat tulisan berjalan merquee di blogspot. semoga kedepannya saya bisa menulis kode-kode ayng lebih banyak lagi. Salam Blogger.

Minggu, 22 April 2012

Cara membuat banner blog

Sebelum kita mulai membahas Cara membuat banner blog, perlu anda ketahui apa itu banner blogger dan apa fungsi banner dalam blog.  Banner blog adalah sarana berupa gambar, sedangkan fungsinya adalah sebagai informasi, media iklan dan promosi. Dalam dunia internet khususnya internet marketing keberadaan banner dalam sebuah blogspot atau website  sangatlah penting dan merupakan sarana yang sangat ampuh untuk promosi, publikasi, iklan dan lain-lain.



sama halnya dalam pembuatan form online blog, bentuk banner dalam sebuah blog bervariasi, baik dari segi tampilan maupun ukurannya. Dari segi tampilan ada yang bersifat diam dan ada juga yang bergerak atau biasa disebut dengan animasi banner. Sedangkan dari sisi ukurannya setidaknya ada 17 standar ukuran banner yang biasa digunakan dalam sebuah blog, maka dari itu selain cara membuat banner blog dikuasai anda juga harus mengetahui berapa besar ukuran banner yang akan dibuat. Standar ukuran banner tersebut diantaranya:

Ukuran: 468 x 60S tandard, 728 x 90 Leaderboard, 234 x 60 Half-Banner, 392 x 72 Banner w/Nav Bar, 125 x 125 Square Button, 120 x 240 Vertical Banner, 88 x 31S mall Button, 300 x 250 Medium Rectangle, 240 x 400 Vertival Rectangle, 336 x 280 Large Rectangle, 336 x 280 Large Rectangle, 250 x 250 Square Pop-Up, 180 x 150 Rectangle, 160 x 600 Wide Skycraper, 120 x 600 Skycraper, 120 x 90 Button, 1120 x 60 Button 2.

Cara membuat banner blog bisa dibuat sendiri dengan alat pengolahan gambar seperti Photoshop, sedangkan Banner animasi anda bisa manfaatkan layanan online membuat banner animasi baik yang gratis maupun yang berbayar. Nama extension file banner animasi biasanya berbentuk *.Gif. Berikut adalah beberapa contoh situs yang menyediakan layanan cara membuat banner blog berbentuk animasi:

  • http://gickr.com 
  • http://www.loogix.com
  • http://picasion.com
  • http://www.createagif.net
  • http://www.123-banner.com (flash)
  • http://bannersabc.com (flash)
  • http://www.flashbannernow.com (flash)
  • http://www.quickbanner.com (flash)
  • http://www.flash-banner-maker-online.com (flash)
Pada kesempatan ini saya  akan memberikan contoh cara membuat banner blog animasi pada situs http://picasion.com, caranya adalah: 


  1. Buatlah 3 banner yang saling berkaitan (sequence) .
  2. Masuk ke situs http://picasion.com.
  3. Masukan Gambar Banner yang sudah disiapkan tadi dengan mengklik Browse.
  4. Pilih ukuran bannernya (sesuai dengan ukuran banner yang sudah dibuat).
  5. Tentukan kecepatan animasi blog, pilih pada opsi speed.
  6. Jika sudah tinggal klik Create animation.
  7. Simpan banner animasi yang nantinya akan dimasukkan ke blogspot.
Demikian artikel kali ini seputar cara membuat banner blog, semoga bermanfaat.

Senin, 27 Februari 2012

Cara membuat efek daun berjatuhan pada blog

Satu lagi artikel cara membuat efek pada blog yaitu cara membuat efek daun berjatuhan di blogspot, cara ini sangat gampang sekali di praktekan dan mesih menggunakan javascript. Tapi perlu diingat sesuai dengan artikel saya tentang cara mempercantik blogspot, disarankan anda bijak menggunakan efek blogspot ini, jika blog anda sudah menggunakan efek lain seperti efek salju berjatuhan di blog, jikalau terasa berat loading blog anda, maka pilihlah salah satu efek saja.

Berikut cara membuat efek daun berjatuhan pada blogspot anda.
1. Pastikaln anda sudah login ke blogger anda
2. Pada halaman dashboard klik rancangan > Edit HTML
3. Jangan lupa centang Expand widget template.
4. Dengan menggunakan Ctrl+ F, atau tekan F3 cari kode</head>
5. Copy code dibawah dan letakan kode tersebut tepat diatas kode </head> tadi.
<script src='http://arti.master.irhamna.googlepages.com/daun.js'/>
6. Simpan pekerjaan adan dengan menekan tombol SAVE
7. Lihat hasilnya.. bagus kan? ^_^

Demikianlah ke-7 langkah cara membuat efek daun berjatuhan pada blogspot anda, sangat mudah diikuti atau dipraktekan. Selamat mencoba dan Happy blogging.

Sabtu, 14 Januari 2012

4 jenis JAM flash animasi agar blog anda semakin cantik

Mempecantik blog banyak cara yang bisa di tempuh, salah satunya adalah menambahkan flash animasi Jam pada blog, Animasi ini bisa anda tambahkan pada blog pribadi, forum, dll. Flash animasi ini sangat berkualitas dan Gratis, selain itu juga sangat mudah dan cepat dalam membuatnya pada blog anda, mudah-mudahan anda menyukai nya. Selamat mencoba.

  1. Log in ke Blogger anda
  2. Klik Rancangan > Elemen halaman
  3. Klik Tambah Gadget pada side bar
  4. Pilih HTML/Javascript
  5. Tambahkan salah satu kode dibawah ini


<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-33.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-33.swf" width="150" height="150" wmode="transparent"> </embed></object>


object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-11.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-11.swf" width="150" height="150" wmode="transparent"> </embed></object>


<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-24.swf"><embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-24.swf" width="150" height="150" wmode="transparent"> </embed></object>


<object><param name="movie" value="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-23.swf">
<embed src="http://flash-clocks.com/free-flash-clocks-for-websites/free-flash-clock-23.swf" width="150" height="150" wmode="transparent"> </embed></object>



Mau berlangganan artikel dari kami, silahkan daftar dengan mengisi alamat email anda pada kotak dibawah kemudian Klik DAFTAR


Mau tau cara membuat fungsi ini Klik disini