Menambahkan Custom Pin It Button di WordPress

Berdampingan dengan search engine, media sosial merupakan salah satu channel utama untuk mendatangkan traffic ke blog kita. Maka permudahlah pembaca untuk meng-share konten blog kita ke sosial media; antara lain dengan menambahkan social sharing buttons pada blog post.

Kali ini saya akan fokus pada sosial media yang sifatnya sangat visual,  Pinterest, yaitu tutorial untuk menambahkan custom “Pin It Button” pada gambar yang ada di blog. Kalau mau menggunakan button standar Pinterest, kita bisa setting melalui add-on/extension pada internet browser, atau menggunakan feature pin it button or widget dari Pinterest itu sendiri.

Buat yang kreatif kayak kita-kita gini tentu ingin sesuatu yang beda dong ya, kita ternyata bisa lho bikin pin it button sendiri. Jadi bisa pilih warna, font atau bentuk button yang kita suka. Caranya mudah dan gratis, tapi tutorial saya ini hanya berlaku untuk self-hosted WordPress ya. Saya ngga tau bagaimana mengaplikasikannya untuk platform blogging yang lain hehehe…

Install dan Activate plugin JQuery Pin It Button For Images

1. Masuk ke dashboard WordPress >>Plugins >> Add New

2. Masukkan “JQuery Pin It Button For Images” di Search box, lalu klik Search button

3. Install plugin JQuery Pin It Button For Images lalu klik Activate Plugin

4. Cari plugin yang sudah aktif tersebut di daftar Installed plugin, klik Settings.

5. Sesuaikan setting pada tab “Selection” seperti di bawah ini.

Perhatikan resolusi minimum gambar yang bisa mentrigger munculnya pin it button; defaultnya 0px; tapi saya ubah menjadi 300px karena untuk gambar yang lebih kecil dari segitu tidak saya maksudkan untuk bisa di-pin (misalnya icon, thumbnail). Klik Save Changes.

6. Sesuaikan setting pada tab “Visual” seperti di bawah ini.  Di sini kita bisa upload button image yang kita mau, bisa buat sendiri dengan format png atau cari “free pin it buttons” yang beredar di internet – salah satunya dari freebie yang saya buatkan ini ^_^. Jangan lupa klik Save Changes.

Transparency value : jika 0 maka saat di-hover, button akan muncul dengan background transparan sehingga gambar di bawahnya tetap terlihat jelas. Jika diset 0,5 maka gambar kita akan muncul setengah transparan (seperti dioverlay warna putih 50%), dan jika diset di angka 1, saat di hover gambar kita akan tertutup warna putih alias tidak terlihat.

Pin It button position : Bisa diset di kiri atas, tengah, kanan atas etc tergantung selera.

Pin It button margins : Posisi relatif button terhadap gambar; saya pilih posisi top left dan setting margin 20px, maka sisi atas button akan berjarak 20px terhadap batas atas gambar, dan sisi kiri button akan berjarak 20px terhadap batas kiri gambar. Bottom dan right margin dalam setting saya ini tidak berpengaruh.

7. Selesai! Sekarang kita bisa ke front-end blog kita dan coba hover (arahkan kursor) di salah satu foto/gambar blog post, akan muncul pin it button yang tadi kita set. Yeeayy! ^_^

 

Untuk pembaca yang budiman, saya sudah buatkan beberapa pin it button yang bisa didownload dan digunakan untuk mempraktekkan tutorial saya ini. Kalau sudah jadi kasih tau saya hasilnya yaa ^_^

DOWNLOAD Custom Pin It Button