Home » , , » Cara Membuat Widget Gallery Foto Gambar Bergerak Berjalan Di Blog

Cara Membuat Widget Gallery Foto Gambar Bergerak Berjalan Di Blog

Written By Unknown on Friday 21 December 2012 | 12/21/2012 06:05:00 pm

KUCOPAS - Cara Membuat Widget Gallery Foto Gambar Bergerak Berjalan Di Blog. Gallery foto atau gambar di blog memang banyak sekali kita jumpai pada halaman blog yang mengutamakan promosi melalui gambar maupun foto image, biasanya dipasang pada widget blog situs jual beli online. Namun pada tutorial blog yang akan saya share trik dan tipsnya berikut ini adalah cara membuat gallery photo di blog dengan efek bergerak atau berjalan, efek ini populer disebut efek Marquee. Jadi hasilnya tidak seperti gallery foto yang biasa, karena gallery photo ini akan bergerak atau berjalan.

Untuk trik membuat gallery foto gambar bergerak berjalan di blog, Caranya sangat mudah sekali. Ukuran lebar dan tinggi foto atau gambar bisa di atur sesuai dengan keinginan sobat. Karena cara ini adalah cara manual dan sobat bisa sesuka hati mengaturnya. Silahkan sobat mengikuti langkah-langkah yang akan saya berikan nanti.

Tampilan dari gallery photo gambar bergerak berjalan di blog, tentu saja akan mengikuti sesuai dengan gambar atau foto yang sobat terapkan. Sobat bisa melihat dalam blog Demo Kucopas yang sudah saya pasang widget Gallery foto gambar bergerak berjalan di blog.

Cara Membuat Widget Gallery Foto Gambar Bergerak Berjalan Di Blog

Ada beberapa opsi atau pilihan dari gallery photo gambar bergerak berjalan di blog yang bisa sobat pilih, diantaranya:
  • Gallery photo gambar bergerak berjalan di blog default (Biasa).
  • Gallery photo gambar bergerak berjalan di blog dengan Url Link tujuan bila di klik.
  • Dan masih banyak lagi, tergantung pandai-pandainya sobat untuk berexperiment menambahkan kode-kode tertentu dalam gallery photo tersebut.
Agar sobat tidak bingung dengan penjelasan saya di atas, nanti akan saya jelaskan caranya satu-persatu, biar sobat bisa mengerti maksudnya dengan mudah.

Cara Membuat Gallery Photo gambar bergerak berjalan di blog default (Biasa)

1. Silahkan sobat >> Masuk/Login ke Blogger.com menggunakan akun sobat.

2. Pada Dasbor tampilan blogger baru, pilih Menu >> Tata Letak >> Tambah Gadget >> HTML/JavaScript.

3. Beri judul pada Widget, Contoh "My Foto Gallery". Kemudian letakkan semua kode di bawah ini pada kotak HTML/JavaScript.
<marquee direction="up" onmouseover="this.stop()" scrollamount="3" onmouseout="this.start()">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidmLetBJbeRUvtcUZDXU-FRvygBR7s40Ph1vnWp1kHQ8TAauDKzqExtvGjE7bYh_D4qkNvbs9LGCO4NcpNOwKlI4xc8yNkWWkT_zBXzHiIgyuDQiEfTqFtK3Z2ODooUlHZT7sZ_5mIYLs/s1600/PINK1.jpg" width="120" height="120" /><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMUZd_eLv06DKCRWJVYTTUUDNr_NvuxfGXNK3vDU9a8FThtOmezhZvFLEJLMW-xR37VruUncrUgMEh6hWIH7WzZlFwLGtsC3E01lql1sbJ7ShDj4ldWviGiH7szHI7A38apGWkm2J-7iY/s1600/HT3.jpg" width="120" height="120" /><br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA1rVd6MYMGHrB93Wo4JU9FBaq4t-pzItb8SdSc-LQutCO6arD4Ir9TBeXYMfBRVV_25lt41DuaGFBoyWtP68E6R1n9L-sgdUNxcrpDVN1_yAlA-M1fCatN5KWbE-pdcKnUvrvWd7Gu34/s1600/sonal_chauhan.jpg" width="120" height="120" /></marquee>

