Cara Masukkan Kode Amazon di Blogspot

Cara Masukkan Kode Script Amazon di Blogspot

Untuk memasukkan image beserta kode script dari Amazon sbb:

1. Login/Sign in ke account amazon anda.
Perhatikan gambar dibawah ini.Jika anda tidak menemukan halaman ini , coba anda klik tulisan"your account"-->>maka akan tampil halaman seperti gambar ini




2. Setelah anda Loggin..maka akan tampak halaman berikutnya.Scroll halaman kebawah dan cari "Features &services" Lalu klik "Associated Program"..Perhatikan gambar dibawah ini .


3. Pada halaman selanjutnya klik tab " Link&Banners"..Perhatikan gambar dibawah ini


4. Akan masuk di Halaman untuk search" atau mencari image yg anda inginkan. Untuk hal ini, jika misalnya anda mau nyari image "Camera" maka pada kolom'search" pilih kategori yg sesuai atau bisa juga cukup dgn"All product" (hanya saja untuk pilihan "All product" jadi kurang spesifik) ..Dan lalu di kolom "For" anda tulis "Camera"...Kemudian Klik "GO"...Perhatikan gambar dibawah ini :


5. Akan muncul halaman yg menampilkan hasil pencarian untuk image "Camera".Langkah selanjutnya klik Tab "Getlink" pada image yang anda pilih.Perhatikan gambar dibawah ini :


6. Nah dihalaman ini lah tempat anda untuk meng kopi paste ,baik image maupun kode script untuk image pilihan anda tsb.Disini ada 3 opsi pilihan yang bisa anda ambil.
  • Opsi pertama : Teks And Image. -->> Centang Tombol Text & Image (Sy ksh kode no.1)
Untuk pilihan ini anda bisa mengatur warna background , Garis Tepi , Teks dan link agar sesuai dengan warna halaman blog anda. Setelah anda atur , maka Copy paste lah Script yg ada di kolom "Get HTML code For This Image"(Sy ksh kode no.3) -- kode ini bisa langsung anda masukkan di blog dengan cara masuk ke blogger - Layout - Page element - lalu Add Gadget - HTML & Java script- Masukkan kode tadi- lalu Save. ( Detail cara masukkin kode HTML di blog bisa lihat di Cara masukkin kode HTML di Blog .) Sedangkan tampilan Gadgetnya akan terlihat seperti gambar (sy kasih kode no.2) .Perhatikan gambar dibawah ini :


  • Opsi kedua : Image Only
Untuk Menampilkan Image saja (Tanpa embel2 harga dsb) caranya dengan mencentang radio button kedua .Maka di kotak sebelah kanan akan muncul image yang lebih besar dari opsi pertama tadi. Untuk menampilkan image ini di blog anda, ada dua macam yakni sebagai Gadget dan sebagai image di halaman posting .

Untuk cara menampilkan sebagai "Gadget" sbb :
- Dihalaman Amazon -
>>Klik kanan pada tulisan dibawah image tsb (Right click On this link teks..dst).
Kemudian pilih "Save target As".
Beri nama terserah anda ,misalnya : "Camera ".
Lalu klik"save".
Langkah selanjutnya :
Masuklah ke account blogger anda,
pilih "-> Layout
-> Page element
-> lalu Add Gadget
-> Image(gambar)
Anda akan masuk pada halaman " Configure Image"
-> Pilih :"Browse picture from my computer"
-> cari file camera yg tadi anda simpan di hardisk anda
-> jika sudah ketemu klik "Open"
Maka anda akan kembali ke pada halaman " Configure Image" .
Pada tahap ini anda bisa memberi judul Image tsb dikolom"title" misalnya "Best Camera "
Lalu Agar image ini menjadi sebuah link yg jika ditekan akan menuju ke URL account affiliate amazon anda ,caranya masukkan kode html dari amazon sbb :

Sebelumnya kita kembali ke Halaman amazon dulu ya. Lihat Kolom "Get HTML code For This Product link ".Disitu kan tertulis script html. Jangan di copy semuanya.Cukup ambil sebagian saja.Jika contoh pada gambar kurang jelas , coba anda klik kanan gambar dibawah ini - trus klik "Open in New tab". Pada gambar anda akan melihat kode yg bisa diambil contohnya seperti ini :


<a href="http://www.amazon.com/gp/product/B000LRMS66?ie=UTF8&tag=............................-20&linkCode=as2&camp=1789&creative=9325&creativeASIN=B000LRMS66">....dst
Yang anda ambil cukup http://www.amazon.com/gp/product/B000LRMS66?ie=UTF8&tag=...........................&linkCode=as2&camp=1789&creative=9325&creativeASIN=B000LRMS66

