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

#Gambar 1-Halaman Amazon-Loggin ke Amazon#

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

#Gambar 2 -Halaman Amazon-Associated Program#

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

#Gambar 3 -Halaman Amazon Link and Banners#

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 :

#Gambar 4 -Halaman Amazon-Search Image#

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 :

#Gambar 5 -Halaman Amazon-Get Link#

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 :

#Gambar 6 -Halaman Amazon-Teks&Image#

• 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.

gambar 7 #Amazon -Copy gambar + Kode HTML #

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

Gambar 8 #Halaman Blogger-Kode HTML Image #

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXt4X5bs9bJsS7OawxAHM0xxT6-LTbDkQNYlyLSoExYIPppV0vwKB14N9W_Am-n7HFZXlcEpW0hvSQp5wV_BRfbin8yYn8nx2t0NDb4GhOyj0Pj3qbAIYQGzk4tWSDN3kwIfDoQo9-CPt9/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXt4X5bs9bJsS7OawxAHM0xxT6-LTbDkQNYlyLSoExYIPppV0vwKB14N9W_Am-n7HFZXlcEpW0hvSQp5wV_BRfbin8yYn8nx2t0NDb4GhOyj0Pj3qbAIYQGzk4tWSDN3kwIfDoQo9-CPt9/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvNjt1uIrcaWBd8J6ik6b95EiYP7tKVMm_C1JnuFf8kjCghoPjv7k0tpzW2-nqi1DRPWRSIA7nAg6saqL9QSa9ODdADZEzhL_HLG6r8-vhn9tBTEfCIGTe4TjgETYnkXL7KtsInET-Zkw/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 ..

Gambar 8 #Halaman Blogger-Layout-Edit HTML #

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 :

• Cara Membuat Kotak Blogroll sendiri
  
• Forward Email
  
• Membuat kotak "Recent Visitor"
  
• Cara membuat link pada postingan
  
• Cara memasukkan script HTML banner ke blog
  
• Cara Mengambil screenshot halaman Blog
  
• Cara Mengedit Gambar atau Image
• Memasukkan (Upload) Gambar Ke Blog
• Merubah tampilan "Theme" Gmail