Widget HTML #1

Cara Menghubungkan Akun Instagram Dengan Blog Menggunakan Lightwidget

Hai semua! Kali ini aku akan sharing tentang cara memasang widget Instagram di halaman blog. Ini tentu berguna buat kamu yang demen Instagraman sekaligus punya blog, terus ingin menampilkan akun Instagram di blog tapi belum tahu caranya. Nah, sebentar lagi aku akan berbaik hati membagi tahu caranya step by step.

Manfaat menampilkan widget Instagram di blog, selain untuk mempromosikan profil Instagram kita kepada pengunjung blog, juga bisa membuat tampilan blog jadi lebih menarik. Apalagi buat blogger-blogger yang pinter menghasilkan foto-foto bagus, sayang banget kalau galeri Instagramnya tidak dihubungkan ke blog.
Instagram Arizuna Zukirama
Instagram @zuckici
Tapi memasang widget Instagram di blog kemungkinan juga bisa membuat loading blog menjadi lebih berat. Sebab ukuran widget-nya lumayan memakan tempat. Apalagi kalau blog sudah dihiasi banyak widget-widget lainnya, bisa-bisa loadingnya benar-benar akan terganggu. Jadi kalau di blog kamu widgetnya sudah banyak, ada baiknya dikurangi untuk memberi ruang Lightwidget.

Sebenarnya ada banyak penyedia widget Instagram untuk blog dengan kelebihan dan kekurangan masing-masing. Seperti Instagme, SnapWidget, Websta Widgets, Lightwidget dan mungkin masih ada lagi. Aku sendiri setelah menjajal beberapa widget, akhirnya memilih Lightwidget untuk blog ZUCKICI.COM ini. Lightwidget yang paling sesuai dengan keinginanku.

Yang jelas Lightwidget tampilannya sudah responsive. Jadi ukurannya akan menyesuaikan saat blog dilihat melalui desktop, tablet maupun layar ponsel ukuran berapapun. Foto-foto kita yang ada di Lightwidget juga ketika dibuka akan terhubung langsung menuju website asli Instagram, bukan ke situs penyedia widget yang kadang-kadang banyak iklannya. Selain itu fitur-fitur di Lightwidget cukup banyak dan cara setting-nya juga sangat gampang.

Tapi selain kelebihan-kelebihan di atas, Lightwidget juga memiliki sedikit kekurangan. Saat kita apload foto di Instagram, foto tersebut tidak akan langsung tampil di widget yang ada di blog. Terkadang butuh waktu sampai berjam-jam fotonya muncul. Kalau mau yang cepat tampil setelah mengunggah foto baru, bisa menggunakan Light Widget versi premium alias berbayar. Cukup bayar sekali seharga $10, Lightwidget Pro sudah bisa digunakan selamanya.

Baiklah, tanpa memperpanjang lagi kata-kata sambutan, berikut ini cara memasang widget Instagram di blog menggunakan Lightwidget.

Langkah pertama masuk ke situs Light Widget (lightwidget.com), klik Created Widget. Kemudian untuk menghubungkan Lightwidget dengan akun Instagram klik Log In yang berwarna hijau. Masukkan nama pengguna beserta kata kuncinya. Setelah berhasil masuk ke Instagram, klik Authorize sebagai syarat bahwa kita mengizinkan Lightwidget terhubung dengan akun Instagram kita. Oh iya, saat proses redirect ini privasi akun Instagram kita harus diatur untuk umum, jangan diprivat hanya untuk pengikut.

Setelah kembali berada di beranda Lightwidget, di kolom di bawah keterangan INSTAGRAM USERNAME masukkan nama pengguna kita. Kalau di widget hanya ingin menampilkan foto dengan hastag tertentu, tuliskan nama hastagnya di kolom di bawah keterangan FILTER PHOTOS BY HASTAGS. Kalau ingin semua foto ditampilkan, abaikan saja kolom tersebut. Setelah itu silakan coba klik PREVIEW.

Sampai di sini proses redirect akun Instagram ke Lightwidget sudah selesai. Selanjutnya tinggal mengatur bentuk tampilan Lightwidget yang nantinya akan mejeng di blog kita. Pengaturan yang bisa dilakukan meliputi:

TYPE OF WIDGET

Di type of widget ini kita bisa mengatur model galeri foto yang akan tampil di blog. Ada tiga pilihan yang tersedia:

1. Grid

Tampilan grid seperti kisi pada album foto di galeri ponsel. Panjang dan lebar semua foto akan terlihat sama dan rapi meskipun ketika diposting di Instagram ukurannya berbeda-beda.

2. Slide Show

Kalau ingin tampilan fotonya bergerak, pilih saja no 2, Jokowi JK, eh Slide Show.

3. Columns (Pinterest Style)

Di tipe ini, seluruh tulisan keterangan foto (caption) akan terpampang tepat di bawah foto.

NUMBER OF COLUMNS

Number of columns adalah jumlah foto yang ingin ditampilkan secara mendatar.

NUMBER OF ROWS

Number of rows adalah jumlah foto yang ingin ditampilkan secara menurun.

NUMBER OF PHOTOS