-> kemudian klik "upload".Maka image itu akan masuk sebagai sebuah gadget berbentuk gambar, lengkap dengan Link nya.



Untuk cara menampilkan sebagai image di halaman posting sbb
:
Caranya hampir sama dengan cara menampilkan image sebagai Gadget, hanya saja dissini anda mesti berada di halaman posting- yakni seperti anda sedang membuat postingan.

Jadi pada saat anda sedang di halaman postingan , klik "Add image" .... itu lho gambar kotak kecil diatas boks posting yang terlihat seperti lukisan gunung dengan awan biru... keliatan kan ??
Kalau anda klik "add image" maka akan muncul halaman yag sama dengan sewaktu anda akan menupload Image untuk "GAdget" diatas tadi. Cuma di sini tidak akan ada untuk kolom buat nampilin judul dan link image tsb.

Nah gimana caranya agar image ini juga bisa menjadi sebuah Link ??
Berikut ini caranya :

Setelah image anda upload ... anda perlu mengeditnya dengan cara pilih opsi "Edit HTML" di atas boks postingan(Bukan Edit HTML yang di "LAYOUT" ya....)
Dan buang kode image yang dari blog spot yang biasanya berekstensi : on blur.....dst Untuk kita ganti dengan Kode Link yg dari Amazon.
Perhatikan Gambar dibawah ini


Di gambar diatas : No.1 adalah kode image setelah anda upload gambar di blogger.(jika kurang jelas : Klik kanan pada gambar trus "open in New tab")
Contoh kode HTML gambar tsb akan seperti ini :

< onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_sGHXTgz8oas/ScSlniFUVAI/AAAAAAAAAPc/pF8atYVLu0c/s1600-h/Amazon+di+web+amazon.bmp"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 342px; height: 400px;" src="http://1.bp.blogspot.com/_sGHXTgz8oas/ScSlniFUVAI/AAAAAAAAAPc/pF8atYVLu0c/s400/Amazon+di+web+amazon.bmp" alt="" id="BLOGGER_PHOTO_ID_5315555558786618370" border="0" />



Lalu yang no.2 (Pada contoh gambar 8 diatas ) adalah kode html Amazon yang anda kopi sebagian.
Note : untuk Opsi menampilkan image di postingan, maka kode amazon yang mesti anda copy agak berbeda dgn cara untuk nampilin "Gadget" Untuk jelasnya kode yg mesti anda pakai sbb :


< href="http://www.amazon.com/gp/product/B000R4HDTU?ie=UTF8&;tag=................-20&;linkCode=as2&;c=1789&;creative=9325&;creativeASIN=B000R4HDTU">

Dan yang no.3(Pada contoh gambar 8 diatas) adalah kode setelah anda gabungkan kode no.1 dan kode no.2 dimana setelah anda edit jadinya sepeti ini --
Kode no.1 (Warna biru) digabung dengan kode no.2(warna merah )

<a href="http://www.amazon.com/gp/product/B000R4HDTU?ie=UTF8&;tag=.............-20&;linkCode=as2&;c=1789&;creative=9325&;creativeASIN=B000R4HDTU"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 160px; height: 125px;" src="http://4.bp.blogspot.com/_sGHXTgz8oas/ScSoIaZsaxI/AAAAAAAAAPk/EFjRDXyaL5k/s400/Home+Camera+security.jpg" alt="" id="BLOGGER_PHOTO_ID_5315558322683538194" border="0" />
Nah nanti hasilnya akan terlihat image seperti ini :




Note : Jika anda mendekatkan kursor mouse anda pada image kamera diatas , pasti akan tampil flash yang akan menerangkan info harga , deskripsi , dlsb... Bagaimana agar hal ini bisa terjadi ???

