Desain Grafiti 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.

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.

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?