Number of photos adalah jumlah foto yang ingin ditampilkan saat memilih tipe Slide Show.

IMAGE HOVER EFFECT

Fitur ini untuk memberi efek pada foto saat kursor menunjuk salah satu foto yang ada di widget Instagram di blog. Efek-efek yang bisa dipilih antara lain:

1. Fade In

Kalau memilih Fade In, ketika kursor mengarah ke salah satu foto, foto tersebut akan langsung tampak memudar. Seakan-akan ada yang menambah brightness-nya secara misterius.

2. Fade Out

Fade Out kebalikan dari Fade In. Di widget semua foto akan tampak memudar, tapi begitu kursor menunjuk salah satu foto, foto tersebut langsung terlihat jernih sesuai aslinya.

3. Zoom In

Zoom In memberikan efek membesar pada foto saat foto ditunjuk kursor. 

4. Zoom Out

Sebaliknya Zoom Out, foto akan terlihat mengecil/menjauh ketika disentuh kursor.

5. Zoom and Rotate

Sementara kalau Zoom dan Rotate, saat ditunjuk kursor, foto akan membesar dan sedikit memutar.

6. Icon Overlay

Pilih ini kalau ingin menunjukkan overlay. Overlay adalah suatu gambar putih yang ber-background warna hitam.

7. Show Caption

Jika memilih efek Show Caption, saat kursor diarahkan ke foto, di dalam foto bagian bawah akan terlihat keterangan foto tersebut. Tapi hanya terlihat beberapa potong saja. Kalau ingin seluruh caption terlihat, ceklis pada tulisan Show Captions yang ada di bawah Padding.

Itulah beberapa efek foto yang terdapat di Light Widget. Kalau tidak ingin memberi efek apapun, pilih saja None.

PADDING

Padding adalah jarak antara foto satu dengan foto yang lainnya, baik jarak mendatar maupun menurun. Isi saja 0 kalau tak ingin memberi jarak.
Widget Instagram Untuk Blog
Setting Lightwidget
Klik Preview untuk melihat-lihat contoh widget Instagram yang nanti akan tampil di blog. Kalau masih ada yang kurang sreg silakan diubah-ubah lagi. Kalau dirasa sudah memuaskan, langsung saja klik Get Code. Copy semua kode yang muncul jangan sampai ada yang ketinggalan sehuruf pun.

Selanjutnya masuk ke Dashboard blog. Pilih Tata Letak, pilih Tambahkan Gadget, kemudian pilih HTML/JavaScript. Tulis judulnya Instagram atau terserah kamu mau diberi judul apa, kemudian pastekan kode tadi di dalam kolom Konten. Terakhir klik Simpan.

Dengan demikian segala proses pemasangan widget Instagram telah rampung. Coba cek blog kamu sekarang. Foto-foto keren kamu di Instagram juga terpampang nyata di blog. Tinggal atur saja letak Lightwidget enaknya di mana.

Baca Juga: Cara Menyimpan Foto atau Video IG Story Paling Gampang dan Cepat Tanpa Perlu Aplikasi

Seperti itulah cara memasang widget Instagram di blog menggunakan Lightwidget. Untuk widget-widget lainnya seperti Instagme, Websta Widget dan Snapwidget, cara pasangnya sebenarnya tidak jauh berbeda. Hampir sama. Terima kasih sudah berkunjung dan membaca. Terakhir kalau ingin berteman secara Instagram dengan aku, follow saja akun @zuckici kemudian kirim pesan jika ingin difollow balik. Happy Blogging. ^^

16 komentar untuk "Cara Menghubungkan Akun Instagram Dengan Blog Menggunakan Lightwidget"

Comment Author Avatar
Yang premium akan didahulukan, yang gratis harus rela antri.
Blogku sudah berat, tidak berani pasang instagram.
Apalagi, instagramku isinya photo-photo kurang berkualitas, Malu ah.
Comment Author Avatar
jadi mau pasang juga neh, biar ig eksis,
skalian ke ig ku dong, yg masih kinyis2 :)
Comment Author Avatar
kalau tidak awas tak intip lhooo
Comment Author Avatar
Wah ini adminnya masih traveling.
Comment Author Avatar
NICE TRICK :) thx
kuy kepoin http://puteraseptiana.blogspot.co.id/2017/08/sebuah-kegelisahaan.html
Comment Author Avatar
Kalo pake WP enak tinggal setting dan install plugin tambahan..hehe
Comment Author Avatar
Wah itu lengkap bangt min... Bnrr bangt ni artikel blog aku ga ada trafik datlri IG
Comment Author Avatar
kok aku ga bisa ya? disuruh upgrade :')
Comment Author Avatar
Disuruh Upgrade ..mungkin tdk ada layanan gratis lagi
Comment Author Avatar
iya di suruh upgrade uhhh no............. :(
Comment Author Avatar
terima kasih mas, sangat membantu tutorialnya. salam
Comment Author Avatar
Wahhhh sangat bagus artikelnya, dapat mempercantik suasana blog jadinya jika di pasang widget instagram ini
Comment Author Avatar
tengs inponya gan. gue coba triknya.

Silakan berkomentar dengan tertib dan sopan sesuai dengan adat istiadat yang berlaku.