Berikut caranya :
Masuklah ke Account Blogger
Trus ke bagian "Layout"
Lalu pilih "edit HTML"
centang kotak kecil "Expand Widget Templates"
lalu masukkan kode HTML amazon yg ada di halaman amazon,
yakni di kolom yang dikotak no.4 "Add Product Preview Script" (seperti contoh gambar 7 #Amazon -Copy gambar + Kode HTML # )
ke dalam halaman edit template blog sebelum tag </body> ..
Perhatikan gambar dibawah ini ..


Note : di Blogspot terkadang suka tidak bisa di save kode HTML dari Amazon , karena tidak "Wellformed" ini biasanya diberitahukan diatas boks edit, lakukan saja sedikit perubahan sesuai petunjuk yang diminta.
Misalnya anda akan diminta untuk memberi tanda tag " " pada angka 0 ( nol ) atau yang lainnya. Pokoke... coba-coba aja. Saya aja kadang memang suka begitu..tapi setelah dilakukan berulang2 dengan merubah sesuai petunjuk ,akhirnya bisa juga.

Jika tahap2 itu sudah anda lakukan , maka kini anda sudah bisa membuat image amazon yang "hidup" dan bisa anda gunakan untuk dipromosikan.

Selamat mencoba...
Artikel lain :

12 komentar:

  1. Mau ikutan tanya dunk.
    Ini di "publish html" atau "edit html" memasukkan url yg ambil dari amazon?
    Kok ke edit html di page layout bisa berakibat ke page publish ya?
    Aku soalnya gak pernah ngambil yg image dari amazon, krn di blogspot gambarnya gak keluar, jadi terpaksa mengambil text and image, jadi selalu aja ada logonya amazon.

    Makanya pingin nih bisa masukkan imagenya doang.

    Tapi, jadi bingung, kenapa masukkinnya di edit html yang di page layout dan bisa menjadikan image itu munculnya di postingan.

    Garuk garuk kepala mode on ....

    BalasHapus
  2. Yg anda tanyakan itu , untuk fungsi Flash. Coba deh anda dekat kan kursor mouse anda ke image gambar kamera diatas, pasti akan muncul flash yg menerangkan harga dari amazon. Nah caranya dengan memasukkan script yg dikasih amazon di halaman "Layout"- Edit HTML - masukkin sebelum tag </body> yg ada di halaman "Edit HTML"

    BalasHapus
  3. Hmmmm bingung..... apa harus jadi member dulu ya?

    BalasHapus
  4. Ancis F.AMa :
    Ya..tentu pak Ancis mesti menjadi member amazon.
    Daftar aja...gratis kok...

    semoga bermanfaat

    BalasHapus
  5. Terimakasih sekali bror,,,,ini sangat membantu saya sebagai pendatang baru di Amazon
    Suksessssssssss untuk mu bror
    Merdeka

    BalasHapus
  6. Sitorus :
    Sama-sama Brur..sukses juga utk anda

    BalasHapus
  7. very nice blog and excellent posting...
    leave ur comment when u visit to my blog.

    Interest programming C++, PHP or Java(later)? just visit All About Programming, read and leave comment...
    Wannabe learn about blog, blogger visit me in Let Go Blogging

    BalasHapus
  8. Kang maaf nich, pertanyaannya agak ndeso,dan sedikit bego, maklum newbi without experience, sebenarnya sejauh mana sih manfaat pasang Amazon di blog? trims atas jawabannya.

    BalasHapus
  9. Kpd usi2506 : manfaat pasang Amazon di blog adalah opsional saja, biasanya orang yang gemar mempromosikan produk untuk jualan barang milik orang lain(Affiliate) akan sangat suka menggunakan blognya utk dipasangi aneka widget atau gambar dari amazon.Ketika seseorang mengklik gambar yang tentunya sudah diberi link tracking ID affilite amazon, dan lalu membeli produknya, maka kita akan mendapatkan komisi dari amazon.

    Demikian semoga bermanfaat
    Salam
    Bahrul Ulum

    BalasHapus
  10. Terima kasih atas ilmunya,ini sangat membantu dan sudah saya praktekkan dalam website,kebetulan saya baru belajar jadi saya dapat tambahan ilmu baru lagi yang sangat berguna.Teruslah berkarya dan sukses untuk Anda.

    BalasHapus
  11. terima kasih, artikel ini sangat bagus, saya sudah terapkan. Ada pertanyaan buat saya, yaitu (1) image amazon tidak dapat menyatu (inline/float) dengan text postingan, artinya image amazon memakan row/baris kemudian text lanjutan dari postingan berada dibawah, sehingga kurang bagus tampilan postingnya, (2) bisakah dua atau lebih image amazon berada pada row/baris yang sama di postingan. Terima kasih

    BalasHapus
  12. Yahh,sayasudah daftar amazon tapi masih ngulik belum pate paham...tanks infonya gan...

    BalasHapus

Saya berterimakasih atas koment anda yang Sopan dan Ramah...
Sebelum kasih komentar,sebaiknya lihat Contoh komentar spam disini , Agar komentar anda tdk tertangkap oleh spam filter blogger.