Cara Pasang Horisontal Thumbnail Pada Blogspot Dengan Link Generator
Warning: artikel ini akan panjang. Tapi semata-mata agar jelas setelah Anda membacanya. Well, itu sih harapannya ^_^
Salah satu kegayaan blogger sok sibuk seperti saya adalah ikut lebih dari satu komunitas blogger #sibakponi. Tapi ada satu kesamaannya; yaitu mensyaratkan para member untuk memajang banner community di blog masing-masing.
Ketika makin banyak banner yang harus saya pasang, menurut saya tampilan blog jadi nggak syantek lagi. Barisan banner yang memanjang ke bawah di bagian side bar rasanya jadi "merusak" pemandangan blog. Nah, saya aja sebagai pemilik blog merasa gerah ngeliatnya, apalagi orang lain?
Intinya, saya jadi ngga puas lihat tampilan blog sendiri. On the other hand, I need to keep it as member identity. Sampai akhirnya saya melihat tampilan banner yang seperti ini di blog milik Myra Anastasia.
Kelompok banner ditempatkan pada bagian footer atau bawah blog. Ukuran banner sesuai, tidak terlalu kecil juga nggak gede banget. Karena nggak sedikit lho yang membuat banner segede-gede gaban bikin penampakannya jadi tidak okeh #curcol hah!
Karena lokasinya di bagian paling bawah maka memungkinkan sekali untuk memuat beberapa banner. Pokoknya sesuai dengan kemauan. Cucok banget!
Mulanya saya pikir bisa dieksekusi seperti biasanya yaitu dengan menambahkan coding pada Gadget di menu Layout. Ternyata mekanisme tersebut hanya dapat diaplikasikan pada satu image saja. Ketika diaplikasin pada banyak image banner, ceritanya beda lagi #lapkeringet
Setelah dioprek-oprek -istilah mana pulak ini?- ketemulah caranya. Long short story, berikut langkah-langkah yang dilakukan hingga akhirnya saya dapat membuat thumbnail berderet horisontal di mana setiap image banner jika diklik akan langsung terkoneksi ke masing-masing situs komunitas yang saya ikuti. Ahay!
Jadi ada 3 aplikasi yang harus kita libatkan. Pertama Photobucket, kedua Link Generator dan ketiga Gadget di Blogspot.
Mengapa sampai 3?
Berikut penjelasannya.
Photobucket
Photobucket adalah situs layanan hosting gambar dimana kita bisa berbagi gambar, video serta foto. Selain sebagai tempat penyimpanan, Photobucket juga dilengkapi dengan fitur editing berikut beragam efek foto.
"Kelebihan" Photobucket dibanding situs hosting gambar lainnya, mungkin karena situs ini menyediakan url link yang berbeda sesuai jenis media yang kita pakai untuk berbagi suatu image.
Seperti yang terlihat pada ilustrasi berikut.
Masing-masing channel media mempunyai URL link yang berbeda. Perhatikan seksama maka nampak jika script untuk berbagi image via Email berbeda dengan script untuk sharing image yang sama melalui web (HTML).
Cara menyalinnya pun mudah, cukup tekan link sesuai kotak pilihan hingga berubah warna dan muncul tulisan Copied. Setelah itu baru kita paste.
Cara menyalinnya pun mudah, cukup tekan link sesuai kotak pilihan hingga berubah warna dan muncul tulisan Copied. Setelah itu baru kita paste.
Untuk menikmati fasilitas Photobucket, kita perlu Sign-Up terlebih dahulu. Oh ya, situs hosting gambar Photobucket ini gratis ya.
Link Generator
Sebagaimana namanya, Link Generator artinya si pembuat link.
Mengapa diperlukan link generator? Karena di sini kita merangkai 2 url menjadi satu. URL pertama adalah url image dari Photobucket. Sedangkan URL yang kedua adalah URL situs yang akan dijadikan sebagai landing page. Nah lo, apalagi itu landing page?
Dari sekian banyak link generator tak berbayar, saya paling comfortable menggunakan MySpaceGen karena pengoperasiannya yang mudah.
Blogspot
Yang ketiga, karena blog saya berbasis Blogspot. Tentu hasil codingnya diaplikasikan pada gadget blogspot toh?
Sekarang kita langsung menuju langkah-langkah pengerjaannya yuk!
Step 1
Dari image yang sudah ditentukan dan sudah saya storing di Photobucket, pilihlah jenis HTML. Kenapa memilih HTML bukan lainnya? Karena kita akan berbagi image tersebut via blog.
Di sini saya mengambil contoh banner Asinan Blogger #promosi hehehe.
Di sini saya mengambil contoh banner Asinan Blogger #promosi hehehe.
Copy dengan menekan kolom HTML hingga muncul tulisan Copied.
Step 2
Buka window baru untuk mengakses laman http://www.myspacegens.com/ , cari bagian Generator dan pilih Link Generator.
Setelah tampil seperti gambar di bawah, pada bagian Link Type di General Options tersedia 2 pilihan (drop down list) yaitu Text Link dan Image Link.
Mengingat kita akan menautkan gambar pada landing page -di sini contoh landing page adalah www.asinanblogger.com- maka kita pilih Image Link.
Jika memilih Image Link, tampilan kolomnya akan berubah menjadi seperti ini.
Step 3
Lalu paste HTML hasil salinan dari Photobucket pada kolom Image URL di bagian Link Properties.
Step 4
Pada Click Options ada dua kondisi yang harus kita penuhi. Pertama link URL landing page. Salin alamat URL landing page yang dituju.
Selanjutnya pemilihan jenis window. Landing page yang dituju apakah akan dibuka di window baru atau di window yang sama. Opsi tersebut terdapat pada kolom Open In. Terkait hal ini, saya memilih New Window. Tujuannya agar memudahkan pembaca untuk mengakses dua laman sekaligus.
Jika semua sudah selesai, klik saja tombol Submit.
Step 5
Script yang telah digenerate berada dalam kotak seperti penampilan gambar di bawah. Di mana script tersebut artinya adalah;
Gambar yang akan nampak pada blog kita adalah banner Asinan Blogger. Jika kita klik image banner Asinan Blogger maka akan ada window baru yaitu laman Asinan Blogger. Si landing page tadi.
Cihuy 'kan?
Nah, select all script dan copy.
Step 6
Buka lagi window lagi untuk login ke Blogspot.
Pilih Layout, add Gadget, pilih HTML/Javascript.
Lalu paste script di atas hasil Link Generator tersebut (Step 5) di kolom HTML.
Lakukan langkah-langkah tersebut sesuai jumlah banner atau image yang diinginkan.
-----
Agar penampakan banner seperti yang saya contohkan, copy saja coding yang sudah saya highlight biru muda berikut.
Sedangkan coding yang ditulis tebal (Bold) adalah hasil link generator masing-masing, ya. Jadi pastinya akan berbeda.
<table border="0" cellpadding="2" cellspacing="0" style="border-collapse: collapse" width="383">
<tbody><tr>
<td><a href="http://www.asinanblogger.com/" target="_blank"><img src="http://i1103.photobucket.com/albums/g480/ratuna173/Komunitas/bb406628-2a13-4eba-9844-f84b822b41e4.png" border="0" alt=" photo bb406628-2a13-4eba-9844-f84b822b41e4.png"/></a><td>
<td><a href= tuliskan script banner anda #1 /></a><td>
<td><a href= tuliskan script banner anda #2 /></a><td>
<td><a href= tuliskan script banner anda #3 /></a><td>
Setelah menuliskan semua script yang mewakili jumlah banner yang ingin ditampilkan, salin script berikut di pada bagian akhir.
</td></td></td></td></tr></tbody></table>
Kemudian SAVE hasil pekerjaan Anda.
Dan hasilnya, tadaaaa!
Nah para blogspot-er, jadi tertarik untuk beresin banner-bannernya juga?
Hayuk!
15 comments
bentar bentarr...aku bukmark dulu. nanti dipraktekan langsung kalo udh jadi pengangguran, hehe.
ReplyDeletetfs mba ratna :*
Sejak kapan emak riweuh jadi pengangguran? ^_^
Deletewah, makasih sharingnya mba Ratna. Ilmu baru :D
ReplyDeleteSemoga berguna mba Silvi. Terima kasih sudah mampir.
DeleteKalau horizontal gitu jadi lebih rapi ya, Mbak. Dan gak makan space :D
ReplyDeleteBetul jadi lebih rapih. Karena rapih jadi lebih enak dipandang. Kemaren-kemaren, agak "sepet" lihat blog sendiri hahahah. Sekali lagi, tararengkyu Chi ^_^
DeleteSudah lama mengagumi blog orang yang ada giniannya, sambil mikir, kok bisaaa?? Ternyata Mbak Ratna jagonya. Trimakasih banyak. Pengen nyoba, tapi apa bisa ngebrantakin yang lain, kalau saya salah nge-klik? *Gaptek kronis :)
ReplyDeleteCoba stepnya seperti penjelasanku di atas mba Othi. Pelan-pelan aja. Insya Allah bisa atau mau dibantu? ^_^
DeleteAh, passss pisan dengan yang saya butuhkan, dulu pernah ada yang ngasih share juga tapi lupa ngebookmark link-nya jadi we hoream ngubek2 lagih, nuhun Bu Ratnaaaa kautahuyangumau hahahah
ReplyDeleteAku memang tahu kok, Nong hihihi
Deletecoba dulu ah...
ReplyDeleteterima kasih Mbak
Sama-sama
Deletemakasih infonya mba...bermanfaat sekalii nih..perlu dicobaaa
ReplyDeletewah ... hasilnya jadi keren ya mbak ... :)
ReplyDeleteDuh, mau dibikin kek begitu belum sempet terus. *alesan wkwkwkwk. Tipsnya oke mba. Makasih yaaaa :)
ReplyDeleteHai ^_^
Terima kasih sudah berkunjung dan membaca tulisan saya di blog ini.
Silakan tinggalkan komentar yang baik.
Mohon maaf, komentar anonim maupun yang sifatnya spam, tidak akan dipublikasikan.
Keep reading and Salam !