Dua Kalkulator Kehamilan Puisi Lucu & Romantis Kalimat/Ungkapan Indah Ucapan Selamat Malam Romantis Kata-2 GalauKoleksi Kata-Kata Gombal Mukio
Download Ringtone Lucu Gokil
Curhat Cewek Tentang Cowok
Punya Pacar vs LDR vs Jomblo
Alat Membuat Tulisan Gaul Alay
Alat Membuat Tulisan Terbalik
Daftar Semua Kategori:X
X
Ramalan Zodiak Hari Ini Kata Mutiara Cinta Kompilasi Lagu Nostalgia Cara Download Video Youtube Status Facebook LucuKumpulan SMS Cinta Romantis

images gallery Tutorial ngeblog kali ini adalah Cara Menampilkan Daftar Gambar Otomatis Via Kata Kunci. (*) Data diambil dari Bing. Dengan widget ini maka melengkapi postingan akan menjadi mudah, kita tinggal memberi penjelasan dan keyword-keyord tambahan agar terindex baik oleh mesin pencari. Untuk tujuan ini bisa dilihat di beberapa post Warung Bebas dalam kategori Album Foto. Salah satunya seperti Koleksi Harley Davidson Wallpaper.

Selain bisa menjadi ide postingan mudah dan tanpa pengantar panjang tapi sudah memanjang kebawah karena ada images gallery-nya, juga bisa melengkapi posting yang akan makin manis jika diberi koleksi gambar, misalnya seperti posting tentang profil/biografi tokoh/artis. Misalnya seperti bahasan Profil Anisa Cherry Belle.

Baiklah langsung saja cara pemasangan dan contoh tampilan widgetnya. Berikut ini sudah ada tampilan dan kodenya sekalian. Untuk model lain silahkan diklik pada masing-masing contoh dan kode akan update sendiri, tinggal copas. Ini adalah widget yang sangat mudah masangnya.

Nature Wallpaper

Dibawah ini adalah kode untuk tampilan diatas:

<div id="wb_AUTOIMG">Nature Wallpaper</div>
<script type="text/javascript" src="http://javascript-share.googlecode.com/files/wbAutoIMG.js"></script>

Lebar bidang 600px

Lebar bidang 550px

Lebar bidang 450px

Dari kode yang tampil diatas, ubah kata kunci warna biru dengan kata kunci Anda sendiri. Paste dalam MODE: HTML dalam postingan Anda.

TIPS:

Sebelum memposting gambar dengan kata kunci tertentu, Anda sebaiknya mencoba kata kunci itu di form pencarian yang ada dibawah blog ini (pilih opsi gambar pada pilihan). Karena seringkali kombinasi kata dalam kata kunci menghasilkan daftar gambar melenceng atau bahkan tidak ada hasilnya. Untuk membuktikan dan mencoba hal ini, coba Anda gunakan kata kunci “Afika” dan “Afika Oreo”, maka haslinya akan sangat berbeda.

Tidak perlu menampilkan banyak-banyak asalkan manis saja terlihat di blog Anda. Karena meskipun hanya 6 misalnya, tapi kan ada tombol next, sehingga tetap bisa banyak sekali. Kalau terlalu banyak gambar yang diload, maka hanya memberatkan loading blog Anda, karena harus load banyak gambar.

Penjelasan Jika Ingin Edit Kode Sendiri

Berikut ini adalah kode lengkap dengan nilai default. Anda bisa mengubah nilai yang berwarna merah sesuai keinginan dan kebutuhan. Untuk kode berwarna biru adalah kata kunci / keyword pemanggil gambar.

<div id="wb_AUTOIMG" wb-wrap-x="600" wb-x="129" wb-y="100" wb-max="8">Windows 7 Wallpaper</div>
<script type="text/javascript" src="http://javascript-share.googlecode.com/files/wbAutoIMG.js"></script>

KodePenjelasan
wb-wrap-x="600"Lebar bidang dalam pixel, lebar seluruh widget, adalah lebar bidang postingan template Anda. Namun jika kesulitan menata, gunakan saja salah satu dari ukuran dari contoh diatas yang tidak melebihi lebar postingan di template Anda. Tinggal menyesuaikan jumlah gambar, lebar dan tinggi gambar thumbnail yang ditampilkan saja.
wb-x="129"Lebar thubmnail gambar dalam pixel.
wb-y="100"Tinggi thubmnail gambar dalam pixel.
wb-max="8"Jumlah gambar ditampilkan dalam widget, sesuaikan saja. Misal kalau dalam satu baris ada 3 gambar maka gunakan jumlah kelipatan 3. Jelas toh?
Windows 7 WallpaperKata Kunci yang menjadi pemicu menampilkan gambar (required / harus ada)

Menampilkan beberapa koleksi gambar dalam satu halaman / post

Cara yang diatas itu hanya menampilkan satu widget saja, namun itu sudah mencukupi, karena satu posting biasanya memiliki topik satu saja, jadi biasanya tidak perlu daftar gambar aneka jenis. Namun adakalanya dibutuhkan juga, dan widget ini bisa menampilkan lebih dari satu. Perhatikan bagian ini:

<script type="text/javascript" src="http://javascript-share.googlecode.com/files/wbAutoIMG.js"></script>

