Memasang tombol Pin it pada Foto Blogger

Pinterest adalah salah satu media sosial yang baru-baru ini lagi nge-hits. Media sosial yang rilis pada bulan Maret 2010 ini merupakan buletin board berbasis web. Di Pinterest kita bisa berbagi foto, gambar dan pernak-pernik yang kita sukai, foto atau gambar yang kita sukai dan kita share ke orang lain itulah yang diberi istilah ‘pin’.

Dan menurut Saya wajib untuk pengelola blog atau situs yang membahas tentang Desain Grafis, Edit Foto Digital dll, untuk memiliki tombol Pit it karna dapat membantu kita untuk pembaca membagikan foto menarik dari posting di blog/situs kita.

Pada bulan April, Pinterest diam-diam merilis update besar untuk tombol Pin It. Sobat sekarang dapat menambahkan tombol Pin It melayang di sudut kiri atas gambar blog hanya dengan satu baris kode. Ini adalah cara yang jauh lebih mudah untuk menambahkan tombol Pin!

Berikut adalah cara untuk menambahkan tombol Pin pada Foto di blog untuk Blogger.

Ini bekerja pada semua template Blogger kecuali Tampilan Dinamis, yang tidak menerima kustomisasi.

Untuk Pinterest Pengguna Widget
Jika Anda sudah menggunakan papan Pinterest resmi atau widget profil di blog, Anda sudah memiliki sebagian besar kode pada tempatnya. Yang perlu Anda lakukan adalah menambahkan data-pin-hover = "true" untuk kode yang ada pada template, sehingga terlihat seperti ini:

Untuk Pengguna Baru
Jika Sobat tidak menggunakan papan atau widget profile, jangan khawatir. Sangat mudah untuk menambahkan kode!

Pertama, Back Up Template Anda
Dari dashboard Blogger, pergi ke "Template" dan klik "Backup / Restore" tombol di sudut kanan atas. Simpan file xml di tempat yang aman..

Cari </ body> Tag
Selanjutnya, buka template dengan mengklik "Edit HTML" tombol di bawah "Pada Blog" lihat screenshot.

Ketika template Anda terbuka, arahkan kursor di atas kode tersebut, klik sekali, dan tekan CTRL dan F pada saat yang sama (PC) atau Command dan F (Mac). Ini akan membuka kotak pencarian di template Anda.

Masukkan </ body> di kotak pencarian, lalu tekan enter. Kode akan "mengarah" ke </ body> tag pada template.

Tambahkan Kode

Tepat di atas </ body> tag, masukkan baris kode ini:

Tekan orange "Simpan Template" tombol di bagian atas untuk menyimpan template. Kemudian, lihat tampilan pada posting foto di blog. Jika Anda akan melihat tombol Pin nampak di sudut kiri atas gambar ketika Anda mengarahkan kursor di atas masing-masing gambar. Bagus, kan?

Cara Hapus/Hilangkan Tombol Dari Gambar Tertentu
Ada dua cara untuk menghapus tombol dari foto secara terpisah. Jika ingin menghapus atau menghilangkan tombol dari sebuah gambar dan mencegah dari pembaca menyematkan gambar dari pinmarklet, tambahkan "nopin" pada atribut gambar tersebut.

Untuk menambahkan atribut "nopin" ke gambar dalam posting atau halaman, beralih ke tampilan HTML posting atau halaman, dan menemukan img src HTML markup untuk gambar yang Anda ingin "nopin". Ini akan terlihat seperti ini:

Sebelum ditambahkan nopin = "nopin"

Masukkan nopin = "nopin" tepat setelah atribut pada lebar gambar:

Bila Anda menyimpan posting, tombol Pin It akan hilang dari gambar itu. Ini juga tidak akan pinnable melalui Pinmarklet, jadi gunakan sesekali saja!

Jika Anda lebih memilih untuk menghapus tombol dari sebuah gambar, tapi masih membiarkan pengguna pinmarklet menyematkan gambar tersebut, Anda dapat menambahkan data-pin-no-hover = "true" atribut ke link gambar Anda sebagai gantinya. Proses ini sama seperti untuk atribut nopin, Anda hanya memasukkan data-pin-no-hover = "true" sebagai gantinya.

Update: Cara menghapus/menghilangkan Pin It Button dari header Images

Ini memang tidak terjadi pada setiap orang, tetapi beberapa dari beberapa yang sudah menggunakan Kode diatas memiliki masalah tombol Pin It juga muncul di gambar header mereka. Jika hal ini terjadi pada Anda dan ingin menghapusnya, Anda hanya perlu menambahkan sedikit kode tambahan.

Pertama, back up template Anda lagi. Kemudian, cari </ body> tag lagi, dan masukkan potongan kode ini

tepat di atas </ body>, setelah kode tombol Pin Anda:

<script type="text/javascript">
document.getElementById("Header1_headerimg").setAttribute("nopin","nopin");
</script>

Pendukung pinterest
Tombol-tombol ini resmi, Pinterest-menciptakan tombol, sehingga kita bisa mendapatkan dukungan langsung dari Pinterest jika kita membutuhkannya. Anda dapat membaca dokumentasi tombol dan dukungan Pinterest kontak di sini.