<a href="http://kuc0pas.blogspot.com/2012/12/cara-membuat-widget-gallery-foto-gambar-bergerak-berjalan-di-blog.html" target="blank"><b>Get Widget</b></a>
Keterangan:
  • Warna Merah adalah Alamat URL gambar atau foto image. Silahkan sobat ganti dengan alamat URL gambar atau foto image sobat.
  • Warna Biru, width="120" dan height="120" adalah ukuran Lebar dan Tinggi image gambar atau foto. Silahkan sobat atur nilainya sesuai dengan keinginan sobat agar sesuai dengan widget blog sobat.
  • <marquee direction="up" adalah arah bergerak berjalan ke atas. Silahkan sobat ganti up jadi down jika ingin arah berjalan bergerak ke bawah.
Cara Membuat Gallery Photo gambar bergerak berjalan di blog dengan Url Link tujuan bila di klik.

Cara yang berikut ini adalah cara yang mudah dilakukan oleh para blogger mania, sebab cara ini hanya menambahkan beberapa kode saja. Namun agar sobat tidak kesulitan dalam menambahkan kode, disini akan saya kasih contoh penerapan kode yang benar.

Berikut kode yang menggunakan alamat url link tujuan bila image gambar foto di klik
<marquee direction="up" onmouseover="this.stop()" scrollamount="3" onmouseout="this.start()"><a href="http://kuc0pas.blogspot.com/2012/12/cara-membuat-widget-gallery-foto-gambar-bergerak-berjalan-di-blog.html" target="blank" title="Cara membuat Galeri foto Gambar bergerak"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidmLetBJbeRUvtcUZDXU-FRvygBR7s40Ph1vnWp1kHQ8TAauDKzqExtvGjE7bYh_D4qkNvbs9LGCO4NcpNOwKlI4xc8yNkWWkT_zBXzHiIgyuDQiEfTqFtK3Z2ODooUlHZT7sZ_5mIYLs/s1600/PINK1.jpg" width="270" height="270" /></a><br />
<a href="http://kuc0pas.blogspot.com/2012/12/cara-membuat-widget-gallery-foto-gambar-bergerak-berjalan-di-blog.html" target="blank" title="Cara membuat Galeri foto Gambar bergerak"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMUZd_eLv06DKCRWJVYTTUUDNr_NvuxfGXNK3vDU9a8FThtOmezhZvFLEJLMW-xR37VruUncrUgMEh6hWIH7WzZlFwLGtsC3E01lql1sbJ7ShDj4ldWviGiH7szHI7A38apGWkm2J-7iY/s1600/HT3.jpg" width="270" height="270" /></a><br />
<a href="http://kuc0pas.blogspot.com/2012/12/cara-membuat-widget-gallery-foto-gambar-bergerak-berjalan-di-blog.html" target="blank" title="Cara membuat Galeri foto Gambar bergerak"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA1rVd6MYMGHrB93Wo4JU9FBaq4t-pzItb8SdSc-LQutCO6arD4Ir9TBeXYMfBRVV_25lt41DuaGFBoyWtP68E6R1n9L-sgdUNxcrpDVN1_yAlA-M1fCatN5KWbE-pdcKnUvrvWd7Gu34/s1600/sonal_chauhan.jpg" width="270" height="270" /></a></marquee>

<a href="http://kuc0pas.blogspot.com/2012/12/cara-membuat-widget-gallery-foto-gambar-bergerak-berjalan-di-blog.html" target="blank"><b>Get Widget</b></a>
Keterangan:
  • Warna Hijau adalah Alamat Url tujuan bila image gambar foto di klik. Silahkan di ganti dengan alamat url tujuan sobat.
  • Warna Orange adalah Title teks yang keluar jika Mouse pointer menyantuh gambar image foto pada gallery. Silahkan sobat ganti dengan title teks sesuai keinginan sobat.
  • Kode yang saya berikan di atas adalah contoh untuk tiga gambar image foto saja. Sobat bisa menambahkan kode image-nya sesuai dengan keinginan sobat.