Diatas, kode itu ada diurutan bawah, namun jika menampilkan lebih dari satu, maka perlu diletakkan diatas. Seperti berikut ini misalnya:

<script type="text/javascript" src="http://javascript-share.googlecode.com/files/wbAutoIMG.js"></script>
<p><strong>Daftar Gambar 1</strong></p>
<div id="wb_AUTOIMG_1" wb-wrap-x="600" wb-x="129" wb-y="129" wb-max="8">Windows 7 Wallpaper</div>
<p><strong>Daftar Gambar 2</strong></p>
<div id="wb_AUTOIMG_2" wb-wrap-x="600" wb-x="129" wb-y="100" wb-max="12">Islamic Calligraphy</div>
<p><strong>Daftar Gambar 3</strong></p>
<div id="wb_AUTOIMG_3" wb-wrap-x="600" wb-x="179" wb-y="120" wb-max="9">Animals Wallpaper</div>
<script>
warungbebas_AUTOIMG.call("wb_AUTOIMG_1");
warungbebas_AUTOIMG.call("wb_AUTOIMG_2");
warungbebas_AUTOIMG.call("wb_AUTOIMG_3");
</script>

Parameter lainnya sama dengan penjelasan diatas, bedanya hanya di kode warna merah, dan pemanggilan sesuai ID.

Daftar Gambar 1

Windows 7 Wallpaper

Daftar Gambar 2

Islamic Calligraphy

Daftar Gambar 3

Animals Wallpaper

Widget ini bisa diotomatisasi untuk blog yang berniche specifik, misalnya car review. Dengan otomatisasi, maka gambar akan selalu keluar dalam semua post tanpa harus memasang setiap kali melakukan posting, seperti yang sudah pernah dibahas di Cara Memunculkan Video Otomatis di Semua Post. Untuk contoh penerapan yang gambar bisa dilihat disitus ini. Kalau ada waktu, akan dibahas pada posting tersendiri.

Komentar FacebookSembunyikanSelalu TampilkanJangan Pernah TampilkanStatus:
 

12 komentar terhadap "Widget Menampilkan Daftar Gambar Otomatis Via Keyword"

  1. wah keren scriptnya.....!! script ini menggunakan teknik apa... untuk dapat ngeGrab semua gambar...??

    BalasHapus
    Balasan
    1. Teknik pemula :D tanyanya aneh2 bro... dari kemarin2 :D

      Hapus
  2. mas mau tanya...!! cara memberi efek loading pada gambar yang ada di posting itu gmana ya...??

    BalasHapus
    Balasan
    1. Biasanya javascript library yang ada fitur ajax sudah ada, berikut contoh sederhana jika menggunakan jQuery saat load data ajax (ajaxStart) dan saat data selesai terpanggil (ajaxStop):
      {c}<script>
      $("#loading").ajaxStart(function(){
          $(this).fadeIn();
      }).ajaxStop(function(){
          $(this).fadeOut();
      });
      </script>{/c}
      Referensi selengkapnya lihat ajaxStart dan ajaxStop

      Hapus
    2. wah masih nggak mudeng mas....!! tolong kasih tau yang lebih simpel donk....!! maklum masih newbie....!!

      Hapus
    3. Lho simplenya sampe seperti apa? kode diatas itu sudah pendek banget. Coba pikir, saya mesti jawab gimana? :D Karena kode diatas itu sudah pendek banget. Kalau mau diterjemahkan dalam bahasa manusia.
      {block}Tampilkan (fadeIn) ID "loading" (#loading) saat data ajax diminta (ajaxStart), dan setelah data selesai diload (ajaxStop) sembunyikan (fadeOut){/block}
      Begitu konsepnya. Jadi saat gambar diload sampe selesai maka div dengan ID loading itu akan tampil.

      Hapus
    4. jadinya kita harus menambah loading image pada css dengan id #loding gitu....!!!

      soalnya saya lagi buat blog tentang komik....!! jadi postingnya gambar doank makanya saya ingin menambah efek loading saat gambarnya belum muncul dan akan menghilang sendiri nantinya......!! ini blognya http://warungkomik.blogspot.com/2012/05/komik-naruto-chapter-495-bhs-indonesia.html

      Hapus
    5. Mending gak usah pake loading-loadingan bro kalau posting datanya manual. Bisa sih, tapi apa sih nilai tambahnya? kalau dibanding mikir pusing bikinnya? :)

      Hapus
  3. wih,,coba dulu walau gak ngerti -__-

    BalasHapus
  4. awadah....! mantep mas admin :) ane kok jd kecanduan N kerasan puolll D warung bebas.:x

    BalasHapus
  5. MANTAB bener artikelnya,,,,:-bd
    tapi qw jadi bingung,,
    mana yang di praktekin dloe,,,
    artikel" warung bebas numb uno....
    =d>

    BalasHapus
  6. gan bikin tampilan lighbox gambar kaya blog WB gimana, di kasih link download di lighbox + script adfly pasti mantep,,heheh ngarep di bikinin
    \:d/

    BalasHapus

Links
About | Contact Us | Info Iklan | Privacy Statement | Disclaimer | Link to Us | Help | Whois | Ping  Sitemap
Copyright © 2009  Warung Bebas. Hosted on Blogger.Com Top
Warung Bebas