Demikian tutorial blog tentang Cara Membuat Widget Gallery Foto Gambar Bergerak Berjalan Di Blog secara manual. Jika ada pertanyaan mengenai trik tutorial ini, silahkan sobat bertanya pada form kotak komentar yang tersedia. Senang bisa berbagi dan membantu sobat KUCOPAS semua. Semoga bisa sangat bermanfaat.

Artikel Terkait:

thumbnail Title: Cara Membuat Widget Gallery Foto Gambar Bergerak Berjalan Di Blog
Posted by:Unknown
Published :2012-12-21T18:05:00+07:00
Rating: 5
Reviewer: 737 Reviews
Cara Membuat Widget Gallery Foto Gambar Bergerak Berjalan Di Blog
Comments
23 Comments

23 comments:

  1. saya sudah follow
    follow balik ya
    di www.zvlite.com

    ReplyDelete
  2. Wah bagus juga gan...
    bagaiamana kalau menambah di dalam postingan bisa apa enggak ?

    ReplyDelete
    Replies
    1. Bisa-bisa saja sob. Dengan cacatan letakkan kodenya pada mode HTML bukan Compose.

      Delete
  3. cara ganti gambarnya gmna mas?saya mau gnti gambarnya jadi arsenal..

    ReplyDelete
    Replies
    1. Ganti saja kode yang berwarna MERAH dengan kode alamat url gambar Arsenal kamu sob.
      Untuk membuat kode alamat url gambar, kamu bisa upload dulu gambar kamu di blog atau situs upload yang lain, kemudian ambil alamat url-nya dan tempelkan di kode yang berwarna MERAH lalu simpan.

      contoh alamat url gambar yang di upload pada blog seprti berikut:
      http://1.bp.blogspot.com/-SLq8OdXIx_A/UETzLOe5zkI/AAAAAAAAAiI/5HikAGLMhxM/s1600/sonal_chauhan.jpg

      Delete
  4. makasih sob.. postingannya,sebagai referensi saya,coz sebelumnya udah pake lazy load,.. salam persahabatan aja dech.. Piss..

    ReplyDelete
  5. nyobain widgetnya dulu ya mastah.. terima kasih nih tutorialnya... udah kebelet pengen nyobain,. eheh

    ReplyDelete
  6. mantap bang,. izin kopas scriptnya ya..

    ReplyDelete
  7. kalau bergerak ke kanan dan kekiri menggunakan panah gimana caranya

    ReplyDelete
    Replies
    1. Lihat caranya dalam URL berikut sob...
      http://kuc0pas.blogspot.com/2012/08/cara-membuat-slider-carousel-otomatis.html

      Delete
  8. mohon maaf kang sebelumnya ..
    kalau mempercepat gerakan pergantian gambarnya gmna ya kang..

    Thank's
    mohon pencerahannya

    ReplyDelete
  9. Follback ya
    wellweblood.blogspot.com

    ReplyDelete
  10. This comment has been removed by a blog administrator.

    ReplyDelete
  11. Kunjungi 1DragonNando.blogspot.com all

    ReplyDelete
  12. This comment has been removed by a blog administrator.

    ReplyDelete
  13. mantab bray :))
    satu lagi bray kalo buat tulisan atau banner yang muncul diblog and klo ngilangin hrs di close
    itu gimana Tolong dijawan terima kasih . .

    ReplyDelete
  14. mantaaaaaabbbppps!!!
    http://sdesign7.blogspot.com/

    ReplyDelete
  15. Sudah Dicoba..mantap..


    jika ada yg mau membeli jam tangan atau sekedar melihat2 dulu..silahkan kunjungi web saya www.warungjamtangan.com

    trims,

    ReplyDelete
  16. This comment has been removed by a blog administrator.

    ReplyDelete

 
Support : Google | Yahoo | Bing
Copyright © 2011-2013. KUCOPAS - All Rights Reserved
Sitemap | About Me | Contact Us | Privacy Policy
Proudly powered by Blogger